Dari baris kode pertama, setiap orang mulai memahami pentingnya mengaturnya dengan benar dan mengoptimalkan ruang kerja secara keseluruhan.
Tidak penting industri mana yang dibicarakan secara spesifik, tetapi penting untuk memahami bahwa di mana pun ada kode, harus ada aturan untuk pembuatan dan penyimpanannya.
Pada pasangan pertama, tentu saja, kelihatannya bahwa mematuhi aturan dan perintah tertentu hanya membutuhkan waktu, yang dalam praktiknya tampak sangat berbeda. Inti dari setiap prinsip penulisan kode adalah bahwa kita tidak menulisnya sekali dan untuk semua - kita selalu kembali ke sana untuk tujuan pengeditan dan modifikasi.
Proses ini dapat berubah menjadi masalah nyata jika kekacauan dan ketidakpastian dapat terjadi di sana. Masalah ini dapat diperburuk jika kekacauan ini tidak diciptakan oleh Anda, tetapi oleh orang yang tidak mungkin menjalin kontak dengan Anda. Untuk menghilangkan situasi seperti itu ada metodologi.
Jika kita berbicara tentang css, maka kita dapat mengatakan dengan percaya diri - masing-masing dari kita menggunakan metodologi tertentu, secara sadar atau tidak. Bahkan jika seseorang tidak menggunakan aturan dan standar tertentu, maka ia masih memiliki kebiasaannya sendiri dan terus-menerus mengulangi triknya.
Cara menulis kode tidak harus diterima dan distandarisasi secara umum, sesuatu yang lain harus wajib - harus dapat diprediksi.
Daftar metodologi yang harus Anda perhatikan tidak begitu lama:
-BEM,
-Smacss,
-OOCSS,
-MCSS,
-Atomik CSS
Atom Atom mungkin merupakan metodologi yang paling tidak lazim dan bahkan menakutkan, yang untungnya tidak mencegahnya menjadi sangat mudah dipahami dan diprediksi.
Untuk memperkuat pilihan saya, saya harus mundur sedikit.
Hampir Atom Atom
Ada kalanya direktori root dari sejumlah besar proyek pada tahap pembuatan antarmuka tampak seperti tiga file dan dua folder:
>fonts >img -index.html -style.css -script.js
Tapi kesederhanaan ini mungkin tampak nyaman, sebenarnya, setidaknya dalam dua dari tiga file ini sesuatu yang mengerikan terjadi.
Dua hal selalu mengganggu saya - kekacauan dan kurangnya gaya. Dalam Css, banyak nuansa berbeda berada di bawah klasifikasi gangguan, tetapi yang paling utama saya tidak senang dengan pengulangan konstan dari aturan dan properti yang sama untuk pemilih yang berbeda.
Solusi pertama untuk masalah ini adalah sebagai berikut:
- membuat file yang disebut "re-use.css",
- pembuatan instruksi dalam file ini, yang secara teori mungkin dibutuhkan oleh lebih dari satu pemilih,
- menambahkan penyeleksi berbeda ke instruksi yang sama.
Itu terlihat seperti ini:
... .class { display: inline-block;} .class { text-transform: uppercase;} ...
dan kemudian menerima yang berikut:
... .menu-link, .primary-button, .form-button, .footer-link, .social-link { display: inline-block;} ...
Tentu saja, solusi ini sangat tidak nyaman dan untungnya bersifat sementara. Tidak lama tersiksa dengan peralihan tanpa akhir antar file, dan menemukan tempat yang tepat di dalamnya, saya sampai pada kesimpulan bahwa akan jauh lebih mudah untuk membuat kelas terpisah yang bertanggung jawab untuk satu instruksi masing-masing:
...
.inline-block { display: inline-block;} .block {display: block;} .uppercase {text-transform: uppercase;}
Dalam file html, tag dengan sejumlah besar kelas tampak aneh, tetapi solusi ini bagi saya cukup dapat diterima:
<aside class=”sidebar fixed left top w-30 h-100 main-fill”></aside>
Sekilas, cukup untuk memahami bahwa ini adalah kolom samping, dengan pemosisian tetap, di sisi kiri layar, menempati 30% dari lebarnya dan 100% dari tingginya, diisi dengan warna utama.
Segala sesuatu yang terkait dengan nilai numerik, terutama ini adalah indentasi eksternal dan internal, saya tulis dalam format standar. Untuk melakukan ini, saya menambahkan kelas terpisah yang didahulukan ke setiap tag, atau kelompok tag, dalam contoh di atas adalah kelas "slider".
Itu adalah pendekatan yang hampir atomik dan hampir nyaman. Beberapa kekurangan mencegahnya dari merasa nyaman, yang paling penting adalah situasi berikut:
- ketika membuat sejumlah besar tag serupa, misalnya, daftar item, saya harus menyalin banyak kelas dan itu tampak rumit,
- ketika melakukan perubahan, saya harus menghapus dan menambahkan kelas untuk setiap elemen secara terpisah,
- ada banyak kelas yang tidak digunakan yang sulit ditangkap.
Dan kemudian dua hal datang ke penyelamatan yang membantu menyelesaikan semua masalah - ini adalah preprocessor dan mesin template.
Dengan bantuan mereka, saya memodifikasi metodologi saya dan membuat tata letak menyenangkan dan nyaman.
Css hampir sempurna
Saya akan mulai dengan preprocessor. Pilihannya tidak mendasar, saya pertama kali menggunakan Sass, lalu SCSS, dan akhirnya beralih ke Stylus, karena saya menghormati minimalis, dan Stylus seminimal mungkin (scss akan digunakan dalam contoh di bawah ini, karena popularitasnya).
Jadi, hal pertama yang saya lakukan adalah menulis kelas tambahan yang tampak seperti atom nyata menggunakan direktif @extend:
.flex { display: flex; flex-wrap: no-wrap; } .flex-jc-center { @extend .flex; justify-content: center; } .flex-ai-center { @extend .flex; align-items: center; }
Saya menyukai gagasan itu, dan petunjuk @extend menyebabkan kemiripan dengan inti atom, di sebelahnya ada instruksi tambahan.
Saya memutuskan bahwa ide tersebut harus dikembangkan dan dibuat file terpisah untuk organisme. Organisme yang saya sebut kelas yang mencakup beberapa arahan @extend:
.header { @extend .fixed; @extend .w-100; @extend .main-fill; @extend .left; @extend .top; @extend .flex-ai-center; @extend .z-top; }
Setelah menciptakan "kebun binatang" kecil dari berbagai organisme, saya memutuskan untuk melakukan sesuatu dengan kelas yang membutuhkan nilai numerik untuk lekukan dan ukuran.
Kemampuan preprocessor membantu saya untuk mengatasi ini lagi, dengan bantuan yang saya tulis beberapa fungsi dan menambahkan variabel.
Pertama, saya mempelajari secara rinci proyek grafis yang saya dapatkan dari desainer dan mengungkapkan sejumlah pola:
- jumlah warna untuk setiap proyek,
- jumlah font
- jumlah ukuran yang berbeda untuk teks dan pos,
- lekukan berulang (untuk bagian, tombol, dll.)
Langkah pertama adalah menulis fungsi dan mixin untuk membuat kelas yang diperlukan:
// px em @function em($pixels, $context: $browser-context) { @return #{$pixels/$context}em };
// $text-size: ( l: 18, m: 16, s: 14, xs: 12 );
@mixin emFonts($list, $n) { // $list – , n – . @each $status, $size in $list { // - &-#{$status} { font-size: em($size - $n); // } } }
Sekarang kita dapat memanggil kombinasi mixin dan fungsi ini di tempat yang nyaman bagi kita:
.txt { @include emFonts($text-size, 0) }
Dan pada output kami mendapatkan 4 kelas untuk teks dengan ukuran berbeda:
.txt-m { font-size: 1.125em; } .txt-s { font-size: 1em; }
Demikian pula, fungsi untuk ukuran judul, teks dan warna isi, font, dll, dibuat dan dipanggil.
Artinya, bekerja pada setiap proyek dimulai dengan mengisi nilai-nilai untuk variabel, dan kelas dan fungsi itu sendiri bermigrasi dari satu proyek ke proyek lainnya.
Mesin Templat.
Saya pikir banyak dari Anda menggunakan templating, dan kemungkinan besar ini adalah Pug (sebelumnya disebut Jade).
Untuk pengaturan atom, perlu berkat 3 hal:
Pug benar-benar menyelamatkan kita dari kacamata kode HTML yang rumit, karena kita dapat mengubah kode berikut:
… <ul class=”menu__list flex-ai-center w-100 relative “> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>first</li> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>second</li> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>third</li> </ul>
nyaman untuk diedit:
-let menuItemClasses = 'menu__item m-color m-font txt-s inline-block bold-border' // ul li(class=`${menuItemCLasses}`) frst li(class=`${menuItemCLasses}`) second li(class=`${menuItemCLasses}`) third ... </ul>
atau dalam perwujudan lain, menggunakan loop:
let menuItems = ['first', 'second', 'third'] ul -for(let item of menuItems) { li(class=”menu__item m-color m-font txt-s inline-block bold-border”) -}
Ini tidak kurang nyaman, karena garis dengan kelas yang diperlukan tidak diulang lebih dari satu kali.
Kerentanan terakhir dari metodologi ini adalah bahwa sejumlah besar kelas yang tidak digunakan tetap ada dalam kode. Tetapi masalah yang tampaknya serius ini mudah diselesaikan dengan menambahkan plugin ke pembangun proyek yang menghapus kelas yang tidak perlu.
Kesimpulan
Kesimpulannya, saya ingin mengatakan yang berikut:
Sebelum mulai menggunakan "metodologi hampir atom", saya menggunakan smacss dan kemudian BEM untuk waktu yang lama. Sebagai hasilnya, dari bem saya hanya menyisakan nama untuk kelas yang membutuhkan deskripsi indentasi dan ukuran, dan hierarki penyimpanan file dan folder. Satu set kelas dan fungsi yang sudah jadi, saya terhubung ke proyek sebagai perpustakaan.
Poin penting yang ingin saya perhatikan adalah kenyamanan tata letak halaman dan bagian individu secara keseluruhan. Berkat kacamata mikro, cukup mudah untuk membuat "kerangka" dari halaman atau bagian di mesin templat dan baru kemudian melanjutkan untuk menulis gaya untuk itu.