Amalan Terbaik CSS

CSS Best Practices

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