Artikel ini membahas mengapa orang-orang kesulitan ketika membuat CSS. Juga menyebutkan kompleksitas CSS dan standar yang terus berubah sebagai alasan utama dari masalah tersebut.
Penulis juga membahas masalah komunikasi antara pengembang dan desainer dan kurangnya pelatihan dan pendidikan yang memadai. Dia menyebutkan beberapa kesalahan umum CSS seperti model kotak dan float dan bagaimana cara menghindarinya.
Mengapa Programmer Kesulitan Membuat CSS?
Kami tidak pandai dalam mengajarkan CSS. Meskipun ada banyak praktisi CSS yang hebat di luar sana yang membagikan pengetahuan mereka (Stephanie Eckles, Kevin Powell, Adam Argyle, dll.). Banyak orang yang belajar HTML dan CSS di universitas atau bootcamp, di mana mereka mungkin tidak memiliki pengetahuan yang cukup.
Menggunakan teknik-teknik yang sudah ketinggalan jaman. Atau mencoba untuk menjadi lebih fleksibel untuk mendukung kerangka kerja seperti Bootstrap atau Tailwind dan mengabaikan dasar-dasarnya. Akibatnya, banyak orang tidak memiliki pemahaman yang mendalam tentang HTML dan CSS, blok bangunan dasar web.
Hampir setiap lowongan pekerjaan untuk full-stack atau front-end engineer akan mencantumkan kemahiran dalam HTML, CSS, dan JavaScript sebagai persyaratan. Tetapi ketika mewawancarai kandidat, mereka jarang menguji keterampilan di luar JavaScript. Baca juga Dasar Tata Letak CSS Front-End Yang Biasa Digunakan Web Development.
Jika sebuah perusahaan akhirnya mempekerjakan seseorang yang telah menguasai keterampilan CSS, itu biasanya karena ketidaksengajaan. Jika Anda tidak memiliki orang yang memiliki keterampilan tersebut. Anda tidak dapat memeriksa orang lain untuk keterampilan tersebut, dan masalahnya terus berlanjut.
Menerapkan Serangkaian Gaya Visual Berulang-ulang
Terlepas dari kemajuan terbaru dalam teknologi CSS, banyak orang masih terjebak dalam pola pikir BEM. Mencoba merangkum semuanya dengan sempurna sehingga perubahan tidak memiliki konsekuensi yang tidak diinginkan.
Ambil contoh ini dari dokumentasi BEM:
.page__header {
padding: 20px;
}
.page__footer {
padding: 50px;
}Hal ini tidak jauh berbeda dengan menggunakan kelas utilitas di framework seperti Tailwind. Kecuali dalam kasus lain Anda tidak akan menggunakan page__header untuk menambahkan 20 piksel padding pada sebuah elemen.
Dengan pendekatan “atom-first” dari Tailwind. Anda harus menerapkan sebuah kelas untuk setiap keputusan desain, yang akan menghasilkan markup seperti contoh dibawah ini:
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<blockquote>
<p class="text-lg font-medium">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
<figcaption class="font-medium">
<div class="text-sky-500 dark:text-sky-400">
Sarah Dayan
</div>
<div class="text-slate-700 dark:text-slate-500">
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>Pada dasarnya kita mentransfer keputusan desain kontekstual yang sama. (dalam kasus ini, bagaimana kartu ini terlihat) ke nama kelas dalam markup. Daripada menambahkan nama kelas baru ke CSS kita.
Jadi Apa Jawabannya?
Kita ingin style kita cukup umum untuk digunakan kembali dalam konteks yang berbeda. Namun tidak terlalu umum sehingga kita harus terus mengulang-ulang dalam konteks tersebut. Kesulitan Membuat CSS akan hilang jika kita mengetahui konsep tersebut.
Singkatnya, idenya adalah untuk memberi gaya pada masing-masing komponen dengan satu kelas. Menyusun atau memodifikasi komponen dalam konteks yang berbeda dengan kelas utilitas. Dan menyediakan tata letak untuk menjaga konsistensi antara dan di dalam halaman.
Baca juga 12 Cara Untuk Optimasi Kode CSS Yang Kamu Buat Agar Lebih Ringan
Tampilan Yang Keren
Mari kita refaktor contoh kartu dari situs web Tailwind.
Kartu ini berisi testimoni, tetapi kita mungkin ingin menggunakan pola kartu ini dalam konteks yang berbeda. Kartu kita tidak perlu khawatir dengan konten internalnya. Artinya, dalam contoh kartu khusus ini, kita tidak akan menggunakan .card- untuk mengkualifikasikan semua konten. Gaya ini hanya menentukan tampilan wadah kartu. Mengurangi kesulitan dalam membuat CSS itu penting.
/* /scss/components/_card.scss */
.cool-card {
border-radius: $radius-medium;
background-color: $color-surface-brand-light;
overflow: hidden;
}
@media (prefers-color-scheme: dark) {
.cool-card {
background-color: $color-surface-brand;
color: $color-text-inverse;
}
}Variabel CSS digunakan di sini, bukan atribut khusus dari markup CSS. Saya menyukai properti khusus, tetapi secara kontroversial, saya tidak suka menggunakan markup. Ini juga point penting dalam mengurangi kesulitan dalam membuat CSS.
Sistem desain kami tidak hanya mendefinisikan nilai spesifik yang kami gunakan. (warna, jenis, spasi) tetapi juga konteks di mana kami menggunakannya. Kami tidak memberikan kelas utilitas kepada pengembang yang memungkinkan mereka untuk menerapkan warna apa pun. (misalnya .bg-slate-100), kami hanya ingin menggunakan warna tertentu dalam konteks tertentu.
Gunakan Warna Sesuai Konteks
Saya merasa ngeri setiap kali melihat mixin yang mengurutkan setiap warna dalam palet. Membuat kelas utilitas warna latar belakang untuk setiap warna. Anda tidak akan pernah menggunakan semua warna, dan jika Anda memberikan opsi untuk melakukannya. Anda akan mendapatkan kombinasi warna yang kurang kontras.
Itulah mengapa saya menggunakan lapisan penanda terpisah untuk menentukan konteksnya. $color-surface-brand-light mungkin menunjuk ke $slate-100. Jika kita ingin mengubah nilai warna merek yang digunakan untuk latar belakang. Kita dapat mengubah token dan menerapkannya ke komponen yang berbeda. Tanpa harus mencari setiap contoh $slate-100 dan menggantinya dengan warna yang berbeda.
Alih-alih memberikan akses kepada pengembang ke semua token. Kita dapat mengabstraksikannya ke dalam kelas-kelas kita. Pengembang dapat menggunakan kelas yang sesuai untuk konteks yang berbeda.
Selain itu, karena kita menggunakan SCSS. Kita dapat menggunakan lebih banyak kata dalam nama token karena mereka akan dikompilasi ke nilai yang lebih kecil.
Konten dalam kartu khusus ini terdiri dari gambar dan kutipan blok, disejajarkan secara horizontal menggunakan flexbox. Mari kita tambahkan alat flex.
/* /scss/utilities/_flex.scss */
.cool-flex {
--flex-align: center;
--flex-gap: $spacing-16;
display: flex;
align-items: var(--flex-align);
gap: var(--flex-gap);
}Di sini, kita menggunakan properti kustom CSS di alat bantu tata letak fleksibel (flex). Untuk menyediakan beberapa nilai default umum dari sistem desain kita. Dengan cara ini, kita tidak perlu menyediakan banyak kelas. Alat tambahan untuk mendukung semua nilai yang mungkin untuk setiap properti tata letak fleksibel.
Deklarasikan Atribut Style
Jika pengembang menghadapi situasi di mana mereka perlu mengganti pengaturan default, mereka dapat melakukannya dengan mendeklarasikannya dalam atribut style. Dalam kasus ini, kita tidak ingin ada celah antara gambar dan blockquote, karena ini akan ditangani oleh padding.
<figure class="cool-card cool-flex" style="--flex-gap: 0">
...
</figure>Tentu saja, ada atribut fleksibel lainnya yang mungkin ingin kita gunakan. Tetapi saya sangat yakin untuk menambahkannya saat diperlukan. Daripada mencoba mempertimbangkan semua kasus penggunaan yang mungkin. Untuk keperluan kartu ini, ini sudah cukup.
Dalam desain ini, flex hanya diterapkan ketika lebar viewport melebihi nilai tertentu. Sehingga kita dapat membuat alat flex lain yang hanya diterapkan di atas breakpoint tertentu.
/* /scss/utilities/_flex.scss */
@media (width >= $breakpoint-medium) {
.cool-flex-responsive {
--flex-align: center;
--flex-gap: $spacing-16;
display: flex;
align-items: var(--flex-align);
gap: var(--flex-gap);
}
}Saya tidak pernah benar-benar mengembangkan sistem yang memerlukan lebih dari satu breakpoint. (mungkin beberapa layout memerlukan breakpoint, tetapi komponen individual tidak). Jadi saya cenderung menggunakan -responsive untuk mengindikasikan hal-hal yang seharusnya hanya terjadi di atas breakpoint tertentu. Seiring dengan semakin luasnya dukungan terhadap query komponen. Query media berbasis viewport mungkin tidak akan diperlukan lagi dalam situasi yang sama.
Untuk saat ini, kita juga dapat menggunakan sintaks range baru untuk kueri media di browser evergreen! Kita dapat menggunakan width >= $breakpoint-medium sebagai pengganti max-width: $breakpoint-medium.
Gambar
Saya agak gila ketika para desainer menggunakan desain yang sama sekali berbeda antara layar lebar dan layar kecil. Sangat kesulitan sekali kalau membuat CSS seakan berbelit-belit. Saya akan melakukan yang terbaik untuk membuatnya berhasil.
Di sini kita memiliki gambar yang akan berubah dari lingkaran kecil menjadi gambar ukuran penuh pada layar besar. Hal ini mungkin memerlukan komponen yang unik.
/* /scss/components/_avatar.scss */
.cool-avatar {
width: $avatar-medium;
height: $avatar-medium;
border-radius: $radius-round;
object-fit: cover;
}
@media (width >= $breakpoint-medium) {
.cool-avatar {
--width: 100%;
max-width: var(--width);
width: auto;
height: auto;
border-radius: 0;
}Kami menambahkan penanda untuk ukuran gambar header yang membulat pada layar kecil. Menetapkan object-fit untuk memperhitungkan gambar yang rasio aspeknya tidak persegi. Pada layar besar, kami menggunakan properti khusus untuk menimpa lebar gambar.
Bahkan, kami harus mengatur ulang atribut –flex-align dari .cool-flex ke bentangan default. Untuk mendukung kasus di mana teks dalam blok kutipan (blockquote) lebih tinggi dari gambar. Akibatnya, atribut –width kita sebenarnya menetapkan lebar maksimum, dan lebar serta tinggi ditetapkan ke otomatis, ditentukan oleh rasio aspek gambar. Untuk mengimbangi hal ini, saya menambahkan align-self: centre inline dalam wadah teks. (Hal ini banyak dipertimbangkan untuk pilihan desain yang sangat spesifik, tetapi hal ini memang bisa saja terjadi).
Kita juga perlu mempertimbangkan posisi avatar pada layar kecil. Hal ini memerlukan beberapa kelas utilitas yang hanya muncul pada layar kecil. Ya, nama-nama kelas ini agak bertele-tele, tetapi menurut saya lebih jelas daripada md:h-auto dan menggunakan atribut yang logis.
/* /scss/utilities/_spacing.scss */
@media (width < $breakpoint-medium) {
.cool-margin-auto-on-small {
margin-inline: auto;
}
.cool-margin-block-start-on-small {
--size: $spacing-32;
margin-block-start: var(--size);
}
}Wadah Teks
Wadah yang berisi kutipan blok dan keterangan gambar menerapkan beberapa margin dalam (padding). Serta beberapa margin luar (margin) di antara elemen, dan teks berada di tengah layar kecil. Sekarang saatnya menambahkan lebih banyak kelas alat!
/* /scss/utilities/_spacing.scss */
:where(.cool-flow) {
--flow-size: $spacing-16;
& > :not(:last-child) {
margin-block-end: var(--flow-size);
}
}
.cool-inset-square-32 {
padding: $spacing-32;
}
/* /scss/utilities/_text.scss */
@media (width < $breakpoint-medium) {
.cool-text-center-on-small {
text-align: center;
}
}Saya telah memasukkannya ke dalam fungsi pseudo-class :where() untuk mengurangi spesifisitasnya menjadi nol. Sehingga Anda dapat menggunakan kelas utilitas lain untuk mengganti margin bawah elemen anak apa pun jika diperlukan. Tidak kesulitan lagikan dalam membuat CSS?.
Teks
Dalam versi Tailwind, mereka menerapkan .text-medium untuk mengatur berat font teks blockquote dan figcaption di bawahnya. Kita dapat menggunakan kelas yang sama dan menerapkannya ke seluruh wadah. Tetapi dalam hal ini kita dapat memiliki berat font yang diwarisi dari body.
Maka kita membutuhkan gaya teks untuk teks besar, dan apa yang saya sebut gaya “teks lunak”. Jenis teks ini menggunakan warna kontras yang lebih rendah untuk menunjukkan kepentingannya yang berkurang. Daripada dengan menyesuaikan ukuran font atau berat font.
Ada juga beberapa teks biru yang terlihat seperti tautan, tetapi sebenarnya tidak. Saya berasumsi ini sebenarnya adalah tautan. Dalam hal ini kita dapat menerapkan gaya .cool-text-interactive ke tautan dalam gaya global. Sehingga kita dapat menggunakan secara langsung tanpa kelas.
/* /scss/components/_text.scss */
.cool-text-large {
font-size: $text-large-font-size;
line-height: $text-large-line-height;
}
/* /scss/utilities/_text.scss */
.cool-text-interactive {
color: $color-text-interactive;
}
.cool-text-subdued {
color: $color-text-subdued;
}
@media (prefers-color-scheme: dark) {
.cool-text-interactive {
color: $color-text-interactive-inverse;
}
.cool-text-subdued {
color: $color-text-subdued-inverse;
}
}Tag Selesai
Berikut markup refactored kami.
<figure class="cool-card cool-flex-responsive" style="--flex-gap: 0; --flex-align: stretch">
<img class="cool-avatar cool-margin-auto-on-small cool-margin-block-start-on-small" style="--width: 12rem" src="https://assets.codepen.io/281/sarah-dayan_1.jpg" alt="" width="384" height="512">
<div class="cool-flow cool-text-center-on-small cool-inset-square-32" style="align-self: center">
<blockquote class="cool-text-large">
<p>
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
</blockquote>
<figcaption>
<div class="cool-text-interactive">
Sarah Dayan
</div>
<div class="cool-text-subdued">
Staff Engineer, Algolia
</div>
</figcaption>
</div>
</figure>Pada pandangan pertama, ini tidak jauh lebih bersih daripada contoh Tailwind. Sampai Anda benar-benar melihat kode sumber sampel Tailwind. Melihat semua kelas utilitas dan gaya sebaris yang sebenarnya mereka gunakan, yang tidak ditampilkan dalam sampel kode. Berikut ini hanya elemen gambar sebagai contoh:
<img src="/_next/static/media/sarah-dayan.de9b3815.jpg" decoding="async" alt="" class="absolute max-w-none object-cover bg-slate-100 rounded-full" style="width: 100%; height: 100%; left: 0px; top: 0px; transform-origin: 50% 50% 0px;">Namun, kode akhir mengurangi jumlah kelas secara keseluruhan. Sehingga memperkecil kesulitan dalam membuat CSS. Membuatnya lebih mudah untuk menyelesaikan peran kelas. Mengurangi pengulangan ketika gaya ini digunakan kembali dalam konteks yang berbeda.
