Amalan Terbaik CSS

Betul. Bukan susah. Cuma banyak komitmen lain. Sama la macam gua. Kalau ada masa boleh la buat pengemasan sikit dekat CSS masing-masing.. Walaupun tak 100% kira orait la.

1. Asingkan CSS dengan HTML

2. Readable, Whitespace & Same line braces

   /* BAD */
   .selector {display:none;background:#ff0000;color:#000000;}
   
   /* GOOD - SINGLE LINE */
   .selector { display: none; background: #ff0000; color: #000000; }
   
   /* GOOD - MULTI-LINE */
   .selector {
   	display: none;
   	background: #ff0000;
   	color: #000000;
   }

3. Gunakan shorthand

   /* LONG CODE IS LONG */
   padding-top: 1px;
   padding-right: 2px;
   padding-bottom: 1px;
   padding-left: 2px;
   
   /* BAD */
   padding: 0px 10px;
   
   /* GOOD */
   padding: 0 10px;
   
   /* BETTER */
   padding: 1px 2px 1px 2px;
   
   /* BEST */
   padding: 1px 2px;

4. Organisasikan CSS mengikut struktur top-down

   /* CONTENT */
   styles goes here...
   
   /* FOOTER */
   styles go here...

5. Multiple Class

   <div class="box right"></div>

6. Jangan letakkan nama bagi ID selector

   /* BAD */
   button#backButton {…}
   /* BAD */
   .menu-left#newMenuIcon {…}
   /* GOOD */
   #backButton {…}
   /* GOOD */
   #newMenuIcon {…}
   

7. Elakkan descendant selector dan child selector

   /* BAD */
   treehead treerow treecell {…}
   /* BETTER, BUT STILL BAD */
   treehead > treerow > treecell {…}
   /* BAD */
   treehead > treerow > treecell {…}
   /* GOOD */
   .treecell-header {…}
   

8. Elakkan guna !important
9. Fahamkan perbezaan di antara Block Element dan Inline Element.

   /* INLINE */
   span, a, strong, em, abbr, acronym
   
   /* BLOCK */
   

10. Gabungkan imej-imej dalam satu fail imej sahaja jika boleh (sprite horizontally).
11. Bila dah sedia, cuba Object Oriented CSS dan LESS CSS.

Related Posts:

• No Related Posts