Technology

7 Alasan Kenapa Anda harus Menulis Code dengan CSS Preprocesor

 

Apakah CSS preprocesor? CSS preproscesor sangat membantu saya untuk mengatur design web. Pertama kali saya menggunakan CSS preprocesor bernama “less”. Awal saya lihat cara penulisan di CSS preprocesor masih sama dengan penulisan CSS standar, hanya beda penempatannya saja dimana kita harus menulis variabel. Sehingga proses belajarnya pun tidak menyulitkan sama sekali, justru menuliskan sebuah variabel dengan isinya jadi sangat menguntungkan bagi programmer. Berikut adalah 7 alasan kenapa Anda juga harus memakai CSS Preprocesor:

1.       Tidak menulis ulang apa yang seharusnya sama.

.large-heading {
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:24px;
text-transform:uppercase;
line-height:1.2em;
color:#ccc;
}
.med-heading {
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:18px;
text-transform:uppercase;
line-height:1.2em;
color:#ccc;
}
.small-heading {
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:14px;
text-transform:uppercase;
line-height:1.2em;
color:#ccc;
}

Sesudah

.large-heading {
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:24px;
text-transform:uppercase;
line-height:1.2em;
color:#ccc;
}
.med-heading {
.large-heading;
font-size:18px;
}
.small-heading {
.large-heading;
font-size:14px;
}

2.       Mempercepat Waktu Anda.

Dengan cara no 1 tadi itu sudah sangat membantu anda dalam memanage waktu anda mengetik.

3.       Sangat membantu memaintenen code.

@maincolor: #4575D4;
@accentcolor: #FFA700;
a { color:@maincolor; }
a:hover{ color:lighten(@maincolor, 20%;}

4.       Lebih terorganisir lagi CSS anda.

h1 {
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
font-weight:bold;
line-height:1.2em;
a {
color:black;
&:hover {text-decoration:none;}
}
}

Kalau di sederhanakan lagi

h1 {
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
font-weight:bold;
line-height:1.2em;
}
h1 a {color:black;}
h1 a:hover {text-decoration:none;}

5.       Membuat website anda menjadi lebih bagus lagi.

Dengan waktu yang dapat di kurangi dengan cara cara di atas anda dapat memikirkan lagi bagai mana website anda menjadi lebih bagus lagi.

6.       Sangat mudah sekali menuliskan di sini dari pada yang anda pikirkan

Munkin anda pikir sangat lama sekali untuk mempelajari sebuat CSS preprocesor hampir sama mempelajari framework baru. Tetapi itu sangat berbeda keli. Mungkin anda dapat mempelajarinya dalam waktu 1 hari paling lama.

7.       Ini sangat menyenangkan sekali

untuk anda yang sangat mengidamkan website yang sangat bagus sekali dan ingin melakukannya dengan waktu yang sangat cepat, CSS Preprocesor bisa membantu anda.

Mungkin bagi para webdesigner yang belum menggunakan css preprocesor saya sarankan untuk menggunakan css preprocesor ini karena sangat menguntungkan sekali bagi para webdesigner. Dan ini pun juga masih belum seluruhnya dari keuntungan keuntungan menggunakan CSS Preprocesor. Kalau Bootstrap menurut informasi yang saya ketahui sangat membantu sekali, tetapi saat ini saya mempelajarinya :-)

Dapatkan Segera! Video Marketplace Domination: Cara Sukses Jualan di Tokopedia dan Bukalapak. Download Now!


Artikel Terkait

4 komentar

  • mas joko
    1 October 2013 - pukul 16:17

    maaf, kok Bahasa Indonesianya kayak terjemahan ya?

    • Andhika Martha Wijaya
      2 October 2013 - pukul 8:26

      asli tulisan saya kok pak. maaf kalau agak berantakan :D
      saat ini saya sedang belajar :-)
      terus dukung Mebiso ya pak

  • 28 October 2013 - pukul 11:44

    Ijin copas artikelnya ya, sumber saya pasang juga kok :)

    Makasih sebelumnya

    • Administrator
      28 October 2013 - pukul 12:59

      silakan mas :-)

Berikan Komentar

Your email address will not be published. Required fields are marked *