Binanalar

Menata Ulang Syntax CSS Acak-acakan Via Styleneat

TIPS & TRIK 01 May 2016 21:39

binanalar.com

binanalar.com - Betapa sulitnya mempelajari format style pada koding CSS yang susunannya tidak beraturan, jangankan yang baru belajar, yang sudah mengerti sekalipun pasti dibuat pusing untuk menganalisanya ulang. Tidak masalah bila struktur pengkodean kita sendiri yang membuatnya, bayangkan saja bila itu buatan programmer lain, belum lagi jika si programmer menggunakan mode style CSS terkompresi, pasti ribet sekali khan jika harus mempelajari dengan menelusuri kodingya satu-persatu.

Nah, kali ini ada solusi termudah dimana rekan bisa dengan cepat mengembalikan struktur style CSS yang sebelumnya acak2an menjadi lebih teratur dan lebih tertata rapi. Saya sarankan coba saja gunakan layanan dari Styleneat.  

Contoh susunan CSS yang tidak beraturan:

#id1 { property: value; }
#id1 .class1 { property: value; }
#id1 .class1 a { property: value; property2: value2; property3: value3; }
#id1 .class1 a span { property: value; property2: value2; }
#id2 { property: value; }
#id2 .class { property: value; }

 

Contoh susunan CSS yang teratur dan tertata rapi:

#id1 { property: value; }
 
  #id1 .class1 { property: value; }
 
    #id1 .class1 a {
       property: value;
       property2: value2;
       property3: value3; }
 
       #id1 .class1 a span {
          property: value;
          property2: value2; }
 
#id2 { property: value; }
 
  #id2 .class { property: value; }

 

Jujur saja, sebenarnya banyak juga programmer yang kadang malas mengatur tata letak dari selector, value dan property pada CSS Syntax ini, masalahnya kebanyakan si programmer merasa kode tersebut dia sendiri yang menyusunnya, jadi mau diedit kapanpun juga dia merasa tetap mengerti alurnya. Saya sendiri sebenarnya termasuk yang malas juga mengatur struktur pengkodean ini, padahal bila ditata dengan rapi untuk kedepannya pasti lebih mudah untuk mempelajarinya kembali, yang jelas ini memudahkan kita mengingat antara satu kode dengan lainya yang saling berhubungan. Silhakan dicoba dan dipelajari sendiri ok :)



Terkait