Sekilas Tentang Metodologi dalam CSS.

Published in

TLabCircle

5 min readJan 31, 2023

Jadi begini, saat kamu nulis kode-kode dalam CSS, kamu pasti memberi nama selector atau class pada CSS yang kamu buat kan?

Pertanyaannya adalah:

Bagaimana kamu memberi nama class tersebut?
Kenapa kamu memberi nama class seperti itu?
Apakah penulisan nama class yang kamu tulis sudah baik?

“Wait, penamaan class yang baik itu seperti apa, ya? Perasaan yang penting bisa digunakan.”

Nah, bener, yang penting bisa digunakan, apakah beneran bisa digunakan?

kalo kata Chris Eppstein “CSS itu simpel, gampang untuk dimengerti. TAPI CSS ribet untuk digunakan ataupun diurus (maintenance)”

Nah, Penulisan CSS yang baik parameternya diantaranya:

Predictable.
Re-use-able.
Maintainable.
Scalable.

Photo by RealToughCandy.com from Pexels: https://www.pexels.com/photo/man-love-people-woman-11035386/

CSS Metodologi

Biar parameter itu tercapai, ada beberapa cara penulisan naming class pada CSS, berdasarkan CSS Metodologi

Dari hasil survey state of css pada 2020, pada kategori Satisfaction terdapat 5 CSS metodologi.

Atomic CSS
BEM
ITCSS
SMACSS
OOCSS

Mari kita bahas sekilas terkait ke-5 CSS metodologi diatas

Atomic CSS

Atomic CSS atau biasanya disebut juga Utility-First CSS atau juga Functional CSS adalah konsep CSS architecture dengan penulisan naming class secara spesifik, 1 selector, 1 property, 1 value.

Penulisan dan implementasi Atomic CSS

.bgc-primary { background-color: #000000 }

<div class="bgc-primary"></div>

Ada juga penulisan berdasarkan Programmatic Atomic CSS.

<div class="bgc(#000000)"></div>

Dengan penulisan CSS:

.bgc\(#000000\) { background-color: #000000 }

Anyway, familiar ga sama penerapan atau penulisan CSS seperti itu 🤔? Pasti familiar lah ya 🤭🤫…

BEM

BEM singkatan dari B̵a̵d̵a̵n̵ ̵e̵k̵s̵e̵k̵u̵t̵i̵f̵ ̵m̵a̵h̵a̵s̵i̵s̵w̵a̵ Block-Element-Modifier.
Metode BEM ini — menurut opini pribadi — lebih baik digunakan untuk naming class yang memiliki identitas, seperti button, bagde, card, header, menu, sidebar, footer dan components yang sudah disepakati secara “design system” — panjang nih kalo bahas CSS dalam design system —

Block

Block dalam BEM adalah sebuah identitas yang berdiri sendiri, atau sebagai parent dari sebuah identitas.

Berikut naming class dari sebuah Block

.button { ... }
.bagde { ... }
.header { ... }

Naming class diatas tidak kuat untuk bisa disebut sebagai BEM CSS, akan bisa disebut BEM CSS apabila ada huruf ke-2, E yaitu, Element.

Element

Element adalah child atau turunan dari sebuah Block/identitas yang sudah didefinisikan.
Dalam 1 block/parent terdapat banyak element/child.
Naming class untuk mendifinisikan sebuah element menggunakan double underscore __
.block__element

.button__icon { ... }
.bagde__icon { ... }
.header__logo { ... }

Modifier

Modifier digunakan untuk mengubah kondisi sebuah block atau pun element, misal active, disabled, fixed, small, large, primary, secondary dan kondisi lainnya.
Naming class untuk mendifinisikan sebuah modifier menggunakan double dash --
Modifier tidak bisa berdiri sendiri, harus menjadi state dari block atau element

.button--primary { ... }
.bagde--success { ... }
.header--fixed { ... }

.button__icon--before { ... }
.bagde__icon--after { ... }
.header__logo--grayscale { ... }

Penulisan kode BEM dalam Nesting CSS (SASS)

.button ----------------- block
  ...
  &__icon --------------- element
    ...
    &--before ----------- modifier untuk element
      ...
  &__text --------------- element
    ...
  &--primary ------------ modifier untuk block
    ...

Implementasi BEM dalam HTML

<button class="button button--primary">
    <i class="button__icon button__icon--before"></i>
    <span class="button__text"></span>
</button>

ITCSS

IT dalam ITCSS bukan Information Technology, melainkan singkatan dari Inverted Triangle. Nah, ITCSS tidak hanya metodologi naming class dalam CSS, tapi juga mengenai Architecture-nya juga.

Settings

Jika penulisan CSS menggunakan SASS (CSS preprocessor) maka variables disimpan pada kategori settings.

$color-brand-primary:red
$color-brand-secondary: blue

Tools

Apabila varilables disimpan pada kategori settings, Tools ini menyimpan file css yang perlu dikelola lebih extra dibandingkan variables saja misalnya mixins dan functions

@mixin reset-list
  margin: 0
  padding: 0
  list-style: none

@function pow($base, $exponent)
  $result: 1
  @for $_ from 1 through $exponent
    $result: $result * $base

  @return $result

Generic

Kategori Generic ini untuk menyimpan pengaturan default browser, yang biasa kita kenal reset.css atau normalize.css

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

Elements

Kategori Elements hampir mirip dengan generic, bedanya dengan element ini lebih ke spesifik pengaturan berdasarkan web desain

h1
  font-size: $text-h1
  font-weight: $font-bold

Objects

Kategori object ini dikembangkan berdasarkan metodologi OOCSS. Penggunaan aturan style ini digunakan untuk:

Layouts

.o-container {}

Structure

.o-list-item {}

Undecorated design patterns (Skin)

.o-button {
  font-size: $text-base;
  font-weight: $font-bold;
  line-height: $text-base * 1.6
}

Components

Kategori Components ini untuk spesifikasi komponen web desain.

Product list
Cart
Payment

.c-products-list {
   @include font-brand()
   border-top: 1px solid $color-ui
   &__item {
     border-bottom: 1px solid $color-ui
   }
}

Trumps

Berdasarkan referensi, Trumps ini dibuat untuk helpers, utility, override pada objects atau components yang sudah dibuat.

.hidden {
  display: none !important
}

<div class="o-list-item o-list-item--is-active hidden"></div>

SMACSS

Scalable & Modular Architecture CSS

SMACSS pendekatan untuk mengorganisasi kode CSS sesuai dengan kategorinya dan fungsinya. dikenalkan oleh Jonathan Snook

Pengkategorian Struktur dalam SMACSS

Base

kode-kode CSS yang bertanggung jawab untuk memberikan style default/awal pada tag-tag/elemen-elemen HTML tanpa adanya class ataupun id

p {...}
a, button {...}
ul,ol {...}
article,section,aside,footer,video,audio, ... {...}

Layouts

Mendefinisikan style untuk pengaturan tata letak dari elemen web, misalnya tata letak header, content, sidebar, footer.

.wrapper { width:960px; margin:0 auto; }
.container { width:960px; margin:0 auto; }
article { width:60%; float:left; }
aside { width:40%; float:right; }

Module

Mendefinisikan element dalam desain web yang dapat digunakan/ditampilkan berulang.

.news { display: flex }
.news__cover { flex: 0 0 40% }
.news__info { flex: 0 0 auto }

State

Mendefinisikan perubahan pada element/tag-tag HTML atau selector, yang biasanya di-trigger melalui javascript.

.is-show { display: block}
.is-hidden { display: none}

Implementasi pada HTML

<div class="modal is-hidden">...</div>
<div class="modal is-show">...</div>

Theme

kategori ini diisi dengan style-style yang berhubungan dengan theme dari desain web.

.bg-dark { background: #323232 }
.accessibility-mode { color: #323232; …; … }
.black-pink { background: #323232; color: pink }

Struktur folder CSS (SASS)

sass/

    base/
      _variables.sass
      _reset.sass

    layouts/
      _header.sass
      _footer.sass
      _sidebar.sass
      _container.sass

    module/
        _button.sass
        _badge.sass
        _card-news.sass

    state/
      _state.sass

    theme/
        _dark.sass
        _light.sass
        _theme.sass

OOCSS

Object Oriented CSS

Pada dasarnya, kode object CSS menentukan gambaran yang sama/berulang, yang bisa digunakan terpisah sendiri antara HTML, CSS dan JS. Serta bisa digunakan untuk object lainnya. — Nicole Sullivan

2 prinsip utama OOCSS

Pisahkan Struktur dari Visual

Struktur itu yang tidak terlihat
Visual itu yang terlihat

Pisahkan Container dari Content

Pisahkan ketergantungan antara container dan content dari object yang dibuat.
Object harus terlihat sama dimanapun konteksnya.

Kesimpulan

Tulisan ini hanya membahas sekilas tentang metodologi CSS, semoga bisa dilanjutkan ditulisan lainnya.
Masing-masing metodologi tidak ada yang lebih baik, karena kembali lagi ke kebutuhan developer.
Metodologi hanya sebagai acuan untuk developer me-manage CSS yang ditulis.
Tiap metodologi bisa dikombinasikan, tidak harus berdiri sendiri.
Semoga ketika developer menulis kode CSS, memiliki alasan yang kuat berdasarkan metodologi, bukan hanya trend.
ITCSS bisa dikombinasikan dengan Atomic CSS, OOCSS, dan BEM. Secara foldering juga bisa disesuaikan dengan SMACSS