Asas-asas Asas Berorientasi Objek (OOCSS)
Perkembangan Frontend bergerak cepat dengan banyak teknik baru yang ditambah setiap tahun. Ia boleh menjadi perjuangan untuk pemaju untuk bersaing dengan segala-galanya. Antara Sass dan PostCSS mudah hilang di laut alat pembangunan.
Satu teknik yang lebih baru adalah CSS Berorientasi Objek, juga dikenali sebagai OOCSS untuk jangka pendek. Ini bukan alat, melainkan metodologi penulisan CSS yang bertujuan untuk membuat CSS modular dan berasaskan objek.
Dalam jawatan ini, saya ingin memperkenalkan asas teras OOCSS, dan bagaimana idea-idea ini boleh digunakan untuk mengetengahkan kerja web. Teknik ini mungkin tidak menangkap dengan setiap pemaju, tetapi ia bernilai memahami konsep baru untuk menentukan sama ada aliran kerja anda boleh mendapat manfaat daripadanya.
Apa yang Membuat CSS Berorientasi Objek?
Pengaturcaraan berorientasikan objek (OOP) adalah paradigma pengaturcaraan yang memberi tumpuan mewujudkan objek boleh diguna semula dan mewujudkan hubungan di antara mereka, berbanding dengan pengaturcaraan prosedur yang mengatur kod ke dalam prosedur (rutin, subrutin, atau fungsi).
OOP telah digunakan secara meluas dalam kedua-duanya Bahasa JavaScript dan backend dalam beberapa tahun kebelakangan ini, tetapi menganjurkan CSS mengikut prinsipnya masih merupakan konsep baru.
The “objek” di OOCSS merujuk kepada a Elemen HTML atau apa-apa yang berkaitan dengannya (seperti kelas CSS atau kaedah JavaScript). Sebagai contoh, anda mungkin mempunyai objek widget bar sisi yang boleh direplikasi untuk tujuan yang berlainan (pendaftaran surat berita, blok iklan, jawatan terkini, dll). CSS boleh sasaran objek ini secara massal yang menjadikan skala angin.
Meringkaskan entri OOCSS 'GitHub, objek CSS mungkin terdiri daripada empat perkara:
- Nod HTML DOM
- Pengisytiharan CSS tentang gaya nod tersebut
- Komponen seperti imej latar belakang
- Tingkah laku JavaScript, pendengar, atau kaedah yang berkaitan dengan objek
Secara umumnya, CSS adalah berorientasikan objek apabila difikirkannya kelas yang boleh diguna semula dan disasarkan kepada pelbagai elemen halaman.
Ramai pemaju akan mengatakan OOCSS lebih mudah untuk berkongsi dengan orang lain dan lebih mudah diambil selepas berbulan-bulan (atau tahun) pembangunan tidak aktif. Ini dibandingkan dengan kaedah modular lain seperti SMACSS yang mempunyai peraturan yang lebih ketat untuk mengkategorikan objek dalam CSS.
Halaman FAQ OOCSS mempunyai banyak info jika anda ingin tahu lebih lanjut. Dan pencipta Nicole Sullivan sering bercakap mengenai OOCSS dan bagaimana ia berkaitan dengan pembangunan web moden.
Struktur Terpisah Daripada Gaya
Sebahagian besar OOCSS adalah menulis kod yang memisahkan struktur halaman (lebar, ketinggian, margin, padding) dari penampilan (fon, warna, animasi). Ini membenarkan pengilat tersuai untuk digunakan pada beberapa elemen halaman tanpa menjejaskan struktur.
Ini juga berguna untuk mereka bentuk komponen yang boleh bergerak di sekitar susun atur dengan mudah. Sebagai contoh, a “Recent Posts” widget dalam bar sisi harus dialihkan ke footer atau di atas kandungan sambil mengekalkan gaya yang sama.
Berikut adalah contoh OOCSS untuk a “Recent Posts” widget yang dalam kes ini adalah objek CSS kami:
/ * Struktur * / .side-widget width: 100%; padding: 10px 5px; / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; warna: # 2b2b2b; saiz fon: 1.45em;
Perhatikan itu susun atur diuruskan dengan .sebelah-widget kelas yang boleh digunakan untuk beberapa elemen bar sisi, sementara penampilan diuruskan dengan .jawatan baru-baru ini kelas yang boleh juga digunakan untuk kulit widget lain. Contohnya, jika .jawatan baru-baru ini widget telah dipindahkan ke footer, ia mungkin tidak mengambil kedudukan yang sama, tetapi ia boleh kelihatan dan terasa sama.
Lihat juga contoh sidebar dari CodePen. Ia menggunakan pemisahan kelas yang berbeza untuk terapung dan penyelarasan teks supaya replikasi tidak akan memerlukan kod CSS tambahan.
Bekas berasingan dari Kandungan
Mengasingkan kandungan dari elemen kontena adalah satu lagi prinsip penting OOCSS.
Dalam istilah yang lebih mudah, ini hanya bermakna bahawa anda harus mengelakkan menggunakan pemilih kanak-kanak apabila mungkin. Apabila menyesuaikan mana-mana elemen halaman unik seperti pautan utama, tajuk, sekatan, atau senarai yang tidak disusun, anda harus memberi mereka kelas unik dan bukannya pemilih keturunan.
Berikut adalah contoh mudah:
/ * OOCSS * / .sidebar / * kandungan bar sisi * / h2.sidebar-title / * gaya unsur h2 khas * / / * Bukan OOCSS * / .sidebar / * kandungan sidebar yang sama * / h2 / * menambah lebih khusus daripada yang diperlukan * /
Walaupun tidak menggerunkan untuk menggunakan format kod kedua, sangat disyorkan untuk mengikuti format pertama jika anda ingin menulis OOCSS bersih.
Garis Panduan Pembangunan
Adalah sukar untuk menyusun spesifikasi tepat kerana pemaju sentiasa membahaskan tujuan OOCSS. Tapi ini beberapa cadangan yang boleh membantu anda menuliskan kod OOCSS yang bersih:
- Bekerja dengan kelas bukan ID untuk gaya.
- Mencuba untuk menjauhkan diri dari kekhususan kelas keturunan peringkat multi kecuali jika diperlukan.
- Tentukan gaya unik dengan kelas berulang (contohnya terapung, penjelasan, tumpuan fon unik).
- Memperluas elemen dengan kelas yang disasarkan bukannya kelas induk.
- Aturkan lembaran gaya anda ke bahagian, pertimbangkan untuk menambah jadual kandungan.
Ambil perhatian bahawa pemaju masih harus menggunakan ID untuk penyasaran JavaScript, tetapi mereka tidak diperlukan untuk CSS kerana mereka terlalu spesifik. Jika satu objek menggunakan ID untuk gaya CSS, ia tidak boleh direplikasi kerana ID adalah pengecam unik. Jika anda hanya menggunakan kelas untuk penggayaan masa itu warisan menjadi lebih mudah untuk diramal.
Selain itu, kelas boleh dirantai bersama untuk ciri-ciri tambahan. Satu elemen boleh mempunyai 10 + kelas yang melekat padanya. Walaupun 10 + kelas pada satu elemen bukanlah sesuatu yang saya cadangkan secara peribadi, ia membolehkan pemaju untuk mengumpulkan perpustakaan gaya yang boleh diguna semula untuk elemen halaman tanpa had.
Nama kelas dalam OOCSS agak kontroversial, dan tidak ditetapkan dalam batu. Ramai pemaju lebih suka mengekalkan kelas-kelas yang pendek dan ke titik.
Contoh kes Camel juga popular .errorBox bukannya .kotak ralat. Jika anda melihat penamaan kelas dalam dokumentasi OOCSS anda akan melihat kes unta adalah “rasmi” cadangan. Tidak ada yang salah dengan sengkang tetapi sebagai peraturan yang terbaik untuk mengikuti garis panduan OOCSS.
OOCSS + Sass
Kebanyakan pengembang web sudah suka Sass dan ia dengan cepat mengatasi komuniti frontend. Sekiranya anda belum mencuba Sass, ia patut diberi pukulan. Ia membolehkan anda menulis kod dengan pemboleh ubah, fungsi, sarang dan kaedah kompilasi seperti fungsi matematik.
Dalam tangan yang kompeten, Sass dan OOCSS boleh menjadi perlawanan yang dibuat di syurga. Anda akan mendapati menulis hebat tentang ini di blog The Sass Way.
Sebagai contoh, menggunakan Sass @extend arahan anda boleh memohon sifat satu kelas ke kelas lain. Ciri-ciri tidak ditiru tetapi sebaliknya, kedua kelas digabungkan dengan pemilih koma. Dengan cara ini, anda boleh mengemas kini sifat CSS di satu lokasi.
Sekiranya anda sentiasa menulis stylesheets ini akan menjimatkan jam menaip dan membantu mengautomasikan proses OOCSS.
Ingat juga itu penyelenggaraan kod adalah sebahagian besar OOCSS. Dengan menggunakan Sass, tugas anda menjadi lebih mudah dengan pemboleh ubah, campuran, dan alat linting maju yang terikat pada alur kerja.
Atribut utama kod OOCSS yang besar ialah keupayaan untuk berkongsi dengan sesiapa sahaja, bahkan diri anda pada masa akan datang, dan dapat mengambilnya dengan mudah.
Pertimbangan Prestasi
OOCSS bertujuan untuk beroperasi dengan lancar dan tanpa banyak kekeliruan. Pemaju mencuba yang terbaik tidak untuk mengulangi diri setiap kali, sebenarnya itulah premis di belakang pembangunan DRY. Dari masa ke masa, teknik OOCSS boleh membawa kepada beratus-ratus kelas CSS dengan sifat individu yang digunakan berpuluh-puluh kali dalam dokumen tertentu.
Oleh kerana OOCSS masih menjadi topik baru, sukar untuk berhujah mengenai topik kembung. Banyak fail CSS berakhir dengan struktur kecil, sedangkan OOCSS menyediakan struktur tegar dan (idealnya) kurang mengalir. Kebimbangan prestasi terbesar adalah dalam HTML di mana beberapa elemen dapat mengumpulkan segelintir kelas untuk struktur susun atur dan reka bentuk.
Anda akan mendapati perbincangan menarik mengenai topik ini di tapak seperti Stack Overflow dan CSS-Tricks.
Cadangan saya ialah cuba membina projek sampel, dan lihat bagaimana ia berlaku. Sekiranya anda jatuh cinta dengan OOCSS, ia secara radikal akan mengubah cara anda kodkan laman web. Sebagai alternatif, jika anda membencinya, anda masih mempelajari teknik baru dan berfikir secara kritikal mengenai bagaimana ia beroperasi. Ia menang-menang tidak kira apa.
Dapatkan OOCSS Penulisan Sibuk
Cara terbaik untuk belajar apa-apa dalam pembangunan web adalah untuk berlatih. Sekiranya anda sudah memahami asas-asas CSS maka anda berada dalam keadaan baik!
Oleh kerana OOCSS tidak memerlukan pra-proses anda boleh mencubanya dengan IDE dalam talian, seperti CodePen. Projek mudah adalah yang terbaik untuk memulakan, dan meningkatkan pengetahuan anda dari sana.
Lihat sumber-sumber ini untuk melanjutkan penyelidikan anda dalam bidang OOCSS yang berkembang.
- Laman Web Rasmi OOCSS
- CSS Berorientasikan Objek: Apa, Bagaimana, dan Kenapa
- OOCSS + Sass = Cara Terbaik Untuk CSS
- Pengenalan kepada CSS Berorientasikan Objek
