Dasar-dasar CSS Berorientasi Objek (OOCSS)

Pengembangan frontend bergerak cepat dengan banyak teknik baru ditambahkan setiap tahun. Ini bisa menjadi perjuangan bagi pengembang untuk mengikuti semuanya. Antara Sass dan PostCSS mudah tersesat di lautan alat pengembangan.

Salah satu teknik yang lebih baru adalah CSS Berorientasi Objek, juga disebut OOCSS. Ini bukan alat, melainkan metodologi penulisan CSS yang bertujuan untuk membuat CSS modular dan berbasis objek.

Dalam posting ini, saya ingin memperkenalkan dasar-dasar inti OOCSS, dan bagaimana ide-ide ini dapat diterapkan pada pekerjaan web frontend. Teknik ini mungkin tidak sesuai dengan setiap pengembang, tetapi perlu memahami konsep-konsep baru untuk memutuskan apakah alur kerja Anda bisa mendapatkan manfaat dari itu.

Apa yang Membuat CSS Berorientasi Objek?

Pemrograman berorientasi objek (OOP) adalah paradigma pemrograman yang berfokus pada membuat objek yang dapat digunakan kembali dan menjalin hubungan di antara mereka, yang bertentangan dengan pemrograman prosedural yang mengatur kode ke dalam prosedur (rutinitas, subrutin, atau fungsi).

OOP telah menjadi banyak digunakan di keduanya JavaScript dan bahasa backend dalam beberapa tahun terakhir, tetapi pengorganisasian CSS sesuai prinsip-prinsipnya masih merupakan konsep baru.

Itu “obyek” dalam OOCSS mengacu pada Elemen HTML atau apa pun yang terkait dengannya (seperti kelas CSS atau metode JavaScript). Misalnya, Anda mungkin memiliki objek widget bilah sisi yang dapat direplikasi untuk tujuan yang berbeda (pendaftaran buletin, blok iklan, posting terbaru, dll). CSS bisa menargetkan objek-objek ini secara massal yang membuat penskalaan mudah.

Meringkas entri GitHub OOCSS, objek CSS dapat terdiri dari empat hal:

1. Simpul HTML DOM
2. Deklarasi CSS tentang gaya dari simpul-simpul tersebut
3. Komponen seperti gambar latar belakang
4. Perilaku JavaScript, pendengar, atau metode yang terkait dengan suatu objek

Secara umum, CSS berorientasi objek ketika mempertimbangkan kelas yang dapat digunakan kembali dan dapat ditargetkan ke beberapa elemen halaman.

Banyak pengembang akan mengatakan OOCSS lebih mudah untuk dibagikan dengan yang lain dan lebih mudah untuk diambil setelah berbulan-bulan (atau bertahun-tahun) pengembangan tidak aktif. Ini membandingkan dengan metode modular lainnya seperti SMACSS yang memiliki aturan yang lebih ketat untuk mengkategorikan objek dalam CSS.

Halaman FAQ OOCSS memiliki banyak info jika Anda ingin tahu lebih banyak. Dan pencipta Nicole Sullivan sering berbicara tentang OOCSS dan bagaimana hubungannya dengan pengembangan web modern.

Pisahkan Struktur Dari Gaya

Sebagian besar OOCSS adalah menulis kode yang memisahkan struktur halaman (lebar, tinggi, margin, padding) dari tampilan (font, warna, animasi). Ini memungkinkan menguliti adat untuk diterapkan ke beberapa elemen halaman tanpa mempengaruhi struktur.

Ini juga berguna untuk mendesain komponen yang bisa bergerak di sekitar tata letak dengan mudah. Sebagai contoh, a “Tulisan Terbaru” widget di sidebar harus dapat dipindahkan ke footer atau di atas konten dengan tetap mempertahankan gaya yang sama.

Berikut adalah contoh OOCSS untuk a “Tulisan Terbaru” widget yang dalam hal ini adalah objek CSS kami:

 / * Struktur * / .side-widget width: 100%; padding: 10px 5px;  / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; warna: # 2b2b2b; ukuran font: 1.45em;  

Perhatikan itu tata letak dikelola dengan .widget sisi kelas yang bisa diterapkan ke beberapa elemen bilah sisi juga, sementara penampilan dikelola dengan .Tulisan Terbaru kelas yang bisa juga digunakan untuk menguliti widget lainnya. Misalnya, jika .Tulisan Terbaru widget dipindahkan ke footer, mungkin tidak mengambil posisi yang sama, tetapi bisa memiliki tampilan dan nuansa yang sama.

Lihat juga contoh sidebar ini dari CodePen. Ini menggunakan pemisahan kelas yang berbeda untuk mengapung dan perataan teks sehingga replikasi tidak akan memerlukan kode CSS tambahan.

Pisahkan Wadah Dari Konten

Memisahkan konten dari elemen wadahnya adalah prinsip penting OOCSS lainnya.

Dalam istilah yang lebih sederhana, ini hanya berarti Anda harus menghindari menggunakan penyeleksi anak kapan pun memungkinkan. Saat menyesuaikan elemen halaman unik seperti tautan jangkar, header, blokquotes, atau daftar tidak berurutan, Anda harus memberinya kelas-kelas unik dan bukan pemilih terpilih.

Berikut ini contoh sederhana:

 / * OOCSS * / .sidebar / * isi sidebar * / h2.sidebar-title / * gaya elemen h2 khusus * / / * Non-OOCSS * / .sidebar / * isi sidebar yang sama * / .sidebar h2 / * menambahkan lebih spesifik daripada yang dibutuhkan * / 

Meskipun tidak mengerikan menggunakan format kode kedua, sangat disarankan untuk mengikuti format pertama jika Anda ingin menulis OOCSS bersih.

Pedoman Pengembangan

Sulit untuk menentukan spesifikasi yang tepat karena pengembang terus-menerus memperdebatkan tujuan OOCSS. Tapi ini dia beberapa saran yang dapat membantu Anda menulis kode OOCSS yang lebih bersih:

• Bekerja dengan kelas, bukan ID untuk styling.
• Mencoba untuk abstain dari kekhususan kelas turunan multi-level kecuali dibutuhkan.
• Menetapkan gaya unik dengan kelas berulang (mis. mengapung, perbaikan jelas, tumpukan font unik).
• Perpanjang elemen dengan kelas yang ditargetkan daripada kelas induk.
• Atur stylesheet Anda menjadi beberapa bagian, pertimbangkan untuk menambahkan daftar isi.

Perhatikan bahwa pengembang masih harus menggunakan ID untuk penargetan JavaScript, tetapi itu tidak diperlukan untuk CSS karena mereka terlalu spesifik. Jika satu objek menggunakan ID untuk gaya CSS, itu tidak akan pernah bisa ditiru karena ID adalah pengidentifikasi unik. Jika Anda hanya menggunakan kelas untuk penataan gaya saja pewarisan menjadi lebih mudah diprediksi.

Selain itu, kelas dapat dirantai bersama untuk fitur tambahan. Satu elemen bisa memiliki 10+ kelas yang melekat padanya. Sementara 10+ kelas pada satu elemen bukanlah sesuatu yang saya pribadi sarankan, itu memungkinkan pengembang untuk mengumpulkan perpustakaan gaya yang dapat digunakan kembali untuk elemen halaman tidak terbatas.

Nama-nama kelas dalam OOCSS agak kontroversial, dan tidak dibuat-buat. Banyak pengembang lebih suka membuat kelas singkat dan to the point.

Kasing unta juga populer, misalnya .kotak kesalahan dari pada .kotak kesalahan. Jika Anda melihat penamaan kelas dalam dokumentasi OOCSS Anda akan melihat bahwa unta adalah “resmi” rekomendasi. Tidak ada yang salah dengan tanda hubung tetapi sebagai aturan sebaiknya mengikuti panduan OOCSS.

OOCSS + Sass

Sebagian besar pengembang web sudah menyukai Sass dan dengan cepat menyusul komunitas frontend. Jika Anda belum mencoba Sass, ada baiknya mencobanya. Ini memungkinkan Anda untuk menulis kode dengan variabel, fungsi, metode bersarang dan kompilasi seperti fungsi matematika.

Di tangan yang kompeten, Sass dan OOCSS bisa menjadi pasangan yang dibuat di surga. Anda akan menemukan artikel yang bagus tentang ini di blog The Sass Way.

Misalnya, menggunakan Sass @memperpanjang Arahan Anda dapat menerapkan properti dari satu kelas ke kelas lain. Properti tidak diduplikasi tetapi sebaliknya, kedua kelas digabungkan dengan pemilih koma. Dengan cara ini Anda dapat memperbarui properti CSS di satu lokasi.

Jika Anda terus-menerus menulis lembar gaya, ini akan menghemat jam mengetik dan bantuan mengotomatiskan proses OOCSS.

Ingat juga itu pemeliharaan kode adalah bagian besar dari OOCSS. Dengan menggunakan Sass, pekerjaan Anda menjadi lebih mudah dengan variabel, mixin, dan alat linting canggih yang diikat dalam alur kerja.

Atribut kunci kode OOCSS yang hebat adalah kemampuan untuk membaginya dengan siapa pun, bahkan diri Anda di kemudian hari, dan dapat mengambilnya dengan mudah.

Pertimbangan Kinerja

OOCSS dimaksudkan untuk beroperasi dengan lancar dan tanpa banyak kebingungan. Pengembang mencoba yang terbaik tidak untuk mengulangi diri mereka sendiri di setiap belokan, pada kenyataannya itulah premis di balik pengembangan KERING. Seiring waktu, teknik OOCSS dapat menyebabkan ratusan kelas CSS dengan sifat-sifat individual diterapkan puluhan kali dalam dokumen yang diberikan.

Karena OOCSS masih merupakan topik baru, sulit untuk berdebat tentang topik mengasapi. Banyak file CSS yang akhirnya membengkak dengan sedikit struktur, sedangkan OOCSS menyediakan struktur yang kaku dan (idealnya) lebih sedikit mengasapi. Perhatian kinerja terbesar akan berada di HTML di mana beberapa elemen dapat mengakumulasi beberapa kelas yang berbeda untuk struktur dan desain tata letak.

Anda akan menemukan diskusi menarik tentang topik ini di situs-situs seperti Stack Overflow dan CSS-Trik.

Rekomendasi saya adalah mencoba membangun proyek sampel, dan lihat bagaimana hasilnya. Jika Anda jatuh cinta dengan OOCSS, itu dapat mengubah cara Anda membuat kode situs web secara radikal. Atau, jika Anda membencinya, Anda masih mempelajari teknik baru dan berpikir kritis tentang cara kerjanya. Menang-menang, apa pun yang terjadi.

Dapatkan OOCSS yang Sibuk Menulis

Cara terbaik untuk mempelajari apa pun dalam pengembangan web adalah berlatih. Jika Anda sudah memahami dasar-dasar CSS maka Anda sudah siap!

Karena OOCSS tidak memerlukan preprocessing, Anda dapat mencobanya dengan IDE online, seperti CodePen. Proyek sederhana adalah yang terbaik untuk memulai, dan meningkatkan pengetahuan Anda dari sana.

Lihatlah sumber daya ini untuk memajukan penelitian Anda di bidang OOCSS yang berkembang.

• Situs Resmi OOCSS
• CSS Berorientasi Objek: Apa, Bagaimana, dan Mengapa
• OOCSS + Sass = Cara Terbaik Untuk CSS
• Pengantar CSS Berorientasi Objek