Metode dan alat untuk mengembangkan gaya halaman web

Jangan bertele-tele, hadapi saja: proses penulisan kode CSS yang baik bisa sangat, sangat sulit. Banyak pengembang tidak ingin mengacaukan gaya. Mereka siap melakukan apa saja, tetapi bukan CSS.



Penulis materi, yang terjemahannya kami berikan kepada Anda hari ini, mengatakan bahwa ia sendiri tidak menyukai bagian pengembangan web yang terkait dengan CSS. Tapi tidak ada jalan keluarnya. Saat ini, perhatian besar diberikan pada desain, dan apa yang disebut "pengalaman pengguna", tetapi Anda tidak dapat melakukannya tanpa CSS. Tujuan dari materi ini adalah untuk membantu semua orang meningkatkan keterampilan mereka dalam mengembangkan dan menerapkan gaya halaman web.

Masalah CSS

Di awal proyek baru, gaya biasanya terlihat sederhana dan jelas. Katakanlah ada sangat sedikit penyeleksi CSS, seperti .title , input , #app , yang tidak akan sulit untuk dikerjakan.

Namun, seiring dengan pertumbuhan aplikasi, gaya berubah menjadi mimpi buruk. Pengembang mulai bingung tentang penyeleksi CSS. Dia menemukan bahwa dia menulis sesuatu seperti div#app .list li.item a . Namun, pekerjaan tidak dapat dihentikan, sehingga programmer terus menggunakan konstruksi yang sama, kode CSS didorong di suatu tempat di akhir file. Dan sungguh - siapa yang tertarik dengan gaya? Dan CSS itu sendiri tidak masuk akal ... Hasilnya adalah 500 baris CSS yang benar-benar tidak didukung dan mengerikan.

Saya ingin Anda membaca artikel ini dan melihat proyek-proyek Anda sebelumnya dan berpikir: "Yah, wow, bagaimana saya bisa menulis ini?"

Mungkin Anda berpikir sekarang bahwa "menulis CSS" berarti menggunakan kerangka kerja CSS. Bagaimanapun, mereka dimaksudkan untuk memfasilitasi pekerjaan dengan gaya, dan dengan penggunaannya mereka menulis kode CSS yang baik. Semua ini benar, tetapi kerangka kerja CSS memiliki kelemahan tertentu:

• Seringkali penggunaannya mengarah pada penampilan desain yang membosankan, monoton, dangkal.
• Sulit untuk menyesuaikan gaya kerangka kerja, dan kebutuhan untuk melakukan sesuatu yang melampaui kerangka kerja dapat menyebabkan kesulitan.
• Kerangka kerja, sebelum menggunakannya, harus dipelajari.

Dan, pada akhirnya, Anda tidak membaca ini untuk membiasakan diri dengan kerangka kerja tertentu? Jadi mari kita selesaikan CSS. Saya ingin segera mencatat bahwa materi ini bukan tentang cara membuat desain yang indah untuk aplikasi. Ini tentang bagaimana menulis CSS berkualitas yang mudah dipelihara, dan bagaimana mengaturnya dengan benar.

SCSS

Dalam contoh saya, saya akan menggunakan SCSS . Ini adalah preprosesor CSS. Faktanya, SCSS adalah superset dari CSS. Ini memiliki beberapa fitur yang sangat menarik, seperti variabel, konstruksi bersarang, impor file, mixin. Kami akan membahas fitur SCSS yang akan kami gunakan.

AriVariabel

Di SCSS, Anda bisa menggunakan variabel. Keuntungan utama menggunakan variabel adalah kemungkinan penggunaannya kembali. Bayangkan kita memiliki seperangkat warna untuk aplikasi tersebut. Warna utama adalah biru. Akibatnya, warna ini diterapkan secara harfiah di mana-mana. Ini digunakan di properti background-color tombol, di properti color judul halaman, dan di banyak tempat lain.

Dan kemudian, tiba-tiba, Anda memutuskan untuk mengubah biru menjadi hijau. Jika Anda melakukan penggantian seperti itu tanpa menggunakan variabel, Anda harus mengedit semua kode, semua baris tempat warna lama digunakan. Jika Anda menggunakan variabel, maka Anda hanya perlu mengubah nilainya. Di sini terlihat seperti apa penggunaan variabel:

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

▍ Konstruksi bersarang

SCSS mendukung konstruksi bersarang. Ini CSS biasa:

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

Berkat dukungan konstruksi bersarang, dapat diubah sebagai berikut:

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

Opsi ini lebih mudah dibaca, bukan? Selain itu, melalui penggunaan konstruksi bersarang, waktu untuk membuat penyeleksi kompleks berkurang.

▍Fragmentasi dan impor

Ketika datang ke mendukung gaya dan keterbacaan mereka, menjadi jelas bahwa tidak mungkin untuk menyimpan semua kode dalam satu file. Satu file gaya dapat digunakan untuk tujuan percobaan, atau ketika mengembangkan aplikasi kecil, tetapi jika Anda pergi ke tingkat profesional ... lebih baik untuk tidak mencoba. Untungnya bagi kami, SCSS memiliki mekanisme untuk mengatur kode gaya dengan nyaman.

File yang berisi fragmen deskripsi gaya dapat dibuat dengan menambahkan garis bawah pada awal nama mereka: _animations.scss , _base.scss , _variables.scss , dan sebagainya.

Arahan @import digunakan untuk mengimpor file-file ini. Berikut cara menggunakan mekanisme ini:

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

Anda mungkin menemukan bahwa ada kesalahan dalam kode ini. Memang, file yang ingin kita impor disebut _animations.scss , dan kita, dalam file header.scss , gunakan perintah @import "animations" impor @import "animations" . Namun, tidak ada kesalahan. SCSS adalah sistem yang cukup pintar untuk memahami bahwa dalam situasi seperti itu, pengembang berarti file yang sesuai.

Ini semua yang perlu kita ketahui tentang variabel, konstruksi bersarang, fragmentasi gaya, dan impor. Ada kemungkinan lain dalam SCSS, seperti mixin, inheritance, dan arahan lainnya (di antaranya adalah @for , @if dan beberapa lainnya), tetapi kami tidak akan membicarakannya di sini.

Jika Anda ingin mengenal SCSS lebih baik, lihat dokumentasi yang relevan.

Organisasi CSS: Metodologi BEM

Saya tidak ingat berapa kali saya menggunakan istilah universal untuk memberi nama kelas CSS. Sebagai hasilnya, saya mendapatkan nama-nama seperti itu, saya pikir, akrab bagi semua orang:. .button .page-1 .page-2 , .custom-input .

Seringkali kita tidak tahu cara memberi nama entitas tertentu. Tetapi ini sangat penting. Bagaimana jika Anda sedang mengembangkan aplikasi, dan kemudian, karena suatu alasan, menunda pekerjaan selama beberapa bulan? Atau, dan ini jauh lebih buruk, bagaimana jika orang lain mengambil proyek ini? Jika kode CSS menggunakan nama yang tidak pantas, akan sulit untuk dipahami tanpa menganalisis bagian lain dari aplikasi.

Metodologi BEM (Blok, Elemen, Pengubah) adalah pendekatan komponen untuk pengembangan web. Secara khusus, ini adalah konvensi penamaan entitas. Metodologi ini memungkinkan Anda untuk menyusun kode, membantu memecahnya menjadi modul, dan membantu dalam penggunaannya kembali. Mari kita bicara tentang blok, elemen, dan pengubah.

▍ Blok

Blok dapat dianggap sebagai komponen. Tentunya Anda bermain sebagai anak di Lego. Karena itu, nyalakan mesin waktu.

Bagaimana Anda membangun, katakanlah, rumah biasa? Di sini Anda akan memerlukan jendela, atap, pintu, dinding, dan, secara umum, ini sudah cukup. Semua ini adalah blok kami. Mereka signifikan dalam diri mereka sendiri.

Penamaan: nama .block - .block

Contoh: .card , .form , .post , .form .user-navigation

▍ Elemen

Bagaimana cara membuat jendela Lego? Mungkin, beberapa kubus terlihat seperti bingkai, jadi jika Anda menghubungkan empat kubus ini, Anda mendapatkan jendela yang indah. Inilah elemen-elemennya. Mereka adalah bagian dari blok, kita membutuhkannya untuk membuat blok. Namun, elemen di luar blok tidak berguna.

Penamaan: + __ + - .block__element

Contoh: .post__author , .post__date , .post__text

▍ Pengubah

Setelah Anda memiliki jendela, Anda mungkin ingin mengubahnya. Misalnya - cat dengan warna berbeda. Perubahan seperti pada blok dasar atau elemen dilakukan dengan menggunakan pengubah. Ini adalah bendera blok atau elemen, dan mereka digunakan untuk mengubah perilaku, penampilan, dan sebagainya.

Penamaan: + -- + - .block__element--modifier , .block--modifier
Contoh: .post--important , .post__btn--disabled

▍ Catatan

• Saat menggunakan BEM, nama diberikan secara eksklusif ke kelas. Tidak ada ID atau tag - hanya kelas.
• Blok atau elemen dapat bersarang di blok atau elemen lain, tetapi harus sepenuhnya independen. Ini sangat penting. Karena itu, misalnya, Anda tidak perlu menetapkan bidang ke tombol karena Anda ingin meletakkannya di bawah tajuk, jika tidak tombol akan dikaitkan dengan tajuk. Gunakan kelas pembantu sebagai gantinya.
• Saat menerapkan metodologi BEM, file HTML akan dipenuhi dengan nama, tapi ini sedikit biaya untuk fitur yang diberikan BEM kepada kita.

▍Latihan

Ini latihan. Perhatikan dengan cermat situs-situs yang Anda sukai, atau situs-situs yang paling sering Anda gunakan, dan pikirkan tentang apa yang bisa menjadi penghalang pada mereka, apa itu elemen, dan apa itu pengubah.

Misalnya, inilah yang saya dapat dari menganalisis Google Store.


Analisis situs

Sekarang giliranmu. Lihatlah situsnya, pikirkan tentang bagaimana itu dapat ditingkatkan. Untuk berkembang dalam bidang tertentu, seseorang perlu mencari informasi, bereksperimen, dan menciptakan sesuatu yang baru secara mandiri.

▍ Contohnya

Berikut adalah contoh yang disiapkan oleh Codepen yang menunjukkan kemampuan BEM. Di sini kita membuat sedikit sesuatu seperti menerbitkan di blog tertentu. Berikut ini HTML untuk contoh ini.

 <div class="post"> <span class="post__author">Thomas</span>     <span class="post__date">3 minutes ago</span> <p class="post__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sit voluptatem aut quis quisquam veniam delectus sequi maxime ullam, inventore blanditiis quia commodi maiores fuga, facere quaerat doloremque in. Nisi!</p> </div> <div class="post mt-large post--important"> <span class="post__author">Thomas</span>     <span class="post__date">2 hours ago</span> <p class="post__text">Voluptatem incidunt autem consequatur neque vitae aliquam, adipisci voluptatum. Ipsum excepturi dolores exercitationem rem ab similique consequatur nesciunt, tempora aut vel unde.</p> </div> 

Berikut adalah gaya SCSS:

 .post { display: inline-block; padding: 1rem; background-color: #ccc; border: 1px solid #222; border-radius: 5px; &--important {   background-color: yellow; } &__author {   font-size: 1.2rem;   font-weight: bold;   color: blue; } &__date {   float: right; } &__text {   line-height: 2rem;   font-size: 1.3rem; } } .mt-large { margin-top: 3rem; } 

Tetapi apa yang terjadi pada akhirnya.


Membuat "publikasi" menggunakan BEM

Pertimbangkan contoh lain. Di sini, menggunakan BEM, kami melihat tombol-tombolnya. Berikut ini HTML untuk contoh ini.

 <div> <button class="btn">   Click me </button> <button class="btn btn--danger">   Danger </button> <button class="btn btn--success">   Success </button> <button class="btn btn--small">   Small </button> <button class="btn btn--big">   Big </button> <button class="btn btn--border">   Border </button> </div> 

Berikut adalah gaya SCSS.

 .colors { font-size: 1.5rem; font-family: sans-serif; } .btn {   background-color: #FF6B93;   color: #fff;   text-transform: uppercase;   padding: 1.5rem 2.5rem;   border-radius: 4px;   transition: all .2s;   font-size: 1.3rem;   border: none;   letter-spacing: 2px;   cursor: pointer; &:hover {   background-color: #D15879; } &:focus {   outline: none; } &--danger {   background-color: #FF3B1A;     &:hover {     background-color: #D43116;   } } &--success {   background-color: #00D123;     &:hover {     background-color: #00AB1D;   } } &--small {   padding: 1rem 2rem;   font-size: 1rem; } &--big {   padding: 1.8rem 4.5rem;   font-size: 1.7rem; } &--border {   background-color: #fff;   color: #FF6B93;   border: 1px solid #FF6B93;     &:hover {     background-color: #FF6B93;     color: #fff;   } } } 

Dan inilah hasilnya.


Desain Tombol Menggunakan Metodologi BEM

Mengatur File CSS: Template 7-1

Mari kita bicara tentang mengatur file CSS. Apa yang Anda pelajari dari bagian percakapan ini akan memungkinkan Anda bekerja lebih produktif dan membantu, dalam situasi yang tepat, langsung menemukan kode CSS yang perlu diubah. Untuk mencapai semua ini, kita perlu mempelajari templat "7-1".

Mungkin sekarang Anda akan merasa bahwa templat ini entah bagaimana terlalu aneh disebut. Namun, tidak ada yang aneh di sini, dan menggunakannya sangat sederhana. Untuk melakukan ini, cukup mengamati dua aturan sederhana:

1. Semua file dengan fragmen SCSS harus ditempatkan di 7 folder berbeda.
2. Semua file ini harus diimpor ke dalam satu file, main.scss , yang terletak di direktori root di mana semua folder ini berada.

Nama templat, sebagai hasilnya, dapat didekripsi sebagai "7 folder - 1 file". Seperti yang Anda lihat, itu tidak terlalu sulit. Mari kita bicarakan templat ini secara lebih rinci.

▍ 7 folder

Berikut adalah folder yang dimaksud:

1. base : di folder ini Anda harus meletakkan semua kode, jadi "kode" template. Dengan "templat" kode di sini kami maksudkan semua kode CSS yang harus Anda tulis saat membuat proyek baru. Sebagai contoh: aturan tipografi, animasi, utilitas (yaitu, kelas seperti margin-right-large , text-center ), dan sebagainya.
2. components : nama folder ini dengan jelas menunjukkan apa yang akan disimpan di dalamnya. Kita berbicara tentang gaya komponen yang digunakan untuk membangun halaman. Ini adalah tombol, formulir, semua jenis bilah geser, jendela sembul, dan sebagainya.
3. layout : folder ini digunakan untuk menyimpan gaya elemen tata letak halaman. Ini adalah tajuk dan footer halaman, area navigasi, berbagai bagian halaman, kisi, dan sebagainya.
4. pages : kadang-kadang proyek membutuhkan halaman yang memiliki gaya spesifik mereka sendiri, yang berbeda dari gaya halaman lain. Deskripsi gaya untuk halaman khusus seperti ini ada di dalam folder ini.
5. themes : jika proyek web melibatkan penggunaan tema yang berbeda (katakanlah, sesuatu seperti "mode gelap", atau "admin"), gaya untuk mereka harus diletakkan di sini.
6. abstracts : segala macam hal tambahan masuk ke folder ini - fungsi, variabel, mixin.
7. vendors : situs langka tanpa dependensi eksternal. Folder ini berisi gaya yang tidak dibuat oleh mereka yang mengembangkan situs tertentu. Di sini, misalnya, Anda dapat menyimpan file proyek Font Awesome, gaya Bootstrap, dan sejenisnya.

▍File main.scss

Dalam file ini semua fragmen gaya yang diatur dalam tujuh folder di atas diimpor. Beberapa file ini mungkin terlihat seperti ini:

 @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; 

Saya tidak setuju dengan kenyataan bahwa seluruh desain tujuh folder ini terlihat cukup besar. Namun, perlu dicatat bahwa arsitektur ini dirancang untuk proyek-proyek besar. Untuk proyek kecil, Anda dapat menggunakan versi templat templat "7-1". Fitur dari versi ini adalah dapat dilakukan tanpa beberapa folder. Jadi, di sini Anda dapat menolak folder vendors dengan menempatkan tautan ke stylesheet di luar proyek di tag link . Selanjutnya, Anda dapat melakukannya tanpa folder themes , karena, mungkin, tema tidak akan digunakan dalam aplikasi web kecil. Dan akhirnya, Anda dapat menyingkirkan folder pages , karena dalam proyek ini, kemungkinan besar, tidak akan ada halaman yang gayanya sangat berbeda dari gaya umum. Akibatnya, dari tujuh folder, hanya empat yang tersisa.

Selanjutnya, melakukan proyek kecil, Anda dapat masuk dalam salah satu dari dua cara:

• Jika Anda lebih suka menggunakan apa yang tersisa dari template "7-1", maka Anda menyimpan abstracts folder, components , layout dan base .
• Jika Anda memutuskan untuk bertahan dengan satu folder besar, maka semua file dengan fragmen gaya, bersama dengan file main.scss , termasuk dalam folder ini. Mungkin terlihat seperti ini:

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

Apa yang tepat untuk dipilih tergantung pada preferensi Anda.

Di sini, jika Anda terinspirasi oleh gagasan untuk menggunakan SCSS, Anda mungkin memiliki pertanyaan tentang cara menggunakan gaya seperti itu, karena browser tidak mendukungnya. Sebenarnya, ini adalah pertanyaan yang bagus yang mengarahkan kita ke tahap akhir percakapan kita, untuk menyusun SCSS ke dalam CSS.

Mengkompilasi SCSS ke CSS

Untuk mengonversi kode SCSS ke CSS, Anda memerlukan platform Node.js dan manajer paket NPM (atau Yarn ).

Kami akan menggunakan paket node-sass , yang memungkinkan kita untuk mengompilasi file .scss menjadi file .css . Ini adalah alat baris perintah, mudah digunakan. Yaitu, node-sass terlihat seperti ini:

 node-sass <input> <output> [options] 

Banyak opsi tersedia di sini. Kami akan fokus pada dua:

• Opsi -w memungkinkan Anda untuk memonitor folder atau file. Yaitu, node-sass akan melacak perubahan dalam kode, dan ketika itu terjadi, secara otomatis mengkompilasi file dalam CSS. Fitur ini sangat berguna selama proses pengembangan.
• Opsi --output-style menentukan gaya dari file CSS output. Beberapa opsi tersedia di sini: nested , expanded , compact , compressed . Kami akan menggunakan opsi ini untuk membangun file CSS yang sudah jadi.

Jika Anda adalah orang yang ingin tahu (saya harap ini masalahnya, karena rasa ingin tahu hanya untuk kepentingan pengembang), maka Anda mungkin akan tertarik untuk melihat dokumentasi untuk paket node-sass .

Jadi, kami memutuskan alat, sekarang yang paling sederhana tetap. Untuk mengonversi SCSS ke CSS, Anda harus mengikuti langkah-langkah ini:

Buat folder proyek dan buka:

 mkdir my-app && cd my-app 

Inisialisasi proyek:

 npm init 

Tambahkan paket node-sass ke proyek:

 npm install node-sass --save-dev 

Buat file index.html , folder gaya, file main.scss :

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

Tambahkan berikut ini 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 yang mengarah ke file CSS yang dikompilasi di tag head 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"> <link rel="stylesheet" href="css/style.css"> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html> 

Itu saja. Sekarang Anda sedang mengerjakan proyek, jalankan perintah npm run watch dan buka file index.html di browser Anda. Untuk memperkecil CSS, jalankan npm run build .

Utilitas Tambahan

▍ Reload halaman interaktif

Anda mungkin ingin mengatur ulang halaman interaktif untuk meningkatkan produktivitas. Ini lebih nyaman daripada memuat ulang index.html secara manual. Inilah cara melakukannya:

Instal paket live-server (perhatikan bahwa ia diinstal secara global):

 npm install -g live-server 

Tambahkan paket npm-run-all , tergantung pada proyeknya, yang memungkinkan Anda menjalankan beberapa skrip pada saat yang bersamaan:

 npm install npm-run-all --save-dev 

Tambahkan yang berikut 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", }, ... } 

Sekarang, setelah npm run start perintah npm run start , Anda, dalam proses mengerjakan proyek, akan langsung melihat perubahan yang dibuat untuk itu tanpa memuat ulang halaman secara manual.

▍ paket autoprefixer

Pada tahap ini, Anda memiliki lingkungan pengembangan yang disesuaikan, yang sangat bagus. Sekarang mari kita bicara tentang alat untuk membangun proyek, dan, khususnya, tentang paket autoprefixer . Ini adalah alat (kita berbicara tentang plugin postcss) yang mem-parsing kode CSS dan menambahkan awalan vendor browser ke aturan CSS menggunakan data dari Can I Use .

Selama pembuatan situs, pemrogram dapat menggunakan beberapa fitur baru yang tidak sepenuhnya didukung oleh semua browser. Awalan peramban ditujukan untuk memecahkan sejumlah masalah, termasuk pengembangan aplikasi web lintas-peramban.

Kode dengan awalan peramban terlihat seperti ini:

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

Sangat mudah untuk memperhatikan bahwa menulis kode seperti itu sangat membosankan. Untuk memfasilitasi tugas memastikan kompatibilitas kode-CSS kami dengan berbagai browser, tanpa mempersulit proyek, kami akan menggunakan paket autoprefixer . Di sini Anda perlu melakukan langkah-langkah berikut:

• Kami mengkompilasi semua file SCSS menjadi satu file CSS utama.
• Tambahkan awalan peramban ke file ini menggunakan autoprefixer .
• Kompres file CSS ini.

Ini, secara umum, adalah tahap terakhir dari pekerjaan pada proyek. Jadi, inilah yang perlu Anda lakukan untuk menggunakan autoprefixer :

Tambahkan dua dependensi ke proyek - postcss-cli dan autoprefixer :

 npm install autoprefixer postcss-cli --save-dev 

Tambahkan kode berikut ke package.json dan modifikasi skrip build :

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w",   "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" ... } 

npm run build , CSS-, . , , . — , , .

, ,

Ringkasan

, CSS, , , CSS-, , .

Pembaca yang budiman! -?