Skip to content Skip to sidebar Skip to footer

Belajar CSS Part 2: Cara Penulisan CSS

Cara penulisan css
Untuk hasil kerja yang lebih efisien pada suatu project, pertama-tama kita perlu memahami source code nya. Di sinilah kita segera menyadari pentingnya code yang tersusun rapi. Sebagai developer, kita harus mencoba menulis kode kita sebaik mungkin.

Ini juga berlaku untuk CSS. Ada beberapa hal yang perlu kita perhatikan saat menulis CSS. Dalam postingan ini, saya ingin berbagi beberapa hal yang paling penting bagi Anda. Saya akan memberikan cara penulisan CSS yang akan meningkatkan kualitas kode CSS Anda. 

Cara Penulisan CSS Yang Benar

1. DRY

DRY adalah singkatan dari "Don't Repeat Yourself" . Ini adalah prinsip pengembangan perangkat lunak umum dan dapat diterapkan dalam bahasa pemrograman apa pun, serta dalam CSS. Seperti yang bisa kita pahami dari namanya, DRY bertujuan untuk menghindari atau mengurangi pengulangan sebanyak mungkin.

Misalnya, kita dapat membuat 3 CSS untuk 3 tombol seperti ini:

 .primary-button {
  background: blue;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.form-button {
  background: green;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.cancel-button {
  background: red;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
} 

Atau kita bisa menggunakan prinsip DRY dengan menuliskan aturan umum satu kali di class tambahan dan aturan yang berbeda masing-masing di class lain:

 .button {
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.primary-button {
  background: blue;
}
.form-button {
  background: green;
}

.cancel-button {
  background: red;
} 

Seperti yang kita lihat, menerapkan prinsip DRY menghindari pengulangan, mengurangi jumlah baris, dan meningkatkan keterbacaan dan bahkan kinerja.

2. Naming

Naming CSS adalah poin penting lainnya untuk menulis CSS yang lebih baik. Nama pemilih harus deskriptif dan dapat dibaca. 

 // BAD NAMING

.p {
  // Rules
}

.myFirstForm {
  // Rules
} 

Biasanya, <p> adalah tag HTML dan singkatan dari paragraf. Di atas, kita tidak dapat benar-benar memahami apa itu kelas p . Juga, Anda harus menghindari nama seperti myFirstForm , dan saya tidak menyarankan menggunakan camel case .

Sebagai gantinya, gunakan nama deklaratif (dipisahkan dengan tanda hubung untuk beberapa nama):

 // GOOD NAMING

.article-paragraph {
  // Rules
}

.contact-form {
  // Rules
} 

Memberi nama sesuatu dalam pemrograman tidak semudah itu, tetapi ada berbagai konvensi penamaan yang dapat Anda gunakan dalam proyek Anda. BEM (block element modifier) ​​adalah salah satunya.

3. Jangan Gunakan Inline-Styles

Nah, ada argumen di web tentang ini: beberapa mengatakan kepada kita untuk tidak pernah menggunakan Inline Styles, sementara yang lain berpendapat bahwa itu bisa berguna dalam beberapa kasus.

Menurut pendapat saya, praktik terbaik sebenarnya tidak menggunakan gaya sebaris. Saya akan fokus di sini mengapa kita tidak harus melakukannya.

Pemisahan Kekhawatiran
Menurut prinsip pemisahan keprihatinan, desain (CSS), konten (HTML) dan logika (JavaScript) harus dipisahkan untuk alasan seperti keterbacaan yang lebih baik.

Menyertakan aturan CSS di dalam tag HTML melanggar aturan ini:

 <div style="font-size: 16px; color: red;">Some Text</div> 

4. Hindari tag !important

Oke, jadi CSS Anda tidak berfungsi sebagaimana mestinya, dan Anda membuatnya berfungsi dengan menerapkan tag penting: !important

Apa yang terjadi selanjutnya? Tag !important memiliki spesifisitas tertinggi dari semua pemilih CSS.

Anda pada dasarnya mengatakan kepada browser untuk menerapkan aturan khusus itu dengan tag !important selalu dan dalam keadaan apa pun. Ini tidak baik karena aturan CSS dapat berbeda dari satu pemilih ke pemilih lainnya, dari pemilih induk ke anak.

Satu-satunya cara untuk mengganti tag penting adalah dengan menggunakan tag penting lainnya . Dan ini mengarah pada penggunaan tag yang semakin penting. Percayalah, dalam waktu dekat kode proyek Anda akan penuh dengan ! tag penting , yang membuat kode CSS Anda jauh lebih sulit untuk dipelihara. Jadi cobalah untuk tidak menggunakannya.

5. Gunakan Praprosesor

Bekerja dengan Preprocessor CSS seperti Sass atau KURANG sangat berguna dalam proyek yang lebih besar. Preprocessor membawa fitur tambahan ke kode CSS kita yang biasanya tidak bisa kita lakukan.
Praprosesor memiliki sintaksnya sendiri dan kemudian diterjemahkan ke dalam CSS standar (dalam file CSS terpisah) karena browser tidak memahami sintaksnya.

Ini adalah hal paling penting yang dapat saya sarankan untuk meningkatkan keterampilan CSS Anda. Jika Anda memiliki pertanyaan, atau Anda merasa ada tips lain untuk menulis CSS yang lebih baik, jangan ragu untuk berkomentar di bawah.

Thanks for reading Belajar CSS Part 2: Cara Penulisan CSS. Please share...!

Post a Comment for "Belajar CSS Part 2: Cara Penulisan CSS"