Menulis CSS yang Baik

Diterbitkan: 2016-10-17

Saya selalu berusaha mempelajari hal-hal baru. Namun, saya juga mencoba mempelajari cara untuk meningkatkan cara saya melakukan sesuatu. Baik pada pertunjukan penuh waktu saya dan untuk proyek sampingan klien, hal yang selalu ingin saya tingkatkan adalah CSS saya. Saya selalu merasa saya cukup baik dalam hal CSS, tetapi saya selalu merasa berantakan untuk dibaca, dan seringkali sulit untuk dipelihara.

Apa yang saya coba lakukan, adalah mencari tahu apa yang membuat CSS yang baik, dapat dibaca, dan dapat dipelihara. Saya pikir saya telah menemukan (dan menemukan) beberapa cara untuk membuat ini semua mungkin.

Masalah

Ada beberapa hal yang mengganggu saya tentang CSS. Gangguan paling umum yang saya miliki adalah:

  • mengulangi kode umum
  • awalan browser
  • kurangnya komentar
  • lebih dari pemilih yang memenuhi syarat
  • nama kelas yang buruk

Ketika datang ke proyek pribadi saya, saya bertanggung jawab penuh atas kode saya. Saya jarang mengomentari CSS saya, dan sering menganggapnya sebagai renungan. Itu salah.

Untuk waktu yang lama saya berpikir bahwa nama kelas saya adalah "semantik" dan hanya saya yang melakukan sesuatu, jadi tidak perlu menjelaskan kode, atau sedikit "peretasan", atau apa pun.

Kembali ke kode pada proyek lama dengan cepat membuktikan teori ini sangat salah.

Ketika datang ke kode di tempat kerja, saya tidak bisa disalahkan. Faktanya, sebagian dari masalahnya adalah jumlah orang yang terlibat di sana. Saat ini tim kami memiliki tujuh dari kami yang pada suatu saat telah menulis CSS untuk situs kami, dengan 6-8 lainnya yang telah datang dan pergi ke sana. bertahun-tahun. Setiap anggota tim memiliki tingkat pengetahuan dan kemampuan yang berbeda-beda mengenai CSS.

Selain itu, seperti yang sering terjadi pada proyek lama, beberapa kode sudah lama . Sebagian besar adalah pra-CSS3, atau pra-tren-tren-keren-5-tahun-lalu. Dalam kedua kasus tersebut, seringkali ada cara yang berbeda dalam melakukan sesuatu pada saat itu ditulis, dan dalam beberapa kasus, kurangnya pengetahuan secara alami.

Saya juga belajar bahwa beberapa programmer akan bersikeras bahwa kode mereka "mendokumentasikan diri sendiri". Jika Anda tidak terbiasa dengan istilah itu, itu diterjemahkan menjadi "kode saya tidak memiliki komentar".

Solusi

Meskipun tidak ada yang sempurna, saya yakin ada hal-hal yang dapat kita lakukan untuk meningkatkan kode kita. Saya menemukan Pedoman CSS oleh Harry Roberts beberapa waktu lalu. Ini sesuai dengan janji "Saran dan pedoman tingkat tinggi untuk menulis CSS yang waras, dapat dikelola, dan dapat diskalakan".

Komentar

Sementara Pedoman CSS memberikan secara spesifik tentang gaya komentar, saya pribadi hanya mencoba memasukkan sesuatu untuk memberi tahu saya apa yang saya pikirkan di masa depan. Saya memulai setiap komponen dengan komentar yang mewakili judul, mereka merinci maksud dari komponen tersebut.

Saat menggunakan praprosesor, saya memberi gaya komentar tertentu untuk disertakan dengan CSS, atau dilewati oleh praprosesor. Saya masih mengerjakan bagian ini, dan mencoba membiasakan diri meletakkan sesuatu , apa saja .

Orientasi objek

Orientasi objek adalah paradigma pemrograman yang memecah hal-hal besar menjadi hal-hal kecil. Dari Wikipedia:

Pemrograman berorientasi objek (OOP) adalah paradigma pemrograman yang mewakili konsep 'objek' […] yang biasanya merupakan instance dari kelas, [dan] digunakan untuk berinteraksi satu sama lain untuk merancang aplikasi dan program komputer.

Ketika berbicara tentang CSS, kami menyebutnya CSS berorientasi objek, atau OOCSS . Konsep dasar memecah struktur elemen, dari kulit elemen. Ini berarti kita dapat dengan mudah menggunakan kembali pola desain yang berulang, tanpa harus menggunakan kembali detail implementasi spesifik secara bersamaan. OOCSS sangat berfokus pada penggunaan kembali kode, yang membuat kita lebih cepat, dan dapat menjaga ukuran basis kode kita tetap rendah.

Saya memikirkan aspek struktural seperti kerangka; bingkai umum yang memberikan konstruksi yang dikenal sebagai objek . Benda-benda ini adalah pola desain sederhana yang bebas dari kosmetik apa pun. Kami abstrak struktur dari satu set komponen untuk memiliki objek generik.

Kami kemudian secara opsional menambahkan lapisan "kulit" ke struktur kami sehingga kami dapat memberikan abstraksi tampilan dan nuansa tertentu. Misalnya (diambil dari Pedoman CSS):

 /**
 * Objek tombol sederhana dan bebas desain. Perluas objek ini dengan kulit `.btn--*`
 * kelas.
 */
.btn {
    tampilan: blok sebaris;
    bantalan: 1em 2em;
    vertikal-align: tengah;
}

/**
 * Kulit tombol positif. Memperluas `.btn`.
 */
.btn--positif {
    latar belakang-warna: hijau;
    warna putih;
}

/**
 * Kulit tombol negatif. Memperluas `.btn`.
 */
.btn--negatif {
    warna latar: merah;
    warna putih;
}

Di sini kita melihat bagaimana kelas .btn hanya menyediakan struktur untuk suatu elemen, tetapi tidak ada hubungannya dengan kosmetik. Kita dapat memperluas .btn dengan kelas kedua, seperti .btn--positve untuk memberikan gaya yang lebih spesifik pada elemen tersebut:

 <button class="btn btn--positive">Oke</button>

Saya lebih suka menggunakan beberapa kelas dalam HTML saya, daripada menggunakan sesuatu seperti @extend di preprocessor. Ini memberi saya lebih banyak visibilitas dalam HTML saya yang memungkinkan saya untuk dengan cepat melihat kelas apa yang diterapkan ke elemen saya. Ini juga berarti bahwa kelas saya tidak terikat erat dengan gaya lain di CSS saya. Ini semacam membantu OOCSS mengikuti konsep enkapsulasi .

BEM

BEM ( Block, Element, Modifier ), adalah metodologi front-end yang dikembangkan di Yandex. BEM sebenarnya adalah metodologi yang sangat lengkap, dan sejujurnya saya belum menggali semua detailnya, tetapi yang saya khawatirkan hanyalah konvensi penamaan.

Saya menggunakan konvensi penamaan seperti BEM. Konsepnya sama, tetapi sintaks yang tepat mungkin sedikit berbeda.

BEM menempatkan kelas menjadi tiga kelompok:

  1. Blok: akar atau dasar dari suatu komponen
  2. Elemen: komponen di dalam Blok
  3. Pengubah: variasi atau ekstensi Blok

Analogi yang sangat mendasar ( bukan contoh):

 .anjing {}
.anjing__ekor {}
.anjing--kecil {}

Elemen dibatasi dengan dua garis bawah (__), dan pengubah dibatasi dengan dua tanda hubung (–).

Dalam analogi di atas, kita melihat bahwa .dog adalah Blok, akar dari elemen. Kemudian, .dog__tail adalah Elemen, itu adalah bagian yang lebih kecil dari Blok .dog . Terakhir, .dog--small adalah Modifier, variasi spesifik dari .dog Block. Anda juga dapat menerapkan Pengubah ke Elemen. misalnya, kita bisa memiliki .dog__tail--short to again, tentukan variasi pada Elemen dog__tail .

Dalam beberapa kasus saya mungkin ingin beberapa kata untuk Blok, Elemen atau Pengubah. Bagaimanapun, ini dipisahkan dengan tanda hubung tunggal (-), dan kelas selalu ditulis dalam huruf kecil .

Praprosesor

Saya telah menghabiskan waktu mengerjakan Praprosesor CSS ke dalam alur kerja saya, dan sejauh ini, itu sangat berharga. Praprosesor CSS mengambil kode yang ditulis dalam bahasa yang telah diproses sebelumnya dan mengubahnya menjadi CSS lama yang bagus. Mereka bukan CSS, yang berarti mereka tidak terikat pada aturan dan batasan CSS yang sama. Meskipun CSS bagus, itu tidak selalu memungkinkan kita untuk dengan mudah melakukan hal-hal yang ingin kita lakukan.

Misalnya, satu hal yang akan sangat bagus di CSS adalah variabel . Mungkin Anda ingin sesuatu memiliki margin kiri satu elemen sama dengan lebar elemen lainnya, dan tiba-tiba seseorang memutuskan bahwa angka-angka itu perlu diubah. Karena nomornya sama, dan tata letak Anda mungkin bergantung pada nomor itu, Anda harus mengubahnya lebih dari satu tempat. Tetapi dengan varibale Anda dapat mengubahnya hanya di satu tempat dan mencerminkannya di seluruh tata letak. Tentu saja, ada lebih banyak praprosesor daripada sekadar variabel, tetapi itu adalah permulaan!

Anda jelas tidak harus menggunakan praprosesor, tetapi saya pikir Anda akan menemukan kebanyakan orang yang melakukannya, tidak akan kembali. Saya tahu saya tidak akan melakukannya. Keuntungan dalam fleksibilitas, dan peningkatan keterbacaan adalah sesuatu yang saya tidak bisa menyerah. Cukup bisa menggunakan variabel dan mixin sudah cukup untuk membuat saya ketagihan.

Ada beberapa praprosesor yang tersedia, tetapi hanya dua yang benar-benar saya lihat dan gunakan adalah LESS dan SASS . Silakan lihat, dan pertimbangkan untuk menambahkan salah satu dari ini ke alur kerja Anda, Anda tidak akan melihat ke belakang.

Penutup

Maksud saya yang sebenarnya di sini, adalah bahwa CSS bisa lebih baik. Semuanya bisa lebih baik. Seseorang memberi tahu saya baru-baru ini dalam komentar di pos di Reddit bahwa "CSS tidak memiliki semantik". Saya sepenuh hati tidak setuju. CSS 100%, tanpa diragukan lagi bisa semantik.

Menggunakan OOCSS dan BEM, pada kenyataannya, memberi CSS Anda arti yang sangat semantik. Ini tidak berarti itu mudah , tetapi layak untuk dijelajahi. Gabungkan itu dengan Praprosesor CSS, dan Anda memiliki potensi untuk CSS yang sangat mudah dibaca, dapat dipelihara, dan dapat diskalakan .

Saya juga ingin mencatat bahwa ini tidak hanya membuat CSS Anda (diproses sebelumnya atau tidak) lebih mudah dibaca, tetapi juga membuat HTML Anda lebih mudah dibaca, dengan menerapkan nama kelas semantik ke elemen.

TL;DR

Ok, mungkin itu banyak – untuk meringkas, menulis CSS yang lebih baik dengan melakukan ini:

CSS Berorientasi Objek :

  • setiap kelas melakukan satu hal — ia melakukannya dengan baik, ia melakukannya dengan benar

Nama kelas gaya Block, Element, Modifier (BEM) :

  • Blok: .grid
  • Elemen: .grid__item (2 garis bawah)
  • Pengubah: .grid--wide (2 tanda hubung)

Praprosesor luar biasa :

  • periksa mereka: KURANG – SASS
  • atau temukan yang lain: 8 praprosesor CSS untuk mempercepat waktu pengembangan