Intro: CSS

CSS Object Model (CSSOM), Cascading Style Sheet, Web Design

Perkenalkan, saya freelancer di bidang Design. Saya kenal HTML (Hypertext Markup Language) sejak duduk di SMA. Waktu itu saya suka pelajaran TIK, isinya bisa macam-macam tergantung permintaan siswa, terkadang boleh akses internet sejam pelajaran. Nah, begitulah saya belajar ini sedikit demi sedikit sampai berani saya gunakan bikin halaman blog ini beda dari yang lain. Sebenarnya cuma ganti CSS (Cascading Style Sheet) aja. Langsung saja. Bagaimana menggunakan CSS? Kaidah penulisan CSS seperti ini: selector + { + declaration + }.

Selector dapat tediri dari: element (HTML tag), pseudo_element (::before, ::after, ::placeholder), pseudo_class (:hover, :active, dsb), class (.lines, .garis--biru, dsb), id (#Form__input, #404, dsb).

Declaration terdiri dari property + : + value + ;. Setiap declaration diawali tanda { dan diakhiri tanda }.

Setiap selector dapat memuat lebih dari satu deklarasi yang biasa disebut rule set. Baiklah, mari kita mulai dengan memberi nama selector kelas/class untuk kumpulan properti dan nilai/rule set CSS dengan metode BEM (Block Element Modifier):


.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

Secara garis besar dijelaskan oleh css-tricks begini:


/* Block component */
.btn {}

/* Element component that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block component */
.btn--orange {} 
.btn--big {}

Saya definisikan dengan pendekatan atomic design sebagai berikut:

Atoms => Element, entitas paling kecil dan banyak bertebaran dimana-mana. Intinya, saking kecilnya entitas ini bisa ditempatkan dimanapun tanpa mengubah sekitarnya. Spesifik dan tak berkaitan dengan Element lain. Egois dan individualis tapi kode dasarnya dapat dipakai ulang di berbagai Component dengan fungsi hampir sama. Biasanya memodifikasi html tag yang sudah disediakan untuk nomenklaturnya.

Contohnya:
.Button, .Nav, .Form, .Input, dsb.
Molecules => Component, gabungan dari berbagai Element yang punya fungsi tertentu. Semacam kelompok kerja dengan tugas berbeda. Beberapa memiliki bentuk mirip dengan yang lainnya namun tetap memiliki fungsi khusus.

Contohnya:
.Login__button, .Card__avatar, .Search__input, dsb.
Organism => Block, bagian paling konkrit dari halaman sebuah Website yang sudah lengkap dan siap pakai. Standalone Non-Breaking Moveable Component. Istilah gampangnya seperti kesatuan Component yang bertugas untuk satu fungsi tertentu.

Contohnya:
Login Block lengkap dengan komponen pendukungnya: .Wrapper, .Form, .Fieldset, .Legend, .Input, .Button dan .Label.
Templates => Module, bagian yang menjadi fokus utama dari halaman Website. Bagian ini terdiri dari beberapa Block yang sudah siap menempati tatanan halaman. Nah, di sini aku mau ambil sekalimat dari SMACSS yang singkatnya begini, defining rule set for a module, should avoid using IDs and element selectors, sticking only to class names. Arsitektur proyek perlu diperhatikan saat mencapai tahap penempatan Module karena akan berdampak pada Tampilan Website secara keseluruhan, jadi alangkah lebih baik menggunakan CSS dengan bijak (modular).

Contohnya:
.Sidebar, .Dialog, .Header, .Form, .Footer, .Popup, .Section, dsb.
Pages => Layout, saking besarnya gabungan Components/Modules bisa mengubah tatanan halaman. Nah, satu entitas Layout ini secara keseluruhan minimal terdiri dari tiga lapis entitas yang lebih kecil (Element dalam Component dalam Module) yang telah tersusun untuk mengisi halaman. Masing-masing dapat menerapkan berbagai macam Module untuk mencapai tatanan tertentu di satu halaman. Secara umum dapat Layout dikatakan sebagai Tampilan Website itu sendiri.

Contohnya:
Melingkupi gabungan konten utama yang ditampilkan di Pages. Seperti halaman yang menampilkan berbaris-baris .Card dimana masing-masing Card Module ini punya Media__wrapper, .Description__wrapper, dan .Action__wrapper di dalamnya. Sedangkan di sisi paling atas halaman terdapat .Navbar dan .Footer di paling bawah halaman.
Helper Rules (Modular Standalone Modifier), semacam alat untuk membantu kamu mengubah sedikit hal yang belum diatur pada Layout maupun Block. Ingat! Belum diatur! Jangan pernah mengatur ulang apa yang sudah kamu atur sebelumnya. Buatlah desain yang konsisten!

Contohnya:
.Align__left, .Uppercase, .Fullheight, .Quarterwidth, dsb.
State Rules (Atomic Standalone Modifier), ini adalah kumpulan aturan yang biasa digunakan untuk memodifikasi Element dan Component agar sesuai statusnya. Kita boleh menggunakan properti !important; di sini. You say it is brutal, but state of each element/component should updated as its role changed. Semacam mengatur ulang? Bukan begitu, biasanya kelas yang memuat aturan ini dikelola oleh JS sehingga lebih dinamis dan tidak banyak memengaruhi Layout. Konvensi yang disebut BEM ini menganjurkan pengembang untuk mengubah aturan default tiap Component yang akan diubah statusnya melalui Modifier. Namun, ada kalanya menggunakan sub-kelas (.kelasA.kelasB) lebih mudah diterapkan dan tidak memakan banyak tempat untuk nama kelas di kode dasar.

Contohnya:
Sebagian Component dapat menggunakan kelas yang terstruktur, .color--state-selected. Secara global dapat menggunakan kelas yang berdiri sendiri, .is-selected, .is-active, .is-collapsed, .is-open, .is-closed, .is-disabled, .is-success, .is-error, dsb.

Contoh:

they do early flights cause they connect with big airports.
20:00
they wanna get you to your connection as fast as possible. you don't know what will happen next if you don't try right?
20:02
yeah, this is hella big airports.
20:05

CSS Code:


.chat__wrapper {
  list-style: none;
  width: 70%;
  margin: auto;
}

.messages__item {padding: 1rem 0}

.messages__wrapper {
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem 1rem 1.5rem;
  width: fit-content;
  max-width: 50%;
  font-size: 1.5rem;
}

.flex__wrapper {
  display: flex;
  flex-direction: column;
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  flex-wrap: wrap;
  justify-items: flex-end;
  margin-block-end: 20px;
  margin-inline-start: -40px;
  flex-direction: column;
}

.align__end {align-self: flex-end}

.messages__content--self,
.messages__content--other {
  position: relative;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.messages__content--self {
  align-self: flex-end;
  background-color: grey;
  color: white;
  border-top-left-radius: 30px;
}

.messages__content--other {
  align-content: flex-start;
  background-color: black;
  color: whitesmoke;
  border-top-right-radius: 30px;
}

.messages__content--other:before,
.messages__content--self:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.messages__content--other:before{
  left: -15px;
  border: 10px solid black;
  border-left-color: transparent;
  border-bottom-color: transparent
}

.messages__content--self:before {
  right: -15px;
  border: 10px solid grey;
  border-right-color: transparent;
  border-bottom-color: transparent
}

.is-read:before{content: "Seen "}

HTML Code:


<ul class="chat__wrapper">
 <li class="flex__wrapper">
  <div class="messages__wrapper messages__content--self">
   <p class="messages__item">they do early flights cause they connect with big airports.</p>
   <time class="align__end is-read" datetime="2009-11-13T20:00">20:00</time>
  </div>
 </li>
 <li class="flex__wrapper">
  <div class="messages__wrapper messages__content--other ">
   <p class="messages__item">they wanna get you to your connection as fast as possible. you don't know what will happen next if you don't try right?</p>
   <time class="align__end" datetime="2009-11-13T20:02">20:02</time>
  </div>
 </li>
 <li class="flex__wrapper">
  <div class="messages__wrapper messages__content--self">
   <p class="messages__item">yeah, this is hella big airports. </p>
   <time class="align__end" datetime="2009-11-13T20:05">20:05</time>
  </div>
 </li>
</ul>