CSS Arsitektur Tiket.com
Halo masbro & mbaksis :) bertemu lagi dengan saya di sini, kali ini saya akan menulis tentang “CSS Arsitektur”, istilah yang sepertinya belum popular dalam pencarian Google bahasa Indonesia, tapi kalau kita menggunakan kata kunci “CSS Architecture” maka akan kita temukan banyak artikel menarik.
CSS itu mudah dimengerti tetapi tidak mudah dalam hal maintain. Semakin besar projek semakin kompleks penulisan stylesheet, karena itu dibutuhkan struktur yang baik dalam penulisan stylesheet. Salah satu solusinya adalah penggunaan CSS preprocessor.
CSS preprocessor adalah ekstensi stylesheet atau bahasa stylesheet dinamis yang bisa di-compile menjadi file CSS. Sass dan Less (2 CSS preprocessor populer) dibuat agar penulisan stylesheet lebih mudah dan efisien. Beberapa fitur CSS Preprocessor diantaranya: Variables, Nesting, Partials, Mixins, Inheritance, Operators, dan yang paling penting dalam CSS arsitektur adalah fitur Import.
Yah, terutama sejak munculnya CSS preprocessor yaitu Sass (2006) dan Less (2009), dimana file CSS bisa di-import, stylesheet tidak lagi harus ditulis dalam satu file CSS, stylesheet bisa dipisah-pisah menjadi bagian lebih kecil sesuai kategori dan fungsi, maka frontend engineer sadar untuk membuat pola struktur CSS, dari sinilah muncul CSS Architecture.
Fungsi CSS Arsitektur:
- Predictable, karena pemisahan stylesheet berdasarkan kategori dan elemen menjadi bagian-bagian kecil, maka penulisan stylesheet dapat diprediksi berdasarkan berapa banyak elemen style dalam satu halaman layout.
- Reusable, elemen-elemen stylesheet yang sudah dipisah dapat digunakan kembali di halaman web lain dengan layout yang berbeda tapi memiliki beberapa elemen yang sama, seperti header, footer, dan sidebar.
- Maintainable, jika ada bug maka kita tidak perlu mengedit satu file utama, tapi cukup mengedit file CSS yang menyebabkan bug, karena itu CSS jadi lebih mudah di-maintain.
- Scalable, dengan pemisahan dan pengkategorian elemen CSS maka proses development dapat diukur dari segi waktu, tingkat kesulitan dan biaya.
Jadi CSS Arsitektur adalah pola penulisan CSS dalam satu struktur kategori untuk merancang desain halaman web.
Berikut contoh CSS Arsitektur 7-1 pattern karya Hugo Giraudel:
sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _placeholders.scss # Sass Placeholders
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| … # Etc.
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| … # Etc.
|
|– layout/
| |– _navigation.scss # Navigation
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| … # Etc.
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| … # Etc.
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| … # Etc.
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| … # Etc.
|
`– main.scss # Main Sass filePenulisan di main.scss
@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';
@import 'abstracts/placeholders'; @import 'vendors/bootstrap';
@import 'vendors/jquery-ui';@import 'base/reset';
@import 'base/typography';@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';@import 'components/buttons';
@import 'components/carousel';
@import 'components/cover';
@import 'components/dropdown';@import 'pages/home';
@import 'pages/contact';@import 'themes/theme';
@import 'themes/admin';
Berikut CSS Arsitektur Tiket.com versi Cardamon
sass/
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| … # Etc.
|
|– bootstrap/
| |– _bootstrap.scss # Bootstrap framework
| … # Etc.
|
|– components/
| |– _menu.scss # Menu
| |– _banner.scss # Carousel
| |– _last-minute-hotel.scss # Cover
| … # Etc.
|
|– layout/
| |– _header.scss # Header
| |– _footer.scss # Footer
| … # Etc.
||– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| … # Etc.
||– ui-kit/
| |– _button.scss # Button Style
| |– _ghost-button.scss # Ghost Button Style
| |– _form.scss # Form Style
| |– _pagination.scss # Pagination Style
| … # Etc.
|
|– vendors/
| |- _normalize.scss # normalize
| |– _datepicker.scss # Datepicker
| |– _jquery-ui.scss # jQuery UI
| … # Etc.
|
`– main.scss # Main Sass file
Penulisan di main.scss
@import 'base/reset';
@import 'base/typography';@import 'bootstrap/bootstrap';@import 'components/menu';
@import 'components/banner';
@import 'components/last-minute-hotel';@import 'layout/header';
@import 'layout/footer';@import 'pages/home';
@import 'pages/contact';@import 'ui-kit/button';
@import 'ui-kit/ghost-button';
@import 'layout/form';
@import 'layout/pagination';@import 'vendors/normalize';
@import 'vendors/datepicker';
@import 'vendors/jquery-ui';
CSS Arsitektur ini dasarnya mirip pola 7–1, tetapi kami adaptasi karena kebetulan pakai CSS Framework Bootstrap sebagai elemen utama maka kami buat folder khusus /bootstrap. Dan yang membedakan dengan pola 7–1, kami membuat folder /ui-kit, sebagai implementasi dari design guideline UI/UX yang telah dibuat oleh team product Tiket.com.
Kami juga terinspirasi dari Atomic Design karya Brad Frost yang mengkategorian bagian-bagian kecil satu halaman layout dalam istilah: Atoms, Molecules, Organisms, Templates, Pages.
CSS Arsitektur ini diterapkan sejak kami merancang versi 3.0 (Cardamon), dan secara bertahap kami akan terus menggunakan untuk halaman yang baru juga menyeragamkan dan merapikan halaman-halaman yang lama.
Cheers
