Tìm hiểu về smacss

1. Bạn là người lập trình CSS, rất có thể bạn đã gặp phải một trong những tình huống sau

• Code CSS dài, nhiều rule đè lên nhau
• Nếu nhiều người cùng làm trên cùng 1 project/page, rules của người viết có thể đè lên rule của người khác, hoặc code bị lặp đi lặp lại
• Khi project lớn dần lên, bạn dần mất khả năng điều khiển code CSS của mình. Lúc này chỉ muốn code sao cũng được, miễn nó chạy và qua được bước QA
• Mỗi người viết code theo một phong cách khác nhau. Người này đọc code người kia chỉ có thể thốt lên: Khủng khiếp

• bạn có thể dùng 1 số framework như sass, less nhưng nếu code ko khoa học thì hiện tượng rối code và code lặp đi lặp lại nhiều lần thì kết quả vẫn như vậy Hum nay mình sẽ giới thiệu cho các bạn về smacss, cách làm sao để code css hiệu quả, đơn giản mà ai đọc cũng có thể hiểu.

2. Smacss là gì

• SMACSS là viết tắt của “Scalable and Modular Architecture for CSS”, là các hướng dẫn về cách phân tích design, tổ chức CSS sao cho “scalable” và “modular”
• Scalable đề cập đến khả năng mở rộng. Code CSS cần được tổ chức theo cách nào đó để dễ dàng mở rộng về sau khi ứng dụng lớn dần lên
• Modular đề cập đến việc chia nhỏ code theo từng khối nhỏ, có thể dùng đi dùng lại.

3. SMACSS Phân loại CSS Rules

• Base Rules: Là những rule mặc định.
• Layout Rules: Những rules liên quan đến việc chia 1 trang ra thành các section như header, footer, main content. Mỗi section sẽ chứa một hoặc nhiều module
• Module Rules: Rules có các khối thể hiện chức năng, có thể dùng đi dùng lại nhiều lần trong design, ví dụ product list, product detail, call to action button,…
• State Rules: Là những rules để style cho module tuỳ theo các ngữ cảnh khác nhau. Ví dụ bạn có module tab, có các trạng thái open, close,… Hoặc module có thể hiện thị khác nhau tuỳ theo kích thước màn hình,…..
• Them Rules: Gần tương tự như state rules. Hầu hết các webstie không cần theme rules, nhưng bạn cần biết trong trường hợp website của bạn có cho phép người dùng tuỳ chỉnh theme.

4. SMACSS cách đặt tên

• Base: Không có quy cách đặt tên gì.
• Layout: dùng tiền tố “layout-” hoặc “l-“
• State: dùng tiền tố “is-“, ví dụ “is-active”, “is-hidden”
• Module: tên CSS class chính là tên module. Ví dụ “.callout”, “.article-detailed”

5. Tìm hiểu quy định Base

• quy tắc khi dùng base rule :
  • Được dùng element selector, các selector để chọn element anh ,chị em, cha con
  • Được dùng các pseudo-class (:hover, :selected,….)
  • Không được dùng “!important” vd :

      body, form {
        margin: 0;
        padding: 0;
      }
      a {
       color: #039;
      }
      a:hover {
        color: #03F;
      }

6. Tìm hiểu quy định Layout

• chia site thành các layout lớn, nhỏ và có thể tái sử dụng

• Những layout lớn như footer, header có thể sử dụng ID

  vd :

# header, #article, #footer {

      width: 960px;
      margin: auto;
    }

# article {

      border: solid #CCC;
      border-width: 1px 0 0;
    }

• Những kiểu Layout nhỏ sẽ sử dụng tên class thay vì ID để các nó có thể được sử dụng nhiều lần trên trang.
• Cách chia layout chỉ có 1 cách chọn duy nhất: 1 Id duy nhất và tên các class
• Bạn cũng có thể chia bố trí layout đáp ứng theo yêu cầu của khách hàng.

• kết luận: ưu tiên bạn có thể bố trí, trình bày layout theo yêu cầu # và áp dụng cách bố trí layout theo smacss. vd :

# article {

         float: left;
       }

# sidebar {

        float: right;
       }
       .l-flipped #article {
         float: right;
       }
       .l-flipped #sidebar {
          float: left;
       }

• bạn có thể chia layout cố định pixel hoặc bằng tỷ lệ %

• Để được rõ ràng, sử dụng thuộc tính id trong HTML của bạn có thể là một điều tốt và trong một số trường hợp, hoàn toàn cần thiết(móc nối đên javascrip). Tuy nhiên khi sử dụng layout có sự khác biệt các bạn hãy dùng thuộc tính Id và layout có điểm chung giống nhau thì sử dụng class

  vd:

     #article {
        width: 80%;
        float: left;
     }
     #sidebar {
       width: 20%;
       float: right;
     }
     .l-fixed #article {
       width: 600px;
     }
     .l-fixed #sidebar {
       width: 200px;
     }
     

vd :ol, ul

    .l-grid {
      margin: 0;
      padding: 0;
      list-style-type: none
    }
    .l-grid > li {
      display: inline-block;
      margin: 0 0 10px 10px;
    }

7.Quy định Module Rules

• Module là một thành phần rời rạc hơn của trang. Đây là phần chính của trang. Modules nằm bên trong Layout. Module có thể nằm trong module #. Mỗi module có 1 thiết kế riêng biệt # nhau tồn tại như 1 thành phần độc lập sẽ làm cho trang web linh hoạt hơn.
• Khi sử dụng module ta tránh sử dụng Id, nên chọn class

vd :

    .module > h2 {
      padding: 5px;
    }
    .module span {
      padding: 5px;
    }

• Khi dự án phát triển phức tạp, nhiều khả năng hơn mà bạn sẽ cần phải mở rộng và hạn chế hơn các chức năng của một thành phần , bạn sẽ có được sử dụng trong một yếu tố chung hoặc riêng. vd

    <div class="fld">
      <span>Folder Name</span>
      <span>(32 items)</span>
    </div>
    <!--bạn có thể thay bằng sử dụng :-->
    <div class="fld">
      <span class="fld-name">Folder Name</span>
      <span class="fld-items">(32 items)</span>
    </div>
    <!--  khi css bạn có thể cho span từng class thay đổi màu backgroud, color.... -->
    <style>
       span.fld-name {
         color: #000;
         font-size: 14px;
      }
      span.fld-items {
         color: red;
         font-size: 12px;
      }
    </style>

• Khi có cùng một module trong các phần khác nhau, chúng ta sử dụng một yếu tố cha để tạo kiểu module khác nhau và giống nhau làm như vậy ta sẽ hạn chế dùng !important

  xét vd :

    .conect {
      width: 100%;
    }
    .connect input[type=text] {
       width: 50%;
    }
    #sidebar .conect input[type=text] {
      width: 100%;
    }
     /* ta dùng yếu tố cha sidebar để tạo sự # biệt */
    .edit {
      width: 200px;
     }
    #sidebar .edit input[type=text], .edit input[type=text] {
      width: 180px;
    }

• Mình giới thiệu với các bạn sơ qua về smacss cách quy định layout, base, module.... muốn tìm hiểu sâu hơn về smacss các bạn có thể tìm hiểu qua trang này: http://snook.ca/, https://smacss.com/