🕴️ 🛶 💹 Kami menulis CSS lebih baik dan lebih indah 🤷🏻 👩🏼‍🎨 🔡

Sejujurnya: menulis CSS yang baik itu sulit.
Banyak pengembang tidak suka menulis CSS. Apa pun, tapi bukan itu! Bukan CSS.

Ketika Anda harus menangani CSS ketika mengembangkan aplikasi, ini bukan bagian pekerjaan yang paling menyenangkan. Tapi itu tidak bisa dihindari, bukan? Hari ini sangat penting untuk menyenangkan pengguna dengan desain aplikasi yang tanpa CSS - tidak ada.

Ketika proyek baru dimulai, semuanya berjalan dengan baik. Anda hanya memiliki beberapa pemilih: .title , input , #app - semudah #app .

Namun lambat laun aplikasi tumbuh, dan menakutkan untuk melihat ke dalam CSS: tidak mudah untuk mengetahui semua penyeleksi ini. Anda mulai menulis sesuatu seperti div#app .list li.item a , beberapa bagian kode diulangi lagi dan lagi, dan buang semua tulisan Anda di akhir file: Anda tidak peduli, karena CSS payah. Hasilnya adalah 500 baris kode CSS yang tidak dapat didukung.

Ini saya saat melawan CSS

Diterjemahkan ke Alconost

Tantangan saya hari ini adalah mengajari Anda cara menulis CSS dengan lebih baik. Saya ingin Anda melihat proyek lama dan berpikir: “Ya Tuhan! Bagaimana Anda bisa menulis ini? "

Tapi bagaimana dengan kerangka kerja CSS? - kamu bertanya. Bagaimanapun, mereka diciptakan untuk ini - untuk menulis kode CSS yang baik.

Benar Tetapi mereka memiliki kelemahan:

Desain output sering membosankan.
Mungkin sulit untuk membuat pengaturan yang diperlukan atau melampaui kemampuan kerangka kerja.
Untuk menggunakan kerangka kerja, Anda harus mempelajarinya terlebih dahulu.

Nah, Anda membaca artikel ini - itu artinya ada alasannya, bukan? Jadi, tanpa basa-basi, silakan, belajar menulis CSS lebih baik.

Catatan Artikel ini bukan tentang cara membuat aplikasi yang indah, tetapi tentang cara menulis kode CSS yang didukung dan bagaimana mengaturnya.

SCSS

Dalam contoh, saya akan menggunakan SCSS .

SCSS adalah preprocessor CSS, pada dasarnya adalah superset dari CSS yang menambahkan beberapa fitur keren, seperti variabel, bersarang, impor, dan kotoran ("mixins").

Selanjutnya saya akan memberi tahu Anda peluang apa yang akan kami gunakan di sini.

Variabel

SCSS memiliki variabel, dan keunggulan utamanya adalah penggunaan kembali. Misalkan Anda memiliki palet warna untuk suatu aplikasi, dan warna utama adalah biru.

Oleh karena itu, Anda memiliki warna biru di mana-mana: latar background-color tombol background-color , warna color header, tautan. BIRU - DI MANA SAJA.

Dan tiba-tiba biru kamu tidak suka. Favorit baru adalah hijau.

Jika Anda belum menggunakan variabel, Anda harus mengubah semua baris yang berwarna biru.
Dan dengan variabel, cukup ubah nilai salah satunya.

 //   $primary-color: #0099ff; //    h1 { color: $primary-color: }

Bersarang

Di SCSS, Anda bisa menggunakan nesting. Karena itu dari fragmen

 h1 { font-size: 5rem; color: blue; } h1 span { color: green; }

Anda dapat membuat kode seperti ini:

 h1 { font-size: 5rem; color: blue; span {  color: green; } }

Yang terakhir membaca lebih baik, kan? Nesting memungkinkan Anda menghabiskan lebih sedikit waktu untuk menulis pemilih yang kompleks.

Impor dan sebagian file

Jika Anda perlu menyediakan pemeliharaan dan keterbacaan, menyimpan semua kode dalam satu file besar adalah ide yang buruk. Jika Anda bereksperimen atau menulis aplikasi kecil, itu masih bisa diterima, tetapi pada tingkat profesional ... jangan coba-coba. Beruntung bagi kami, SCSS memecahkan masalah ini.

Kita dapat membuat "file parsial" - yang namanya dimulai dengan garis bawah : _animations.scss, _base.scss, _variables.scss dan seterusnya.

Untuk mengimpornya, arahan terkait digunakan: @import . Misalnya, Anda dapat melakukan ini:

 // _animations.scss @keyframes</i> appear { 0% {  opacity: 0; } 100% {  opacity: 1; } } <i>// header.scss</i> <b>@import "animations";</b> h1 { animation: appear 0.5s ease-out; }

Anda mungkin berpikir: “Aha! Dia punya kesalahan di sini! Kita perlu menulis _animations.scss , bukan animations . ”

Tidak. SCSS cukup pintar untuk menyadari bahwa ini adalah sebagian file.

Itu semua yang perlu kita ketahui tentang variabel, bersarang, sebagian file, dan impor. SCSS memiliki kemungkinan lain - pengotor, warisan, dan berbagai arahan ( @for , @if , ...), tetapi saya tidak akan menyinggung mereka di sini.

Jika Anda tertarik, baca dokumentasinya : cukup jelas dan ditulis dengan baik.

Pemesanan CSS: Metodologi BEM

Saya telah menggunakan nama-nama umum untuk kelas CSS berkali-kali. Nah, Anda tahu:. .button .page-1 .page-2 .custom-input .

Seringkali kita tidak tahu nama mana yang harus dipilih - walaupun penamaan adalah tugas yang penting. Bayangkan Anda mulai menulis aplikasi, dan kemudian memutuskan untuk menunda bisnis ini selama beberapa bulan - atau, lebih buruk lagi, seseorang mengambil alih proyek Anda. Jika Anda tidak memikirkan penamaan dalam kode CSS, akan sulit untuk segera memahami apa yang dimaksud dalam baris tertentu.

BEM membantu mengatasi masalah ini. BEM adalah konvensi penamaan; singkatan dari blok, elemen, pengubah.

Metodologi ini akan membantu Anda menyusun kode, membuatnya lebih modular, dan menyederhanakan penggunaan kembali. Mari kita lihat apa arti "blok", "elemen" dan "pengubah".

Blok

Blok dapat dibayangkan sebagai komponen. Ambil, misalnya, konstruktor Lego.

Bagaimana cara membuat rumah sederhana dari seorang desainer? Dibutuhkan jendela, atap, pintu, beberapa dinding - dan hanya itu. Inilah tepatnya blok kami - mereka membawa makna sendiri.

Penamaan: nama .block : .block
Contoh: .card, .form, .post, .user-navigation

Item

Dan bagaimana cara membuat jendela dari kubus desainer? Anda dapat menemukan kubus yang terlihat seperti bagian dari bingkai dan menyusun jendela yang indah dari mereka. Ini akan menjadi elemen kita. Mereka mewakili bagian yang diperlukan dari blok, tetapi di luar blok itu sendiri tidak berguna.

Penamaan: nama blok + __ + nama elemen: .block__element
Contoh: .post__author, .post__date, .post__text

Pengubah

Jadi, kami membuat semacam jendela. Sekarang kami membutuhkan hijau atau, misalnya, jendela kecil. Ini akan menjadi pengubah kami . Mereka adalah tanda pada blok dan elemen yang digunakan untuk mengubah perilaku, penampilan, dll.

Penamaan: nama blok ATAU elemen + -- + nama pengubah: .block__element--modifier, .block--modifier
Contoh: .post--important, .post__btn--disabled

Catatan

BEM berarti kelas penamaan dan hanya kelas . Bukan pengidentifikasi dan bukan tag - hanya kelas .
Blok dan elemen dapat bersarang di blok dan elemen lain, tetapi harus sepenuhnya independen. Tidak perlu mandiri . Oleh karena itu, tidak perlu menambahkan bidang ke tombol sehingga berada di bawah tajuk, jika tidak maka akan dilampirkan ke tajuk. Lebih baik menggunakan kelas pembantu.
Ya, file HTML akan kelebihan beban, tetapi tidak menakutkan: kelebihan BEM lebih besar daripada kerugian ini.

Contoh

Sedikit latihan untuk pembaca. Kunjungi situs yang sering Anda kunjungi dan pikirkan tentang blok, elemen, dan pengubah apa yang mungkin ada di sana.

Misalnya, saya dapat membayangkan gambar seperti itu di Google store:

Sekarang giliranmu. Penasaran dan pikirkan apa yang bisa dilakukan dengan lebih baik. Dan tentu saja, untuk meningkatkan keterampilan Anda sendiri, Anda perlu mencari, bereksperimen, dan menulis kode secara mandiri.

Mengatur File CSS: Prinsip 7-1

Aku belum membuatmu lelah? Hebat! Mari kita cari tahu cara mengatur file CSS. Ini akan sangat meningkatkan efisiensi kerja dan membantu Anda secara instan menemukan kode CSS yang perlu diperbaiki.

Saatnya berkenalan dengan prinsip "7-1".
Angka-angka ini tidak memberi tahu Anda apa-apa, bukan?

Tapi semuanya cukup sederhana. Ada dua aturan yang harus diikuti:

Tempatkan sebagian file dalam 7 folder.
Impor semuanya menjadi satu file main.scss terletak di root. Itu saja.

Tujuh folder:

Folder base adalah kode CSS templat yang Anda tulis setiap kali Anda memulai proyek baru. Ini bisa berupa aturan tata letak, animasi, kelas bantu (misalnya, margin-right-large , text-center , ...) dan sebagainya.
Folder components - semua komponen yang digunakan untuk membentuk halaman: tombol, form, modul paging - "swipers", jendela sembul, dll.
Folder tata letak - untuk tata letak berbagai bagian halaman, yaitu header, footer, navigasi, bagian, custom grid, dll.
Folder pages adalah untuk halaman yang memerlukan gaya terpisah yang berbeda dari standar.
Folder themes - untuk berbagai tema aplikasi (mode gelap, administrasi, dll.).
Folder abstracts - semua fungsi, variabel, dan pengotor. Singkatnya, hal-hal tambahan.
Folder vendors adalah perpustakaan eksternal, yang tanpanya, mungkin, tidak satu aplikasi pun dapat melakukannya. Folder vendors berisi file yang tidak tergantung pada Anda: Font Awesome, Bootstrap file dan semua itu.

File utama

Semua file parsial diimpor di sini.

 @import abstracts/variables; @import abstracts/functions; @import base/reset; @import base/typography; @import base/utilities; @import components/button; @import components/form; @import components/user-navigation; @import layout/header; @import layout/footer; …

Ya, saya akui sedikit membengkak. Tetapi arsitektur ini diciptakan untuk proyek-proyek besar - dan untuk tugas-tugas kecil ada pilihan lain.

Pertama, kami tidak memerlukan folder vendors : semua kode CSS eksternal akan berada di tag link ditempatkan di header. Juga, folder themes tidak diperlukan: kemungkinan besar, aplikasi kecil hanya akan memiliki satu tema. Akhirnya, tidak akan ada gaya untuk halaman tertentu - jadi kami menghapus folder yang sesuai. Jadi, ada empat folder yang tersisa - hebat!

Sekarang kami memiliki dua opsi:

Jika Anda mengikuti prinsip "7-1", Anda perlu menyimpan folder abstracts , components , layout , dan base .
Jika Anda lebih nyaman bekerja dengan folder besar di mana akan ada semua file parsial dan main.scss , Anda mendapatkan sesuatu seperti ini:

 sass/ _animations.scss _base.scss _buttons.scss _header.scss … _variables.scss main.scss

Terserah kamu.

Saya yakin! Bagaimana cara menerapkan semua ini? Maksud saya, browser tidak mendukung file scss , bukan?

Benar diperhatikan! Pada langkah terakhir, kami akan mengkompilasi SCSS ke dalam CSS.

Buat CSS dari SCSS

Kita membutuhkan Node.js dan NPM (atau Yarn ).

Kami akan menggunakan paket node-sass , yang memungkinkan kami untuk mengompilasi file .scss menjadi .css .

Antarmukanya cukup sederhana:

 node-sass <> <> []

Kami hanya akan menggunakan dua parameter:

-w - memantau direktori atau file. Paket node-sass akan menunggu perubahan dalam kode, dan segera setelah terdeteksi, ia akan segera mengkompilasi file yang sesuai dalam CSS, yang sangat nyaman selama pengembangan.
Parameter --output-style - seperti apa tampilan file CSS. Itu dapat mengambil nilai-nilai berikut: nested|expanded|compact|compressed . Kami akan menggunakan opsi ini ketika membangun file CSS.

Jika Anda penasaran (saya harap begitu: pengembang harus penasaran!), Dokumentasi lengkapnya ada di sini .

Sekarang kita tahu alat apa yang akan digunakan. Sisanya bahkan lebih mudah dilakukan:

Membuat proyek: mkdir my-app && cd my-app
Inisialisasi: npm init
Tambahkan node-sass : npm install node-sass --save-dev
Buat file folder, index.html dan main.scss :

 touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss

Tambahkan skrip berikut ke file package.json :

 { … "scripts": {  "watch": "node-sass sass/main.scss css/style.css -w",  "build": "node-sass sass/main.scss css/style.css --output-style compressed" }, … }

Tambahkan tautan ke file CSS yang dikompilasi ke tag kepala dari file index.html:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <b><link rel="stylesheet" href="css/style.css"></b> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html>

Itu saja! Saat Anda menulis kode, jalankan npm run watch dan buka file index.html di browser. Untuk mengurangi CSS, cukup jalankan npm run build .

Sesuatu yang lain

Reboot dengan cepat

Agar dapat berdebat dengan lebih baik, Anda dapat menambahkan ulang secara otomatis file index.html lokal.

Untuk melakukan ini, lakukan ini:

Instal paket live-server : npm install -g live-server
Catatan: Ini adalah paket global .
Tambahkan npm-run-all tergantung pada proyeknya: npm install npm-run-all --save-dev - ini memungkinkan Anda untuk menjalankan beberapa skrip pada saat bersamaan.
Tambahkan skrip berikut ke package.json :

 { … "scripts": { <b>   "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",</b>  "watch": "node-sass sass/main.scss css/style.css -w", }, … }

Sekarang, jika Anda mulai npm run start mulai npm run start , perubahan akan segera ditampilkan - tanpa gerakan yang tidak perlu pada bagian Anda.

Awalan Otomatis

Kami menyiapkan alat pengembangan - hebat! Sekarang mari kita bicara tentang alat membangun, khususnya - tentang ini: Autoprefixer .
Alat ini (atau lebih tepatnya, plugin postcss) mem-parsing CSS dan menambahkan awalan vendor ke aturan CSS menggunakan nilai dari Can I Use .

Saat membuat situs web, fitur baru dapat digunakan yang tidak didukung di semua browser. Memberikan dukungan untuk fungsi-fungsi tersebut memungkinkan awalan vendor.

Contoh tampilannya:

 -webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; -ms-animation-name: myAnimation;

Ya, menulis dengan tangan itu membosankan. Mempermudah hidup kami adalah alat untuk menambahkan awalan secara otomatis yang akan membuat kode CSS kompatibel dengan peramban tanpa upaya ekstra.

Jadi, untuk mengkompilasi CSS:

Kami mengkompilasi semua file SCSS menjadi satu file CSS.
Tambahkan awalan menggunakan Autoprefixer.
Kompres file CSS.

Tidak ada yang tersisa - jangan beralih saluran.

Tambahkan dua dependensi - postcss-cli dan autoprefixer : npm install autoprefixer postcss-cli --save-dev
Kami memodifikasi skrip build dan menambahkan baris ini ke package.json :

 { … "scripts": {  "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",  "watch": "node-sass sass/main.scss css/style.css -w", <b>   "compile": "node-sass sass/main.scss css/style.css",  "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",  "compress": "node-sass css/style.css css/style.css --output-style compressed",  "build": "npm-run-all compile prefix compress"</b> … }

Sekarang ketika Anda mulai npm run build , awalan penyedia akan ditambahkan, dan kode CSS itu sendiri akan dikompresi. Hanya sulap!

Apakah Anda ingin lebih banyak sihir? Saya mengangkat repositori - sehingga Anda dapat mengetahuinya lebih cepat?

Jika Anda tertarik pada bagaimana saya menerapkan keterampilan ini ke halaman portofolio saya, lihat repositori ini dan nikmati hasilnya . Saya harap contoh-contoh ini akan membantu untuk lebih memahami apa yang dibahas dalam artikel ini.

Dan ... itu saja untuk hari ini! Sekarang Anda dapat menulis kode CSS modular yang didukung dan dapat digunakan kembali.

Tentang penerjemah

Artikel ini diterjemahkan oleh Alconost.

Alconost melokalkan game , aplikasi , dan situs dalam 68 bahasa. Penerjemah asli bahasa, pengujian linguistik, platform cloud dengan API, pelokalan berkelanjutan, manajer proyek 24/7, segala format sumber daya string.

Kami juga membuat video iklan dan pelatihan - untuk situs yang menjual, gambar, iklan, pelatihan, permainan asah, penjelajah, trailer untuk Google Play dan App Store.

Lebih detail

Kami menulis CSS lebih baik dan lebih indah