← from Blog

Functional CSS

November 6, 2018 • 4 min read

Khi viết CSS cho web. Có rất nhiều CSS Framework để bạn lựa chọn. Và một số CSS Framework sau đây thì rất phổ biến:

Những CSS Framework trên giúp bạn xây dựng Prototype, Responsive Design một cách linh hoạt và dễ dàng.

Hôm nay tôi sẽ giới thiệu thêm với các bạn về Functional CSS (được thường được gọi là Utility-first CSS hay Atomic CSS)

Vậy Functional CSS là gì?

Về cơ bản, Functional CSS là tập hợp hàng ngàn classes nhỏ định nghĩa cho từng chức năng, thuộc tính, quy tắc của CSS.

Ví dụ:

<div class="component">...</div>

<style>
  .component {
    background: #333;
    margin: 20px;
    padding: 10px;
    color: #fff;
    border: 1px solid #555;
  }
</style>

Với Functional CSS ta viết như sau:

<div class="bg-grey m-20 p-10 text-white border border-solid border-grey-dark">...</div>

<style>
  .bg-grey {
    background: #333;
  }
  .m-20 {
    margin: 20px;
  }
  .p-10 {
    padding: 10px;
  }
  .text-white {
    color: #fff;
  }
  .border {
    border-width: 1px;
  }
  .border-solid {
    border-style: solid;
  }
  .border-grey-dark {
    border-color: #555;
  }
</style>

Vậy hoá ra nó cũng giống với Inline Style mà thỉnh thoảng trước đây ta cũng hay dùng nhỉ?

<div style="background: #333; margin: 20px; padding: 10px; color: #fff; border: 1px solid #555;">...</div>

Sự khác nhau giữa Functional CSS và Inline Style

Nhìn vào ví dụ trên bạn có thể nghĩ là cách viết Functional CSS và Inline Style có vẻ giống nhau. Nhưng Functional CSS rất khác với Inline Style về những điểm sau:

  1. Functional CSS là những classes được định nghĩa trước. Và các classes này được nhất quán với từng classes bạn định nghĩa như về phông chữ, màu sắc, khoảng cách (margin hoặc padding) nên bạn sẽ dễ dàng sử dụng lại so với kiểu dùng Inline Style

    <div class="bg-blue text-sm"></div>

    so với

    <div style="background: blue; font-size: 10px;"></div>

  2. Functional CSS hỗ trợ media queries. Giúp bạn có thể xây dựng Responsive Design.

  3. Functional CSS có thể sử dụng để hỗ trợ cho từng kiểu in cụ thể bạn muốn với CSS.

  4. Với Pseudo-classes CSS như ::before, ::after hay :hover. Functional dễ dàng giúp bạn định nghĩa còn Inline Style thì không thể.

Lợi ích khi dùng Functional CSS

tôi cũng thường hay sử dụng Bootstrap để xây dựng web. Nhưng từ sau khi chuyển sang dùng Functional CSS tôi thấy có những lợi ích sau:

  • Thời gian xây dựng web của tôi nhanh hơn. Tăng lên khoảng 1.5 hoặc 2 lần so với trước.
  • Không còn lo lắng về việc sử dụng Naming CSS nữa.
  • Dễ dàng bảo trì và phát triển CSS.
  • Tránh được việc lặp đi lặp lại code, tăng performance lên.
  • Dễ dàng xây dựng hầu hết các Component UI mà không cần viết thêm nhiều CSS.
  • Bằng việc mô tả cách sử dụng Functional CSS thì các bạn Developer cả Backend lẫn Frontend cũng dễ dàng chỉnh sửa.

Sử dụng thư viện Functional CSS nào?

Nếu bạn không có thời gian để xây dựng các Utility-first CSS thì bạn có thể tham khảo và sử dụng những thư viện tôi đề cập dưới đây:

  • Basscss - thư viện đầu tiên Functional CSS mà tôi sử dụng.
  • Tachyons - đây là thư viện tôi sử dụng để làm giao diện blog này phiên bản trước đây.
  • TailwindCSS - thư tiện tôi thích nhất và thường sử dụng cho đến bây giờ.
  • Colors.css - sử dụng màu sắc cho web.

Vậy Functional CSS không có nhược điểm?

Bất kỳ thư viện nào đều có những ưu và nhược điểm. Nhưng thường tôi chỉ nêu lên ưu điểm thôi. Còn nhược điểm có lẽ là tôi để các bạn tự dùng và trải nghiệm nhé. Bởi vì có thể tôi thích cái X còn bạn thì lại thích cái Y. Nên tôi nghĩ rằng bạn nên thử sử dụng chúng và xem thư viện nào phù hợp với mình nhé.

Tailwind CSS

Như đã nói trên, Tailwind CSS là thư viện mà tôi rất thích. Nên tôi sẽ giới thiệu bạn một số ví dụ tôi sử dụng nó để xây dựng UI nhé.

#CSS #PostCSS #TailwindCSS