Taufik Nurrohman

Satu Properti Satu Nilai

Tingkat pemula:

div {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 35px;
}

.post a {
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

Satu Properti Semua Nilai

Tingkat lanjut:

div {
  margin: 20px 35px 10px 5px;
}

.post a {
  font: normal bold 12px/100% Verdana, Tahoma, sans-serif;
}

!important di Mana-Mana

Arogan dan malas memperluas diri. Mereka malas menelusuri sebagian besar atau semua perintah CSS yang ada untuk mencari tahu solusi yang lebih aman dan bertanggung jawab. Mereka berpikir bahwa mereka bisa menguasai segalanya dan memecahkan masalahnya dengan cepat dengan flag yang satu ini. Mereka cenderung berpikir pada satu titik saja yaitu pada masalah yang sedang dihadapi, namun tidak pernah sampai pada tahap berpikir bahwa hal-hal lain di sekelilingnya mungkin juga mempengaruhi kesalahan tersebut (pikirannya sempit).

Skeptis, paranoid, sulit percaya dengan rekan yang lain. Mereka ragu dan takut bahwa peramban yang digunakan nantinya tidak akan bisa membedakan antara satuan 0 dengan 0px. Mereka ragu jika selektor #main-element dan #nav sudah cukup spesifik:

div#main-element.main-element[role="main"] {
  width: 601px !important;
  height: 171.5px !important;
  background-color: #FF0000 !important;
  background-image: url('img/bg-image.png') !important;
  background-repeat: repeat-y !important;
  background-position: 0px 0px !important;
  background-attachment: fixed !important;
  background-size: 100% 100% !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #F10C0C !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 30px !important;
  line-height: 0px !important;
  font-family: Arial, sans-serif !important;
  color: #000000 !important;
  margin: 0px 0px 0px 0px !important;
  padding: 30px 30px 30px 30px !important;
  -webkit-box-shadow: none !important;
  -khtml-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-border-radius: 0px 0px 0px 0px !important;
  -khtml-border-radius: 0px 0px 0px 0px !important;
  -moz-border-radius: 0px 0px 0px 0px !important;
  -ms-border-radius: 0px 0px 0px 0px !important;
  -o-border-radius: 0px 0px 0px 0px !important;
  border-radius: 0px 0px 0px 0px !important;
}

nav#nav ul li ul li ul li a {
  margin-left: 0px !important;
}

Anti !important dan Anti ID

Ciri khas orang tipe ini adalah dia tidak memiliki satupun tanda !important dan selektor #ID di dalam pekerjaannya. Mereka terlalu banyak memfokuskan diri mereka kepada tutorial-tutorial yang diberikan oleh tokoh-tokoh panutan mereka yang berkaitan dengan coding best practice, namun tidak berhasil menyadari bahwa !important dan #ID itu sebenarnya juga merupakan fitur, dan itu valid serta tidak dilarang.

Orang ini terlalu fanatik pada sebuah metode. Mereka termasuk pintar, namun bukan cerdas. Mereka mampu menguasai bidang tersebut, namun itu hanya sebatas pada apa yang ada dalam buku atau sebatas pada apa yang sudah ada. Tidak memiliki keinginan untuk berinisiatif sendiri. Mereka memilih satu dari sebagian besar saran yang sudah ada untuk kemudian mereka jadikan sebagai pola kerja mereka.

Selalu berada dalam posisi yang aman dan mungkin akan sulit keluar dari zona nyaman mereka. Mudah terbawa tren. Mereka berusaha untuk mengikuti saran-saran koding yang baik karena kebanyakan orang melakukan itu (terutama orang-orang yang mereka idolakan).

“WOW… Flat Design!!!”
“WOW… Parallax Scrolling!!!”
“WOW… Isotope!!!”
“WOW… Proxima Nova!!!”

Ingin dianggap profesional. Bisnisnya laris manis karena mereka mengikuti tren, namun tidak akan pernah bisa menjadi inspirator para pengembang yang lain karena tidak pernah punya ide original:

/* No ID selector, no `!important` no presentational class name!!! */

.module {
  font-family: sans-serif;
  color: #333;
}

.sidebar {
  float: left;
  margin-left: 20px;
}

.footer {
  background-image: -webkit-linear-gradient(#000, #111);
  background-image:    -moz-linear-gradient(#000, #111);
  background-image:     -ms-linear-gradient(#000, #111);
  background-image:      -o-linear-gradient(#000, #111);
  background-image:         linear-gradient(#000, #111);
  -webkit-border-radius: 0 0 5px 5px;
     -moz-border-radius: 0 0 5px 5px;
          border-radius: 0 0 5px 5px;
}

Moderat: Tidak Terlalu Terikat pada Praktek yang Disarankan

Terkadang ada tanda !important terkadang juga tidak. Dan semua perintahnya konsisten diterapkan pada tempat dan urutan yang senada. Tidak takut menggunakan selektor yang tidak disarankan.

Orang ini sudah mengerti betul dengan apa yang dilakukannya dan orang ini tahu akan konsekuensinya. Memberikan tanda !important pada kelas kustom dalam kasus di bawah berfungsi untuk memastikan agar warna dan dekorasi teks pada elemen tersebut tidak akan menuruni warna dan dekorasi teks pada deklarasi global di atasnya tanpa harus menuliskan selektor pseudo tambahan seperti pada kasus Paranoid !important:

/* Global Links */

a {
  color: #023a61;
  text-decoration: none;
}

a:hover {
  color: #ffa500;
  text-decoration: underline;
}

/* Custom Buttons */

.btn,
a.btn {
  display: inline-block;
  vertical-align: middle;
  color: white !important;
  text-decoration: none !important;
  background-color: #00f;
  padding: 1em 1.4em;
  margin: 2px;
  border: 1px solid;
  cursor: pointer;
}

Paranoid !important

Orang ini akan berusaha memasukkan semua kelas pseudo yang ada untuk memastikan agar !important bisa dibuang pada properti manapun. Perfeksionis, punya dampak positif dan negatifnya tersendiri. Percaya diri bahwa semuanya akan berjalan stabil dengan ini:

button[disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
input[type="submit"][disabled],
button[disabled]:focus,
input[type="button"][disabled]:focus,
input[type="reset"][disabled]:focus,
input[type="submit"][disabled]:focus,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="reset"][disabled]:hover,
input[type="submit"][disabled]:hover,
button[disabled]:active,
input[type="button"][disabled]:active,
input[type="reset"][disabled]:active,
input[type="submit"][disabled]:active {
  background-color: whitesmoke;
  color: #fafafa;
  text-decoration: none;
  opacity: .5;
  cursor: default;
  cursor: not-allowed;
}

Wildcard pada Selektor Atribut

Orang ini berusaha mencocokkan sesuatu yang sebenarnya sama sekali tidak cocok. Mereka lebih mementingkan kode HTML yang bersih dibandingkan kode CSS yang bersih. Orang ini benci Internet Explorer dan punya koneksi internet yang cepat di rumahnya:

/*
  <div class="grid-group">
    <div class="grid-3"> ... </div>
    <div class="grid-3"> ... </div>
    <div class="grid-3"> ... </div>
  </div>
*/

.grid-group {
  *zoom: 1;
}

.grid-group:after {
  content: " ";
  display: table;
  clear: both;
}

[class^="grid-"],
[class*=" grid-"] {
  float: left;
  min-height: 1px;
  margin-left: 10%;
}

[class^="grid-"]:first-child,
[class*=" grid-"]:first-child {
  margin-left: 0;
}

.grid-1 {
  width: 100%;
}

.grid-2 {
  width: 45%;
}

.grid-3 {
  width: 26.66666666666667%;
}

Kelas Global, Kelas Spesifik & Kelas Pembantu

Orang ini adalah orang nonverbal. Orang ini berpikir bahwa sistem itu tidak ada bedanya seperti halnya cabang-cabang pohon yang memiliki pusat. Mungkin dia tidak suka membaca dan mendengarkan, namun dia bisa mengetahui inti dari apa yang dilihatnya dengan cepat hanya dengan memindai bagian-bagian yang penting saja. Selebihnya hanyalah kesimpulan yang berasal dari dugaan berdasarkan poin-poin utama yang berhasil ditangkap.

Tahu akan performa dan efisiensi. Tidak merasa keberatan dengan Internet Explorer. Mencari jawaban dari sebuah pertanyaan melalui mesin pencari dan bukan melalui manusia (forum). Bisa mengerjakan semuanya sendiri:

/*
  <div class="grid-group">
    <div class="grid split-3 grid-success"> ... </div>
    <div class="grid split-3 grid-alert"> ... </div>
    <div class="grid split-3 grid-info"> ... </div>
  </div>
*/

.grid-group {
  *zoom: 1;
}

.grid-group:after {
  content: " ";
  display: table;
  clear: both;
}

.grid {
  float: left;
  min-height: 1px;
  margin-left: 10%;
}

.grid:first-child {
  margin-left: 0;
}

.split-1 {
  width: 100%;
}

.split-2 {
  width: 45%;
}

.split-3 {
  width: 26.66666666666667%;
}

.grid-success {
  color: green;
}

.grid-alert {
  color: red;
}

.grid-info {
  color: blue;
}

Prefiks/Afiks/Sufiks Pribadi dalam Penamaan Selektor

Egosentris. Ingin dilihat oleh orang banyak.

“Inilah Aku!”
“Ikutilah Aku!”
“Ini milikku!”
“Ini caraku!”

Percaya diri dan idealis. Belum cocok untuk bekerja di dalam tim, namun sangat antusias dalam belajar dan punya rasa ingin tahu yang besar. Puas dengan hasil pekerjaannya sendiri.

Mereka mempelajari bahasa CSS bukan karena CSS itu keren, namun karena mereka pikir mereka akan menjadi keren kalau mengerti bahasa CSS. Berlaku juga pada bahasa yang lainnya:

.web-gua {}
.navigasi-gua {}
.sidebar-gua {}
.posting-gua {}
.footer-gua {}

.my-web {}
.my-navigation {}
.my-sidebar {}
.my-post {}
.my-footer {}

.wrapper-taufik {}
.navigation-taufik {}
.sidebar-taufik {}
.post-taufik {}
.footer-taufik {}

Overspesifik

Orang ini adalah orang verbal. Pemalu. Lugu. Tidak pandai mengungkapkan perasaannya. Jika ditanya jawabannya panjang lebar. Tidak bisa mengubah kalimat langsung menjadi kalimat tidak langsung:

#ini-adalah-header-utama {}
#ini-untuk-navigasi {}
#ini-untuk-bagian-posting {}
#ini-adalah-menu-yang-warnanya-bisa-berubah-menjadi-biru-jika-diklik {}

CamelCase

Orang-orang JavaScript!

.mainNav {}
.postBody {}
.postFooter {}
.siteSlogan {}

Underscore

Orang-orang PHP!

.main_nav {}
.post_body {}
.post_footer {}
.site_slogan {}

Braket Memiliki Barisnya Sendiri

Orang ini lebih menyukai PHP dibandingkan JavaScript. Orang ini tidak punya kumis dan rajin mencukur kumis. Fisiknya tinggi dan bukan introvert:

body
{
    background-color: #fff;
    font-family: sans-serif;
    color: #666;
}

table
{
    border-collapse: collapse;
    table-layout: fixed;
}

Satu Baris Satu Selektor

Orang ini perutnya gendut:

body { background-color: #fff; font-family: sans-serif; color: #666; }
table { border-collapse: collapse; table-layout: fixed; }

Indentasi Kode dan Posisi yang Aneh pada Braket Penutup

Kode CSS ini tidak dibuat oleh manusia sepenuhnya, melainkan kode ini dibuat menggunakan preprocessor. Pengetahuan teknologi orang ini up-to-date. Mudah terbawa tren. Konsumtif. Punya banyak gadget dan bisa dibilang beruang:

a {
  color: #a9dbf6;
  text-decoration: none; }
  a:hover {
    color: #6dbbad;
    text-decoration: underline; }
  a:active {
    color: #c60000; }
    a:active span {
      display: inline; }

Kode Berantakan

Tukang copas kode. Puya satu peramban favorit yang selalu mereka pakai dan suka menyalahkan peramban-peramban yang lain jika tampilan desainnya jadi berantakan ketika dibuka di peramban tersebut. Marah-marah jika kodenya tidak valid. Selalu tanya kepada orang yang lebih ahli tentang mengapa kodenya tidak bisa valid dengan cara memberikan tautan validator W3C terhadap web mereka, padahal jelas-jelas jawabannya sudah terpampang di dalam halaman validator tersebut berikut daftar pesan peringatan dan kerusakan yang sangat jelas (tandanya mereka tidak mau tahu soal kesalahan-kesalahan yang terjadi, yang penting web mereka bisa lolos di validator. Mereka cuma melihat title bar halaman tersebut saja dan tidak mau membaca isi halamannya).

Mereka melihat kualitas web dari apa yang terlihat di layar dan tidak peduli dengan sistemasi kode di dalamnya.

Dalam web pribadi mereka, mereka selalu menyisipkan sebuah pesan khusus untuk dibaca para pengunjung web mereka. Biasanya diletakkan di bagian sidebar atau di bagian footer dengan isi pesan: “Untuk tampilan yang maksimal, gunakan browser ***** atau ***** versi *****+ Silakan download di sini!”

#mainWrap {
  font: bold 12px Arial, sans-serif;
  color: #aba;
  ;
background: #e68574; /* Old browsers */
background: -moz-linear-gradient(top,  #e68574 0%, #e13c1f 50%, #ba2102 51%, #cc5200 75%, #a01b00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e68574), color-stop(50%,#e13c1f), color-stop(51%,#ba2102), color-stop(75%,#cc5200), color-stop(100%,#a01b00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e68574 0%,#e13c1f 50%,#ba2102 51%,#cc5200 75%,#a01b00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e68574 0%,#e13c1f 50%,#ba2102 51%,#cc5200 75%,#a01b00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e68574 0%,#e13c1f 50%,#ba2102 51%,#cc5200 75%,#a01b00 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e68574 0%,#e13c1f 50%,#ba2102 51%,#cc5200 75%,#a01b00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e68574', endColorstr='#a01b00',GradientType=0 ); /* IE6-8 */
}

    .nivoSlider {
        width: 600px;
        height: 150px
    }

.post-body {
padding-top:10px;
padding-bottom:30px;
font-size:16px;
background:#FFFFFF;
}

Apapun itu, yang penting jangan sampai terus menetap pada kepribadian yang terakhir. Seperti halnya apa yang biasa para ahli grafologi katakan bahwa kepribadian juga bisa diperbaiki dengan cara memperbaiki tulisan mereka, begitu pula dengan penulisan kode. Semakin konsisten dan rajin pola penulisannya itu artinya semakin mantap pendiriannya. Dan jangan terlalu percaya dengan semua tulisan di halaman ini karena semuanya adalah tulisan ngawur!