Kode Bersih: Mengapa Esensi HTML/CSS Masih Penting

Selama 15 tahun pengalaman saya dalam pengembangan web, saya telah bekerja dengan berbagai perusahaan, dari tingkat perusahaan hingga perusahaan rintisan, dan saya telah bekerja dengan banyak, banyak rekan insinyur perangkat lunak di sepanjang jalan. Salah satu masalah paling umum dan penting yang saya temui dalam proyek saya adalah kegagalan untuk menulis kode yang bersih dan mudah dipahami .

Bahkan pengembang terbaik dari perusahaan terkemuka tidak selalu mengikuti praktik terbaik dan menulis kode yang dapat dibersihkan dan dioptimalkan.

Akibat Kode Berantakan dan Kotor

Mengutip posting blog lama tapi masih relevan yang membahas prinsip kode bersih:

Kode sumber mirip dengan hutang finansial. Misalkan Anda ingin membeli rumah untuk ditinggali. Kebanyakan orang tidak memiliki kemampuan finansial untuk membayar tunai sebuah rumah, jadi Anda mengambil hipotek sebagai gantinya. Tapi hipotek itu sendiri bukanlah hal yang bagus untuk dimiliki. Ini adalah kewajiban. Anda harus membayar bunga atas hutang Anda setiap bulan…

Begitu juga dalam pengembangan web. Kode memiliki biaya berkelanjutan. Anda harus memahaminya, Anda harus mempertahankannya, Anda harus menyesuaikannya dengan tujuan baru dari waktu ke waktu. Semakin banyak kode yang Anda miliki, semakin besar biaya berkelanjutan tersebut. Adalah kepentingan terbaik kami untuk memiliki kode sumber sesedikit mungkin sambil tetap dapat mencapai tujuan bisnis kami.

Tapi jangan terpaku pada abstrak. Artikel ini akan membahas prinsip-prinsip kode bersih yang penting, berbagai teknik yang digunakan untuk mengatur kode, dan bagaimana membuatnya lebih mudah dipelihara, dapat diskalakan, dan lebih mudah untuk di-debug.

Kode kualitas dimulai dengan gaya kode dasar, meluas ke praktik terbaik saat menulis aplikasi besar di HTML/CSS dengan banyak blok yang dapat digunakan kembali, dan kami juga akan membahas konvensi penamaan untuk menciptakan keterbacaan implisit yang lebih besar serta kerangka kerja pihak ketiga dan praktik terbaiknya.

Pada saat Anda selesai membaca ini, Anda harus memiliki pemahaman yang baik tentang dasar-dasar kode kualitas dan bagaimana membuat kode HTML dan CSS Anda lebih mudah untuk dipelihara dan diperluas.

Esensi Penataan Kode

Mari kita mulai dengan dasar-dasar kode HTML dan CSS yang baik: validitas W3C, konvensi penamaan, struktur file, dan sebagainya.

Perhatikan strukturnya sejak hari pertama.

Jika Anda akan mengembangkan aplikasi besar, maka Anda perlu menjaga struktur file. Itu bisa, atau lebih tepatnya, terlihat seperti ini:

Gunakan validator untuk memeriksa kode Anda.

Usahakan untuk selalu menggunakan validator HTML dan CSS.

Kode buruk:

 <figure> <div> <img src="demo.jpg" alt=""> <figcaption> <h2>Hello world</h2> </figcaption> </div> </figure> <picture> <source src="demo.webp" type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <header> <summary>Expand details</summary> </header> <p>All content goes here</p> </details>

 p { font: 400 inherit/1.125 serif; }

Kode yang bagus:

 <figure> <img src="demo.jpg" alt=""> <!-- figcaption should be child of element figure element, not div --> <figcaption> <h2>Hello world</h2> </figcaption> </figure> <picture> <!-- source should have srcset attribute --> <source type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <!-- summary is not allowed as child of header --> <summary>Expand details</summary> <p>All content goes here</p> </details>

 p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; }

Gunakan teks alternatif pada <img> untuk validitas prinsip kode bersih.

Atribut ini memainkan peran penting untuk SEO, mesin pencari, perayap web, pembaca layar, dll.

Kode buruk:

 <img src="demo.jpg">

Kode yang bagus:

 <img src="demo.jpg" alt="This is placeholder of the image">

Gunakan kebab-case (spinal-case).

Untuk nama, coba gunakan kebab-case ( spinal-case ) dan jangan gunakan camelCase , atau under_score . Gunakan under_score hanya saat menggunakan BEM, meskipun jika Anda menggunakan Bootstrap, lebih baik tetap konsisten dan gunakan - sebagai pembatas.

Kode buruk:

 <section class="section_featured_Listing"> <h1 class="largeTitle">H1 title</h1> </section>

Kode yang bagus:

 <section class="section-featured-listing"> <h1 class="large-title">H1 title</h1> </section>

kebab-case lebih mudah dibaca daripada camelCase dan under_score .

Gunakan nama yang bermakna yang dapat dipahami oleh siapa saja, singkat.

Nama-nama kelas akan terlihat seperti .noun-adjective .

Cobalah untuk menggunakan nama umum kelas daripada menulis nama khusus konten. Itu membuat kode lebih mudah dibaca

Kode buruk:

 <div class="team-wrapper"> <button class="large-button-green"></button> <p class="greenText-john-smith-description"></p> <div class="white-bg"></div> </div>

Kode yang bagus:

 <div class="section-team"> <button class="btn-lg btn-success"></button> <p class="text-success"></p> <div class="bg-white"></div> </div>

Jangan menulis atribut tipe untuk stylesheet dan skrip dalam HTML5.

Mereka tidak diperlukan dengan HTML5, tetapi diperlukan oleh standar W3C dalam HTML4/XHTML.

Kode buruk:

 <link type="text/css" rel="stylesheet" href="../styles.css"> <script type="text/javascript" src="..//main.js"></script>

Kode yang bagus:

 <link rel="stylesheet" href="styles.css"> <script src="app.js"></script>

Gunakan kelas tertentu bila perlu.

Pertahankan pemilih CSS lebih spesifik dan pilih elemen yang Anda butuhkan; cobalah untuk tidak menyebutkan orang tuanya jika tidak perlu. Ini akan memungkinkan kode untuk membuat lebih cepat dan menghilangkan hambatan pengelolaan di masa depan

Kode buruk:

 section aside h1 span { margin-left: 25%; }

Kode yang bagus:

 .left-offset { margin-left: 25%; }

Meskipun menerapkan kelas ke elemen yang ditargetkan dapat membuat lebih banyak kode dalam HTML, ini akan memungkinkan kode untuk dirender lebih cepat dan akan menghilangkan hambatan pengelolaan apa pun.

Tambahkan kelas ke elemen induk jika Anda ingin memberikan gaya lain ke blok yang sama.

Jika Anda perlu menggunakan blok yang sama tetapi dengan gaya yang berbeda, usahakan agar HTML tetap tidak tersentuh. Cukup tambahkan satu kelas ke elemen induk dan terapkan semua gaya baru ke anak-anak kelas itu di CSS.

Kode buruk:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”another-article”> <h1 class=”other-styling-title”>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } } .another-article { padding-bottom: 30px; border-bottom: 4px solid #ccc; } h1.other-styling-title { font-size: 20px; }

Kode yang bagus:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”other-styling”> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } &.other-styling { padding-bottom: 30px; border-bottom: 4px solid #ccc; /* you will have less classes */ h1 { font-size: 20px; } } }

Jatuhkan unit dari nilai nol.

Menambahkan unit tidak diperlukan dan tidak memberikan nilai tambah. Tidak ada perbedaan antara 0px, 0em, 0%, atau nilai nol lainnya. Satuannya tidak penting karena nilainya masih nol.

Kode buruk:

 div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }

Kode yang bagus:

 div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; }

Jangan menulis border-bottom di CSS jika Anda dapat menambahkan tag hr .

Gunakan tag hr alih-alih menulis pemilih baru dan menambahkan gaya batas di CSS. Itu membuat kode lebih berbasis markup, dan itulah tujuan kami.

Kode buruk:

 <p class="border-bottom">I want this section to have a border.</p> <p>Lorem ipsum</p>

 .border-bottom { border-bottom: 1px solid #000; }

Kode yang bagus:

 <p>I want this section to have a border.</p> <hr> <p>Lorem ipsum</p> // If necessary change hr variable in bootstrap

Gunakan pemilih A > B.

Sangat membantu untuk menggunakan pemilih A > B , yang menerapkan aturan hanya untuk mengarahkan anak(ren), dalam hal ini Anda tidak perlu mengatur ulang gaya semua anak lain yang tidak memerlukan gaya itu. Misalnya, ini sangat berguna saat mengkodekan menu bersarang. Anda tidak perlu mendefinisikan ulang gaya submenu.

Kode buruk:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul li { list-style-type: none; } li ul li { /* redefine to default value */ list-style-type: disc; }

Kode yang bagus:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul > li { list-style-type: none; }

Cara Menulis HTML Bersih

Pindah ke HTML, prioritasnya adalah memastikan front-end yang kuat dan mudah dirawat.

Cobalah untuk memiliki front-end yang berbasis markup mungkin.

Jadikan kode front-end Anda berbasis markup alih-alih menulis terlalu banyak CSS.

Ini akan membantu mesin pencari dan membuat kode Anda lebih mudah dibaca, berpotensi meningkatkan peringkat pencarian dan pengalaman pengguna.

Kode buruk:

 <div class="main-content"> <p class="content-title">Main text title</p> <img src="http://via.placeholder.com/150x150" alt="example"> <p class="image-description">Here is image description</p> </div>

Kode yang bagus:

 <main> <h1>Main text title</h1> <figure> <img src="http://via.placeholder.com/150x150" alt="example"> <figcaption> Here is image description </figcaption> </figure> </main>

Hindari menggunakan pembungkus yang tidak perlu dalam HTML.

Cobalah untuk tidak menggunakan elemen pembungkus yang tidak perlu dalam HTML. Memiliki banyak sekali elemen <div> dan <span> sudah ketinggalan zaman. Menjaga hal-hal granular dan linier memungkinkan Anda untuk mencapai kode minimal (lihat poin berikutnya).

Kode buruk:

 <section class=”container”> <div class=”row”> <div class=”col-xs-12”> <div class=”inner-wrapper”> <span>Unnecessary br tags</span> </div> </div> </div> </section>

Kode yang bagus:

 <section class=”container”> <p>Unnecessary br tags</p> </section>

Gunakan kelas atom untuk penataan.

Jangan gunakan warna atau ukuran font khusus apa pun (jika warna atau ukuran font tidak ada dalam kerangka kerja, cukup tambahkan kelas atom Anda). Kelas atom adalah unit gaya yang sederhana dan memiliki tujuan tunggal. Sama seperti gaya sebaris, gaya Atom hanya menerapkan satu deklarasi gaya.

Kode buruk:

 <h1>Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 h1 { color: red; } section > h1 { color: blue; }

Kode yang bagus:

 <h1 class="text-red">Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1 class="text-blue"> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 .text-red { color: red; } .text-blue { color: blue; }

Cobalah untuk mempertahankan kelas granular dan atomik, dan gunakan saat dibutuhkan. Hasilnya, front-end Anda akan menjadi lebih berbasis markup.

Memanfaatkan elemen semantik.

Menggunakan semantik memberikan struktur yang lebih baik dan membuat kode dan konten lebih mudah dibaca.

Kode buruk:

 <span class="heading"><strong>Welcome</strong></span> <span>This is unnecessary br tag.</span>

Kode yang bagus:

 <h1>Welcome</h1> <p>This is unnecessary br tag.</p>

Gunakan tag HTML5.

Tag baru memberi Anda lebih banyak kebebasan berekspresi dan untuk menstandardisasi elemen umum, yang meningkatkan pemrosesan dokumen secara otomatis. Berikut adalah daftar solid dari semua elemen. Saya telah menemukan bahwa banyak pengembang selalu menggunakan banyak <div> dan <span> , tetapi pertama-tama periksa di sini tag mana yang cocok secara logis dalam konteks Anda:

Kode buruk:

 <div class="article-blue"> <div class="article-title-red">HTML 4 title</div> <div class="content"> Semantics <span class="boldtext">are</span> important. </div> </div>

Kode yang bagus:

 <article> <h1>HTML5 title</h1> <p> Semantics <strong>are</strong> important. </p> </article>

Intinya: Pelajari dan gunakan elemen baru di HTML5. Ini sepadan dengan usaha!

CSS: Kode Bersih dan Praprosesor

Ketika berbicara tentang CSS, sulit untuk tidak memulai dengan beberapa saran yang tidak orisinal, namun lancang:

Gunakan praprosesor CSS.

Sass adalah bahasa ekstensi CSS kelas profesional yang paling matang, stabil, dan kuat di dunia.

Ada dua sintaks yang tersedia untuk Sass. Yang pertama, dikenal sebagai SCSS (Sassy CSS) dan digunakan di seluruh referensi ini, adalah perpanjangan dari sintaks CSS. Sintaks kedua dan yang lebih lama, yang dikenal sebagai sintaks indentasi (atau terkadang hanya "Sass"), menyediakan cara penulisan CSS yang lebih ringkas.

Kelompokkan pemilih Anda: Gunakan @extend di SASS.

Dengan mengelompokkan pemilih Anda, atau menggunakan @extend di SASS, Anda harus membantu menjaga kode Anda KERING (Jangan ulangi sendiri).

Kode buruk:

 p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Kode yang bagus:

 .font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }

Gunakan unit rem alih-alih piksel dalam CSS.

Gunakan REM untuk ukuran dan spasi, misalnya ukuran font yang dibuat berdasarkan ukuran font-size elemen <html> root. Mereka juga memungkinkan Anda untuk dengan cepat menskalakan seluruh proyek dengan mengubah ukuran font root (misalnya pada kueri media/ukuran layar tertentu).

Anda akan menulis lebih sedikit kode untuk tampilan responsif:

Kode buruk:

 p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }

Kode yang bagus:

 html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }

Cobalah untuk menghindari tinggi atau lebar tetap dalam CSS.

Cobalah untuk menghindari tinggi atau lebar tetap dalam CSS. Ketinggian dapat dihasilkan dengan memiliki konten dalam + bantalan dan lebar dapat ditentukan oleh sistem kisi (gunakan kisi bersarang jika perlu).

Kode buruk:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { height: 130px; }

Kode yang bagus:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { padding-top: 23px; padding-bottom: 47px; }

Pastikan untuk menggunakan item induk sekali saja di SCSS.

Saat Anda menggunakan praprosesor CSS, dan berencana untuk menulis gaya untuk bagian mana pun, pastikan untuk menggunakan item induk dalam CSS sekali saja, dan sertakan semua elemen anak dan kueri media di dalam tanda kurung. Ini akan memungkinkan Anda menemukan dan memodifikasi elemen induk utama dengan mudah di satu tempat saat membuat perubahan di masa mendatang.

Kode buruk:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }

Kode yang bagus:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }

Pikirkan tentang elemen mana yang akan terpengaruh sebelum menulis aturan CSS.

Selalu pikirkan elemen mana yang akan terpengaruh sebelum menulis aturan CSS apa pun. Jika perubahan Anda tidak akan umum, maka tulis aturan Anda dengan cara yang hanya memengaruhi elemen tertentu dan tidak ada yang lain.

Kode buruk:

 /* Commonly used class */ .title { color: #008000; }

Kode yang bagus:

 /* Specify it not to affect other titles */ .section-blog .title { color: #008000; }

Coba cari aturan dan variabel CSS yang ada sebelum menulis yang baru.

Selalu cari aturan yang ada yang sesuai dengan gaya yang diinginkan, baik di CSS khusus maupun di kerangka kerja. Hanya jika tidak ada yang memadai, lanjutkan menulis yang baru.

Ini sangat penting ketika bekerja dengan aplikasi besar.

Kode buruk:

 .jumbotron { margin-bottom: 20px; }

Kode yang bagus:

 // change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }

Gunakan aturan khusus.

Jika latar belakang memiliki satu properti, kami menentukan properti itu, tetapi jika memiliki properti latar belakang yang berbeda, kami dapat memberikan satu deklarasi.

Kode buruk:

 .selector { background: #fff; }

Kode yang bagus:

 .selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }

Gunakan properti dan nilai singkatan.

Lakukan yang terbaik untuk menggunakan lebih banyak properti dan nilai singkatan. Dengan menggunakan properti steno, Anda dapat menulis dengan ringkas dan, lebih sering daripada tidak, lebih banyak lembar gaya yang dapat dibaca, menghemat waktu dan energi yang berharga.

Kode buruk:

 img { margin-top: 5px; margin-right: 10px; margin-bottom: 25px; margin-left: 10px; } button { padding: 0 0 0 20px; }

Kode yang bagus:

 img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don't play with shorthand too much */ padding-left: 20px; }

Gunakan em sebagai ganti px untuk tinggi garis.

Menggunakan unit em dan px memberi kami fleksibilitas dalam desain kami dan kemampuan untuk menskalakan elemen ke atas dan ke bawah alih-alih terjebak dengan ukuran tetap. Kami dapat menggunakan fleksibilitas ini untuk membuat desain kami lebih mudah untuk disesuaikan selama pengembangan dan lebih responsif serta memungkinkan pengguna browser untuk mengontrol skala keseluruhan situs untuk keterbacaan maksimum.

Kode buruk:

 p { font-size: 12px; line-height: 24px; }

Kode yang bagus:

 p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }

Gunakan kelas Bootstrap sebanyak mungkin.

Meskipun aturan ini dapat diterapkan pada kerangka kerja UI secara umum, saya menggunakan Bootstrap sebagai contoh, karena ini adalah pustaka komponen front-end paling populer di dunia.

Bootstrap memungkinkan Anda untuk menggunakan banyak kelas siap pakai, membuat pekerjaan Anda lebih mudah. Cobalah untuk menggunakan kelas Bootstrap sebanyak mungkin, untuk membuat lebih banyak markup berbasis HTML.

Kode buruk:

 <section class="without-bootstrap"> <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

 .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...

Kode yang bagus:

 <section class="row"> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

Sesuaikan kerangka kerja Anda dengan benar.

Bootstrap bergantung pada file variabel.scss, yang memungkinkan Anda untuk dengan mudah mengonfigurasi dan menyesuaikan front-end Anda tanpa menulis satu baris kode pun. Jika tidak, jika Anda akan menulis sendiri semua penyesuaian secara manual, Anda sebaiknya tidak menggunakan kerangka kerja sama sekali.

Beberapa pengembang menghindari mengubah variabel.scss, berpikir bahwa mereka masih dapat meningkatkan Bootstrap ke versi baru tanpa banyak kesulitan, tetapi ini bisa menjadi tugas yang membosankan. Bahkan pembaruan kecil pun mengharuskan pengembang untuk membaca log perubahan, menelusuri semua markup dan CSS, dan bermigrasi ke versi baru secara manual.

Kode buruk:

 navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }

Kode yang bagus:

 $navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default;

Jangan timpa lebar .container .

Cobalah untuk tidak menimpa lebar .container . Coba gunakan sistem kisi sebagai gantinya, atau cukup ubah lebar wadah di _variables.scss . Jika Anda perlu mengurangi lebarnya, gunakan saja max-width, bukan lebar. Dalam hal ini, .container dari Bootstrap akan tetap tidak tersentuh dalam tampilan responsif.

Kode buruk:

 .container { @media (min-width: $screen-lg-min) { width: 1300px; } }

Kode yang bagus:

 // change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }

Gunakan kelas Bootstrap 4 dan tulis lebih sedikit CSS.

Mulai gunakan Bootstrap 4, meskipun dalam versi beta. Ini mencakup banyak kelas baru yang akan membantu Anda membuat tata letak lebih cepat, terutama Flexbox dan spacer.

Kode buruk:

 <div class="flex-ex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div class="flex-ex flex-reverse"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

 .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }

Kode yang bagus:

 <ul class="list-unstyled list-inline d-flex flex-row"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul> <ul class="list-unstyled list-inline d-flex flex-row-reverse"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul>

Sekarang kita dapat menetapkan kelas ke elemen untuk menghapus semua batas atau beberapa batas.

Kode buruk:

 <div class="border-example2 py-5"> <span class="border0"></span> <span class="border-top0"></span> <span class="border-right0"></span> <span class="border-bottom0"></span> <span class="border-left0"></span> </div>

 border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }

Kode yang bagus:

 <div class="border-example py-5"> <span class="d-inline-block m-2 border-0"></span> <span class="d-inline-block m-2 border-top-0"></span> <span class="d-inline-block m-2 border-right-0"></span> <span class="d-inline-block m-2 border-bottom-0"></span> <span class="d-inline-block m-2 border-left-0"></span> </div>

 .border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } }

Gunakan .col-sm-X jika .col-md-X dan .col-lg-X memiliki nilai yang sama untuk X.

Jangan menulis .col-md-X dan .col-lg-X jika .col-sm-X memiliki nilai yang sama untuk X. Misalnya, tidak perlu menulis .col-lg-10 karena ketika kita menulis .col-md-10 , kami secara otomatis menyertakan .col-lg-10 di dalamnya.

Kode buruk:

 <ul class="press-list list-inline row"> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

Kode yang bagus:

 <ul class="press-list list-inline row"> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

Jangan gunakan .col-xs-12 .

Jangan gunakan .col-xs-12 karena jika tidak ada .col-xs-X yang ditetapkan, maka secara default akan menjadi .col-xs-12 .

Kode buruk:

 <section> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-6 col-xs-12"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

Kode yang bagus:

 <section class="text-center"> <div class="container"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <div class="row"> <div class="col-md-6"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

Jangan gunakan reset.css ; gunakan normalize.css sebagai gantinya.

Jika Anda menggunakan Bootstrap, maka normalize.css sudah disertakan di sana, tidak perlu memasukkannya dua kali.

Ikuti panduan, meskipun itu bukan praktik terbaik.

Demi konsistensi, lebih baik untuk selalu mengikuti aturan dan pedoman yang Anda mulai (apakah itu tentang penamaan, gaya kode, atau struktur file)

Membungkus

Saya harap Anda dapat mengambil sesuatu yang bermanfaat dan Anda akan berpikir lebih banyak tentang menulis kode HTML dan CSS minimal dengan praktik terbaik.

Untuk perusahaan besar, cukup sulit untuk memelihara aplikasi besar ketika ada kode yang berantakan. Dan tentu saja, perusahaan besar memiliki uang untuk membayar kualitas yang baik. Jika Anda mengikuti prinsip pengkodean yang bersih, Anda akan meningkatkan peluang Anda untuk mendapatkan pekerjaan yang baik. Ini juga layak untuk mengangkat aspek freelance: Profesional menyulap beberapa proyek dan klien harus memberikan kode bersih yang dapat diteruskan ke pengembang lain dalam waktu singkat.

Saya berharap untuk memperluas topik yang lebih maju di posting mendatang, karena saya bermaksud berbicara tentang mengotomatisasi proses pengkodean, menggunakan tugas Gulp/Grunt, Linters, plugin Editor, alat yang menghasilkan kode, alat AI yang menulis kode alih-alih Anda, dan lainnya topik-topik terkait.

Saya harap ini menjadi bacaan yang menarik dan informatif. Semoga sukses dalam upaya pengkodean Anda.

Bacaan Lebih Lanjut di Blog Teknik Toptal:

• Cara Mendekati Animasi SVG di CSS