Menjelajahi SMACSS: Arsitektur Scalable dan Modular untuk CSS

Diterbitkan: 2022-03-11

Saat kami mengerjakan proyek besar atau dengan grup pengembang, kami sering menemukan bahwa kode kami berantakan, sulit dibaca, dan sulit untuk diperluas. Ini terutama benar setelah waktu berlalu dan kita kembali dan melihatnya lagi—kita harus mencoba untuk berada dalam pola pikir yang sama seperti saat kita menulisnya.

Jadi apa yang telah dilakukan banyak orang adalah mereka telah membuat arsitektur CSS untuk membantu menata kode mereka sehingga CSS menjadi lebih mudah dibaca. SMACSS —yaitu, Arsitektur Scalable dan Modular untuk CSS —bertujuan untuk melakukan hal itu. Ini adalah kumpulan pedoman arsitektur CSS khusus dari Jonathan Snook yang telah saya adopsi.

Sekarang, pendekatan arsitektur SMACSS sedikit berbeda dari kerangka CSS seperti Bootstrap atau Foundation. Sebaliknya, ini adalah seperangkat aturan, lebih seperti templat atau panduan. Jadi mari selami beberapa pola desain CSS untuk mengetahui bagaimana kita dapat menggunakannya untuk membuat kode kita lebih baik, lebih bersih, lebih mudah dibaca, dan lebih modular.

Setiap struktur proyek SMACSS menggunakan lima kategori:

  1. Basis
  2. tata letak
  3. Modul
  4. Negara
  5. Tema

Basis

Di SMACSS, gaya dasar menentukan seperti apa tampilan elemen di mana pun pada halaman. Mereka adalah default. Jika Anda menggunakan lembar gaya yang disetel ulang, ini memastikan bahwa gaya yang dihasilkan sama di seluruh browser meskipun ada perbedaan di antara default CSS dasar internal yang dikodekan secara keras.

Dalam gaya dasar, Anda hanya boleh menyertakan pemilih elemen kosong, atau pemilih dengan kelas semu, tetapi tidak dengan pemilih kelas atau ID. (Anda harus memiliki alasan yang sangat bagus untuk menempatkan kelas atau ID di dalamnya, mungkin hanya jika Anda menata elemen plugin pihak ketiga dan Anda perlu mengganti gaya default untuk elemen tertentu.)

Berikut adalah contoh tampilan unit file dasar:

 html { margin: 0; font-family: sans-serif; } a { color: #000; } button { color: #ababab; border: 1px solid #f2f2f2; }

Jadi itu harus mencakup ukuran default, margin, warna, batas, dan nilai default lainnya yang Anda rencanakan untuk digunakan di situs web Anda. Tipografi dan elemen formulir Anda harus memiliki gaya terpadu yang muncul di setiap halaman dan memberikan nuansa dan tampilan bahwa mereka adalah bagian dari desain dan tema yang sama.

SMACSS atau tidak, saya sangat menyarankan untuk menghindari penggunaan !important sebanyak mungkin, dan tidak menggunakan deep nesting, tetapi saya akan membicarakannya lebih lanjut nanti di posting ini. Juga jika latihan Anda adalah menggunakan reset CSS, ini adalah tempat di mana Anda harus memasukkannya. (Saya lebih suka menggunakan Sass, jadi saya hanya memasukkannya di bagian atas file, daripada harus menyalinnya atau merujuknya secara terpisah dari elemen <head> setiap halaman.)

Terkait: Bertema dengan Sass: Tutorial SCSS

tata letak

Gaya tata letak akan membagi halaman menjadi bagian-bagian utama—bukan bagian seperti navigasi atau mungkin akordeon, misalnya, tetapi pembagian tingkat atas:

Contoh gaya tata letak SMACSS: header, sidebar, konten/utama, dan footer

Gaya tata letak SMACSS adalah untuk bagian utama seperti header, sidebar, konten/utama, dan footer.

Tata letak ini akan menampung beberapa modul CSS seperti kotak, kartu, daftar tidak berurutan, galeri, dan sejenisnya, tetapi saya akan berbicara lebih banyak tentang modul di bagian selanjutnya. Mari kita pertimbangkan contoh halaman web untuk melihat apa yang dapat kita bagi menjadi tata letak:

Contoh halaman web yang dapat diatur ke dalam gaya tata letak header, utama, dan footer menggunakan SMACSS

Di sini kita memiliki header, main, dan footer. Tata letak ini memiliki modul seperti tautan dan logo di header di bagian atas, kotak dan artikel di utama, serta tautan dan hak cipta untuk footer. Kami biasanya memberi tata letak pemilih ID, karena tidak berulang di halaman dan unik.

Anda juga harus mengawali aturan untuk gaya tata letak dengan huruf l untuk membedakannya dari gaya modul. Biasanya di sini Anda akan menata hal-hal khusus untuk tata letak, seperti batas, perataan, margin, dll. Juga latar belakang bagian halaman itu bisa masuk akal, meskipun tampaknya tidak terlalu khusus untuk tata letak.

Berikut ini contoh tampilannya:

 #header { background: #fcfcfc; } #header .l-right { float: right; } #header .l-align-center { text-align: center; }

Anda juga dapat menambahkan pembantu ini untuk perataan yang dapat Anda gunakan untuk memposisikan elemen dengan mudah hanya dengan menambahkan kelas yang sesuai ke turunannya atau untuk menyelaraskan teksnya.

Untuk contoh lain, Anda dapat menggunakan beberapa margin default pada kotak tata letak, seperti .l-margin yang memiliki margin 20px . Kemudian, di mana pun Anda menginginkan padding untuk beberapa wadah, elemen, kartu, atau kotak, Anda cukup menambahkan kelas l-margin ke dalamnya. Tetapi Anda menginginkan sesuatu yang dapat digunakan kembali:

 .l-full-width { width: 100%; }

Bukan sesuatu yang digabungkan secara internal seperti ini:

 .l-width-25 { width: 25px; }

Saya ingin meluangkan waktu untuk berbicara tentang konvensi penamaan di SMACSS. Jika Anda belum pernah mendengar konsep namespace dalam CSS, pada dasarnya menambahkan nama ke awal elemen lain untuk membantu membedakannya dari hal lain. Tapi mengapa kita membutuhkan ini?

Saya tidak tahu apakah Anda pernah mengalami masalah berikut. Anda sedang menulis CSS dan Anda memiliki label pada sesuatu—Anda memasukkan gaya apa pun yang Anda suka, dan memanggil kelas Anda .label . Tapi kemudian Anda datang ke elemen lain nanti, dan Anda juga menginginkannya menjadi .label , tetapi menatanya secara berbeda. Jadi dua hal yang berbeda memiliki nama yang sama—konflik penamaan.

Penspasian nama membantu Anda mengatasi ini. Pada akhirnya, mereka disebut hal yang sama pada satu tingkat, tetapi mereka memiliki namespace yang berbeda—awalan yang berbeda—dan dengan demikian dapat mewakili dua gaya yang berbeda:

 .box--label { color: blue; } .card--label { color: red; }

Modul

Seperti yang saya sebutkan sebelumnya, modul SMACSS adalah bagian kode yang lebih kecil yang dapat digunakan kembali pada halaman, dan merupakan bagian dari satu tata letak. Ini adalah bagian dari CSS yang ingin kami simpan di folder terpisah, karena kami akan memiliki banyak di satu halaman. Dan seiring pertumbuhan proyek, kita dapat membagi menggunakan praktik terbaik struktur folder, yaitu, menurut modul/halaman:

Contoh hierarki file/folder menggunakan SMACSS dan Sass

Jadi pada contoh sebelumnya, kami memiliki artikel, yang dapat menjadi modul tersendiri. Bagaimana CSS harus terstruktur di sini? Kita harus memiliki kelas .article yang dapat memiliki elemen anak title dan text . Jadi untuk dapat menyimpannya di modul yang sama, kita perlu awalan elemen anak:

 .article { background: #f32; } .article--title { font-size: 16px; } .article--text { font-size: 12px; }

Anda mungkin memperhatikan bahwa kami menggunakan dua tanda hubung setelah awalan modul. Alasannya adalah terkadang nama modul memiliki dua kata atau awalan sendiri seperti big-article . Kita perlu memiliki dua tanda hubung untuk mengetahui bagian mana yang merupakan elemen turunan—misalnya membandingkan big-article-title big-article--title dan big-article--text .

Selain itu, Anda dapat membuat sarang modul di dalam modul jika modul tertentu mengambil sebagian besar halaman:

 <div class="box"> <div class="box--label">This is box label</div> <ul class="box--list list"> <li class="list--li">Box list element</li> </ul> </div>

Di sini, dalam contoh sederhana ini, Anda dapat melihat bahwa box adalah modul dan list adalah modul lain di dalamnya. Jadi list--li adalah anak dari modul list dan bukan dari box . Salah satu konsep kunci di sini adalah menggunakan maksimal dua pemilih per setiap aturan CSS, tetapi dalam kebanyakan skenario hanya memiliki satu pemilih dengan awalan.

Dengan cara ini, kita dapat menghindari duplikasi aturan dan juga memiliki pemilih tambahan pada elemen anak dengan nama yang sama, sehingga meningkatkan kecepatan. Tetapi ini juga membantu kita menghindari penggunaan aturan !important -style yang tidak diinginkan, yang merupakan tanda dari proyek CSS yang tidak terstruktur dengan baik.

Bagus (perhatikan pemilih tunggal):

 .red--box { background: #fafcfe; } .red-box--list { color: #000; }

Buruk (perhatikan pengulangan dalam pemilih dan metode referensi yang tumpang tindih):

 .red .box { background: #fafcfe; } .red .box .list { color: #000; } .box ul { color: #fafafa; }

Negara

Apa yang didefinisikan oleh status di SMACSS adalah cara untuk menggambarkan bagaimana modul kita terlihat dalam situasi dinamis yang berbeda. Jadi bagian ini benar-benar untuk interaktivitas: Kami menginginkan perilaku yang berbeda jika suatu elemen dianggap disembunyikan, diperluas, atau dimodifikasi. Misalnya, akordeon jQuery akan memerlukan bantuan untuk menentukan kapan Anda dapat atau tidak dapat melihat konten elemen. Ini membantu kita untuk mendefinisikan gaya elemen pada waktu tertentu.

Status diterapkan ke elemen yang sama dengan tata letak, jadi kami menambahkan aturan tambahan yang akan menggantikan aturan sebelumnya, jika ada. Aturan negara bagian didahulukan, karena itu yang terakhir dalam rantai aturan.

Seperti gaya tata letak, kami cenderung menggunakan awalan di sini. Ini membantu kita mengenali mereka dan memberi mereka prioritas. Di sini kita menggunakan awalan is , seperti pada is-hidden atau is-selected .

 <header> <ul class="nav"> <li class="nav--item is-selected">Contact</li> <li class="nav--item">About</li> </ul> </header>
 .nav--item.is-selected { color: #fff; }

Di sini, !important dapat digunakan, karena state sering digunakan sebagai modifikasi JavaScript dan bukan pada waktu render. Misalnya, Anda memiliki elemen yang disembunyikan saat memuat halaman. Pada klik tombol, Anda ingin menunjukkannya. Tapi kelas defaultnya seperti ini:

 .box .element { display: none; }

Jadi jika Anda hanya menambahkan ini:

 .is-shown { display: block; }

Itu akan tetap tersembunyi bahkan setelah Anda menambahkan kelas .is-shown ke elemen melalui JavaScript. Ini karena aturan pertama memiliki kedalaman dua level dan akan menimpanya.

Jadi, Anda dapat mendefinisikan kelas status seperti ini:

 .is-shown { display: block !important; }

Inilah cara kami membedakan pengubah status dari pengubah tata letak, yang hanya berlaku pada pemuatan awal halaman. Ini akan berfungsi sekarang sambil mempertahankan keunggulan penyeleksi minimal.

Tema

Yang ini harus yang paling jelas, karena digunakan untuk memuat aturan warna primer, bentuk, batas, bayangan, dan semacamnya. Sebagian besar ini adalah elemen yang berulang di seluruh situs web. Kami tidak ingin mendefinisikan ulang setiap kali kami membuatnya. Alih-alih, kami ingin mendefinisikan kelas unik yang hanya akan kami tambahkan nanti ke elemen default.

 .button-large { width: 60px; height: 60px; }
 <button class="button-large">Like</button>

Jangan bingung aturan tema SMACSS ini dengan aturan dasar, karena aturan dasar hanya menargetkan tampilan default dan cenderung seperti mengatur ulang ke pengaturan browser default, sedangkan unit tema lebih merupakan jenis gaya yang memberikan tampilan akhir, unik untuk skema warna khusus ini.

Aturan tema juga dapat berguna jika situs memiliki lebih dari satu gaya atau mungkin beberapa tema yang digunakan di negara bagian yang berbeda dan oleh karena itu dapat dengan mudah diubah atau ditukar selama beberapa acara di halaman, misalnya dengan tombol pengalih tema. Paling tidak, mereka menyimpan semua gaya tema di satu tempat sehingga Anda dapat mengubahnya dengan mudah dan mengaturnya dengan baik.

Metodologi Organisasi CSS

Saya telah membahas beberapa konsep kunci dari ide arsitektur CSS ini. Jika Anda ingin mempelajari lebih lanjut tentang konsep ini, Anda dapat mengunjungi situs resmi SMACSS dan mempelajarinya lebih dalam.

Ya, Anda mungkin dapat menggunakan metodologi yang lebih canggih seperti OOCSS dan BEM. Yang terakhir mencakup hampir alur kerja frontend lengkap dan teknologinya. Selektor BEM mungkin bekerja dengan baik untuk sebagian orang, tetapi beberapa orang mungkin menganggapnya terlalu panjang dan berlebihan, dan juga terlalu rumit untuk digunakan. Jika Anda membutuhkan sesuatu yang lebih sederhana yang lebih mudah diambil dan dimasukkan ke dalam alur kerja Anda—dan juga sesuatu yang menentukan aturan dasar untuk Anda dan tim Anda—SMACSS sangat cocok.

Akan mudah bagi anggota tim baru tidak hanya untuk memahami apa yang dilakukan pengembang sebelumnya, tetapi juga untuk mulai mengerjakannya secara instan, tanpa perbedaan gaya pengkodean. SMACSS hanyalah arsitektur CSS dan melakukan apa yang tertulis di kaleng—tidak lebih dan tidak kurang.