CSS Academy · Pelajaran

Organisasi File: ITCSS dan Pola 7-1

Susun file CSS menggunakan pola Inverted Triangle atau 7-1 untuk proyek yang dapat diskalakan.

Organisasi File: ITCSS dan Pola 7-1 adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Mengapa Mengatur Berkas CSS?

Seiring bertambahnya proyek, satu berkas CSS menjadi sulit dikelola. Struktur pengaturan berkas membantu tim membagi CSS menjadi lapisan logis yang dimuat dalam urutan yang tepat dan mudah dinavigasi.

ITCSS: CSS Segitiga Terbalik

ITCSS mengatur CSS ke dalam lapisan yang diurutkan berdasarkan peningkatan spesifisitas. Seperti segitiga terbalik, aturan yang paling luas (paling umum) berada di bagian atas, sedangkan aturan yang paling spesifik berada di bagian bawah. Hal ini mengikuti kaskade alami.

Lapisan ITCSS

7 lapisan ITCSS (dari yang paling umum hingga yang paling spesifik):

Pengaturan — Variabel dan token desain
Alat — Mixin dan fungsi
Umum — Pengaturan ulang/normalisasi
Elemen — Gaya dasar elemen HTML
Objek — Abstraksi tata letak (tanpa kosmetik)
Komponen — Komponen antarmuka pengguna
Utilitas — Penimpaan, pembantu, !important diizinkan di sini

Struktur Berkas ITCSS

Tata letak berkas ITCSS yang umum:

  <pre class="file-tree">src/styles/
  01-settings/
    _colors.scss
    _typography.scss
    _spacing.scss
  02-tools/
    _mixins.scss
  03-generic/
    _reset.scss
  04-elements/
    _headings.scss
    _links.scss
  05-objects/
    _container.scss
    _media.scss
  06-components/
    _button.scss
    _card.scss
  07-utilities/
    _text-align.scss
    _display.scss</pre>

Pola 7-1

Pola 7-1 mengatur Sass ke dalam 7 folder dan 1 berkas utama yang mengimpor semuanya:

abstracts/ — variabel, fungsi, mixin
base/ — pengaturan ulang, tipografi, elemen dasar
components/ — tombol, kartu, modal
layout/ — kepala halaman, kaki halaman, bilah sisi, grid
pages/ — gaya khusus halaman
themes/ — beberapa tema
vendors/ — CSS pihak ketiga

Berkas Entri Utama

main.scss utama mengimpor semua berkas parsial secara berurutan:

  <pre class="file-tree">@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'components/button';
@use 'components/card';
@use 'layout/header';</pre>

Lapisan CSS (@layer) untuk Pengorganisasian

CSS modern @layer memberikan manfaat pengurutan kaskade yang sama seperti ITCSS tanpa praprosesor. Lapisan dideklarasikan sekali dan prioritasnya tetap, terlepas dari urutan sumber.

  <div class="card text-primary">Layered card text</div>

Penempatan Bersama vs Terpusat

Alternatif untuk berkas gaya terpusat adalah menempatkan bersama CSS komponen di sebelah berkas komponen. Pendekatan ini umum dalam proyek React/Vue yang menggunakan Modul CSS atau CSS-dalam-JS.

Penamaan Berkas Parsial Sass

Berkas parsial Sass diawali dengan garis bawah (_button.scss). Garis bawah tersebut memberi tahu Sass bahwa berkas itu tidak dikompilasi secara mandiri — berkas tersebut harus diimpor ke dalam berkas utama.

PostCSS sebagai Alternatif

Jika Anda tidak menggunakan Sass, PostCSS dengan plugin @import atau CSS asli @import dengan @layer dapat mencapai pengaturan berkas yang sama tanpa praprosesor.

Berkas CSS Komponen

Baik menggunakan ITCSS, pola 7-1, maupun berkas yang ditempatkan bersama, setiap komponen sebaiknya memiliki berkasnya sendiri. Beri nama berkas sesuai komponen yang diberi gaya: _card.scss, button.css, Nav.module.css.

Pemeriksaan Singkat

Dalam ITCSS, lapisan mana yang berada paling atas pada segitiga terbalik (paling luas/paling tidak spesifik)?

Ringkasan

ITCSS mengurutkan lapisan CSS dari umum ke spesifik mengikuti kaskade. Pola 7-1 mengatur Sass ke dalam 7 folder yang diimpor melalui satu berkas utama. CSS modern @layer menyediakan kendali kaskade yang sama secara bawaan. Baik terpusat maupun ditempatkan bersama, prinsip utamanya adalah: satu berkas untuk setiap komponen, dengan impor yang diurutkan secara konsisten.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Organisasi File: ITCSS dan Pola 7-1” gratis?

Ya — teks lengkap “Organisasi File: ITCSS dan Pola 7-1” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Organisasi File: ITCSS dan Pola 7-1”?

Susun file CSS menggunakan pola Inverted Triangle atau 7-1 untuk proyek yang dapat diskalakan. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Organisasi File: ITCSS dan Pola 7-1” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy