Filsafat CSS

Halo semuanya! Sudah waktunya untuk mengumumkan bahwa kami berencana untuk merilis buku CSS baru sebelum akhir Februari, yang direkomendasikan untuk semua orang yang telah menguasai MacFarland (selagi masih tersedia, kami berencana untuk melakukan overpressure berikutnya pada bulan Januari).

Hari ini Anda diundang untuk menerjemahkan artikel oleh Keith Grant (diterbitkan pada bulan Juni), di mana penulis menetapkan sudut pandangnya tentang CSS dan benar-benar menjelaskan apa yang ingin ia bicarakan dalam bukunya. Kami membaca dan berkomentar!



Saya menghabiskan banyak waktu untuk merenungkan apa itu pemikiran berorientasi CSS. Tampaknya ada yang berhasil "mempelajarinya", sementara yang lain tidak. Saya berpikir bahwa jika saya dapat mengartikulasikan dengan jelas apa pandangan dunia ini, mungkin CSS itu sendiri akan menjadi lebih dimengerti bagi mereka yang bekerja dengan mereka. Ini adalah sebagian alasan mengapa saya duduk dan menulis buku CSS for Professionals.

Hari ini saya ingin mendekati masalah ini sekali lagi. Pertimbangkan tiga fitur utama CSS yang membedakan bahasa ini dari bahasa pemrograman tradisional. CSS bersifat persisten, deklaratif, dan kontekstual. Saya pikir memahami aspek-aspek bahasa ini adalah prasyarat utama untuk menjadi master CSS.

Tahan CSS

Jika Anda secara tidak sengaja menghapus sepotong kode dalam file JavaScript, maka aplikasi atau halaman web tempat digunakannya hampir pasti macet atau macet, dan skrip (atau bahkan seluruh halaman) akan gagal. Jika Anda melakukan hal yang sama dalam CSS, maka Anda mungkin tidak melihat apa pun. Hampir semua kode lain kecuali fragmen yang dihapus akan terus berfungsi sebagaimana mestinya.

Properti ini disebut ketahanan. HTML dan CSS dirancang khusus dengan harapan toleransi kesalahan. Jika masalah terjadi, browser membuat kesalahan; jika tidak, ia mengabaikan bagian kode ini dan melangkah lebih jauh.

Dari sudut pandang debugging, ini mungkin tampak absurd: jika suatu program tidak melakukan kesalahan, bagaimana kita dapat mengetahui bahwa ada yang salah? Tetapi ini adalah aspek terpenting dari perangkat CSS. Itu ditenun menjadi kain lidah itu sendiri. Saya akui, perlu waktu untuk terbiasa. Namun, segera setelah Anda memahami hal ini, Anda dapat melanjutkan dengan aman untuk menggunakan fitur-fitur yang tidak didukung di semua browser. Ini adalah bagaimana pengembangan progresif dari suatu situs atau aplikasi dipastikan.

Pertimbangkan contoh ini dengan tata letak mesh. Ini berfungsi baik di browser yang mendukung grid, dan di browser yang tidak mendukung grid. Di browser di mana grid tidak didukung, tata letak akan berubah menjadi sedikit tidak rata (ukuran persis elemen dapat bervariasi), tetapi halaman masih akan ditata kira-kira sebagaimana mestinya:

.portfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .portfolio__item { display: inline-block; max-width: 600px; } 

Browser yang tidak memahami dua deklarasi kisi akan mengabaikannya, dan akan mungkin untuk menyelesaikan pekerjaan berkat aturan lain. Pada gilirannya, browser yang memahami kisi menggunakan tata letak kisi dan akan mengabaikan deklarasi inline-blok (karena ini adalah bagaimana kisi dirancang untuk bekerja). Jen Simmons dengan bercanda menyebut fenomena ini " Quantum CSS ". Anda mengambil beberapa kemampuan CSS dan "menggunakan dan tidak menggunakan pada saat yang sama. Tetapi secara bersamaan bekerja dan tidak bekerja. "

Fenomena perilaku "keselamatan" ini merupakan bagian integral dari bekerja dengan CSS, tetapi ini asing bagi kebanyakan bahasa pemrograman tradisional.

Deklaratif CSS

Dalam JavaScript, kami menulis petunjuk langkah-demi-langkah spesifik yang menjelaskan bagaimana program harus mencapai beberapa hasil. Di CSS, Anda memberi tahu browser apa yang sebenarnya ingin Anda lihat di layar, dan browser menemukan cara untuk melakukan ini. Memahami ini sangat penting. Jika Anda mempelajari ini, maka CSS akan melakukan semua kerja keras untuk Anda , dan jika Anda tidak melakukannya, maka Anda akan memegang esensi CSS dan Anda akan kecewa berulang kali.

Saat Anda menulis CSS, sebenarnya Anda sedang menyiapkan sistem kendala. Kami tidak menunjukkan ke browser tempat masing-masing elemen tertentu harus ditempatkan pada halaman, tetapi kami menginformasikan apa yang harus indentasi di antara mereka, setelah itu browser itu sendiri meletakkan semuanya di tempatnya. Anda tidak memberi tahu browser (setidaknya, Anda tidak harus menunjukkan) berapa tinggi wadah yang seharusnya. Anda mengizinkan peramban untuk menentukan ini selama tampilan itu sendiri, ketika mengetahui isi wadah, tahu gaya apa yang digunakan dalam konteks ini, dan berapa lebar viewport yang tersedia.

Anda harus mempertimbangkan terlalu banyak variabel. Inti dari CSS adalah mengatur proses sehingga Anda tidak perlu khawatir tentang semua variabel ini. Tetapkan sistem pembatasan. Bahasa itu sendiri mengurus detailnya.

Contoh sederhana

Mari kita lihat contoh CSS: font-size: 2em . Apa yang dilakukan kode ini? "Meningkatkan ukuran font," katamu. Tapi itu belum semuanya. Ini juga mengoreksi tanda hubung dari baris teks di dalam wadah, karena sekarang lebih sedikit kata yang cocok dengan setiap baris. Dengan demikian, ini sering meningkatkan jumlah baris teks, dan juga meningkatkan ketinggian wadah sehingga baris baru ini cocok di dalamnya. Ketika Anda mengubah ketinggian wadah, semua teks yang terletak di halaman di bawah wadah ini akan bergeser sesuai. Akhirnya, kode di atas juga menetapkan nilai em lokal. Nilai semua properti lain yang digunakan untuk menentukan unit em harus dihitung ulang.

Pengumuman ini saja menghasilkan seluruh kereta perubahan pada halaman. Dan semuanya dirancang untuk mencapai apa yang harus Anda perjuangkan: konten selalu pas di halaman, elemen tidak saling tumpang tindih, dan semua properti yang bergantung pada ukuran font dikoreksi (katakanlah, indentasi). Anda tidak harus memikirkan semua detail ini. Browser itu sendiri melakukan semua perhitungan di atas, dan melakukan ini secara default.

Jika Anda ingin semua ini tidak terjadi, Anda dapat melakukannya juga. Anda dapat sangat membatasi ketinggian wadah dengan properti max-height dan overflow: auto max-height . Anda dapat mendefinisikan ulang margin bagian dalam sehingga diukur dalam satuan rem atau px , yaitu, mereka tidak dihitung ulang setelah ukuran font. Ini mengungkapkan aspek yang menarik dari bekerja dengan CSS: kadang-kadang Anda tidak memberi tahu browser apa yang harus dilakukan, tetapi, pada kenyataannya, melarangnya untuk melakukan apa pun.

Keuntungan dari grid

Namun, ada fitur baru di CSS yang bahkan lebih keren. Contoh paling umum adalah Flexbox dan Grid. Hanya beberapa pengumuman - dan Anda memiliki tata letak mesh sangat fleksibel yang hanya berfungsi. Tidak perlu khawatir tentang banyak kasus khusus. Faktanya, Anda memberi tahu peramban: "susun blok-blok ini dalam kolom dengan lebar masing-masing 400 piksel," dan browser melakukannya untuk Anda. Segala sesuatu tentang semuanya membutuhkan sekitar tiga baris kode.

Jika Anda mencoba melakukan ini secara imperatif, Anda harus berurusan dengan banyak skenario aneh. Bagaimana jika salah satu blok terlalu panjang? Bagaimana jika viewport terlalu sempit? Dan apakah itu sangat luas? Bagaimana jika ada seluruh lembar konten di satu elemen dan hanya beberapa kata di yang lain? Benar, sepertinya di CSS Anda tidak perlu memikirkan semua ini. Semuanya sudah dipikirkan untuk Anda dan ditetapkan dalam spesifikasi, dan browser mengikuti aturan untuk Anda. Ini adalah kekuatan bahasa deklaratif.

Tentu saja, ini bukan tanpa kompromi. Jika bahasa deklaratif tidak mendukung salah satu fitur yang Anda butuhkan (katakan, "jembatan"), itu tetap bergantung pada trik kakek atau pada JavaScript. Selain itu, pengembangan CSS sebagian besar telah dikhususkan untuk memerangi hal-hal seperti itu selama bertahun-tahun. Untungnya, dengan pengembangan Flexbox dan Grid, kita dapat melakukan lebih banyak lagi, dan tanpa peretasan (ya, elemen lepas merupakan peretasan). Jika Anda masih kekurangan sesuatu dalam situasi ini, saya sarankan membaca tentang CSS Houdini , yang baru saja mulai berakar di browser.

CSS sensitif terhadap konteks

Di era React, kami telah mengadopsi pendekatan yang sangat praktis: pengembangan berbasis komponen modular. Ini sesuai dengan praktik terbaik CSS, bersama dengan BEM, SMACSS, dan CSS-in-JS. Saya tidak ingin mengecilkan arti dari semua fitur ini, karena mereka memainkan peran kunci dalam membuat aplikasi skala besar. Tapi, saya pikir sama pentingnya untuk mengenali bahwa CSS tidak 100% modular, dan seharusnya tidak.
Ada dua alasan untuk ini. Yang pertama dan paling jelas - aplikasi harus dirancang dalam gaya global. Hampir selalu, Anda perlu mengatur ukuran headset dan font di tingkat halaman, yang akan digunakan secara default. Setelah itu, nilai-nilai ini akan diwarisi oleh semua elemen turunan yang tidak akan menimpanya secara eksplisit. Anda juga membutuhkan beberapa aspek desain Anda untuk diterapkan secara sistematis di seluruh halaman: tema warna, jari-jari fillet untuk blok, blok shading, dan ukuran margin keseluruhan. Lebih banyak gaya lokal yang bertindak di bagian halaman diterapkan dalam konteks gaya global ini.

Alasan kedua, yang lebih halus adalah bahwa baik CSS maupun keputusan desain Anda bergantung pada konteks halaman. Misalkan kita menerapkan gaya CSS berikut ke elemen pada halaman:

 .the-thing { position: absolute; top: 10px; left: 10px; } 

Apa yang akan dilakukan kode ini? Tidak tahu persis di mana elemen ini berada di dalam DOM, dan gaya apa yang diterapkan pada halaman selanjutnya, kami tidak dapat menjawab pertanyaan ini. Penempatan absolut dilakukan relatif terhadap unsur leluhur terdekat, dan penentuan posisi ini akan berbeda tergantung pada jenis leluhur yang dimaksud, dan penempatan apa yang diterapkan padanya.

Selain itu, kemampuan Anda (atau ketidakmungkinan) untuk saling overlay elemen akan sangat tergantung pada di mana dua elemen ini berada di DOM. Mengocok elemen dalam DOM dapat secara dramatis mempengaruhi tata letak elemen dan bagaimana mereka tumpang tindih. Itulah sebabnya aliran dokumen dan konteks overlay adalah topik mendasar (walaupun terkadang kompleks).

Sifat kontekstual dari CSS sebagian karena kenyataan bahwa ini adalah cara kerja desain. Jika seorang insinyur merancang jembatan, maka Anda tidak bisa hanya melihat gambar dan berkata: "semuanya baik-baik saja, tapi saya tidak suka balok ini; bawa dia pergi. " Jika Anda menghapus satu balok, ini akan memengaruhi kesatuan struktural seluruh jembatan. Demikian pula, ubah saja elemen desain - dan semua elemen lain di layar akan dianggap berbeda. Seringkali perlu untuk menggambar beberapa elemen sekaligus dalam kesatuan yang erat satu sama lain.

Misalnya, jika Anda meningkatkan judul di salah satu ubin, itu akan menjadi lebih mencolok bagi pengguna, dan karena ini, elemen-elemen lain di layar akan tampak kurang penting. Di sini keterbatasannya tidak terletak pada bidang fisika, seperti dalam pembangunan jembatan; kita berbicara tentang lebih banyak hukum "kemanusiaan" yang mempengaruhi persepsi manusia. Elemen-elemen halaman tercermin di layar, yang memiliki karakteristik fisiknya sendiri, dan ketika bekerja, perlu untuk mempertimbangkan realitas dunia fisik dan bagaimana kita melihatnya.

Seperti yang Anda ketahui, arsitektur perangkat lunak tunduk pada prinsip - prinsip modularitas dan enkapsulasi . Pendekatan ini dibenarkan pada tingkat kode, karena kode itu kompleks, dan metode yang dijelaskan memungkinkan Anda untuk memecahkan masalah menjadi fragmen yang dapat dicerna. Namun, harus diingat bahwa pendekatan ini tidak sempurna. Dalam CSS, Anda tidak pernah dapat sepenuhnya mengabaikan apa yang terjadi dalam modul tertentu.

Ringkasan

Tiga aspek yang dijelaskan membedakan CSS dari bahasa pemrograman tradisional. Perbedaan-perbedaan ini mungkin tidak langsung pas di kepala Anda, tetapi mereka adalah aspek yang paling kuat dari CSS. Saya berani menyarankan bahwa pengembang yang berhasil memahami dan memahami prinsip-prinsip ini dengan benar akan mencapai ketinggian nyata dalam CSS.