CSS Architecture – Tìm Hiểu Atomic CSS

Như các anh em có thể biết hoặc chưa biết thì Atomic CSS ( hay có một cái tên thân mật khác là Functional CSS ) đã tràn lan ở khắp mọi nơi, thậm chí cái logo React nó còn na ná với với cái từ Atomic mà :smile_cat::smile_cat::smile_cat:.

Thời gian trải nghiệm của tui với Atomic CSS là gần 6 tháng và dưới đây là một bài viết ngắn gọn giới thiệu về nó cho những anh em nào thực sự chưa biết.

Còn anh em nào biết rồi thì thôi nha :pray:.

Link bài viết gốc tui ở đây nhé:
https://hungphamdevweb.com/css-architecture-tim-hieu-atomic-css.html

alt text

Vậy Atomic CSS Là Gì ?

Thở xa xưa khi cái thời mà tui vẫn dùng Bootstrap, cứ mỗi lần code cái gì đó là phải select .class Bố . class Con { color: black; } đại loại na ná thế, rồi thời gian dần trôi qua theo đó mà cái CSS dần dần phìn to ra lúc nào cũng không hay và đến lúc nào đó phải !important tè le chỗ rồi cũng không biết đâu mà lần nữa.

Với cách code CSS truyền thống trên nó khá giống cách mà anh em dùng BEM ( Block-Element-Modifier ) để viết CSS.

Anh em nào code CSS theo style Google AMP cũng biết là nó bắt CSS <50K và với cách viết BEM truyền thống thì điều này là bất khả thi rồi.

Và thế là Atomic CSS đã ra đời như một phương thuốc cứu cánh cho mấy thím code theo kiểu Google AMP như trên và thay thế cho những cách viết CSS khác như BEM, OOCSS hoặc là SMACSS ( tui chưa dùng OOCSS và SMACSS bao giờ nhưng sẽ tìm hiểu và viết nó vào một ngày không xa ahihi :smile_cat::smile_cat::smile_cat:).

Atomic CSS để dễ hiểu nhất là mỗi thuộc tính chỉ được khai báo trong một Class. Nhìn vậy thôi chứ nó lợi hại lắm nha các bác :stuck_out_tongue::stuck_out_tongue::stuck_out_tongue:

Ví dụ cho dễ hiểu:

Cái nút màu đỏ theo cách viết của BEM:

<style>
  .btn {
    display: inline-block;
    color: blue;
  }
  .btn--secondary {
    color: red;
  }
</style>

<button class="btn btn--secondary"></button>

Cách viết theo kiểu Atomic CSS:

<style>
  .dib {
    display: inline-block;
  }
  .r {
    color: red;
  }
  .b {
    color: blue;
  }
</style>

<button class="dib r"></button>

Tại Sao Dùng Atomic CSS ?

Mỗi công nghệ ra đời đều có điểm thú vị của nó, theo bản thân tui với Atomic CSS, các anh em sẽ tiện hơn rất nhiều trong việc code CSS. Chúng ta không cần phải define trong CSS Source nữa, chỉ cần reuse nhưng thuộc tính đã khai báo trước đó là xong.

Nhanh gọn lẹ là điểm cộng lớn nhất của Atomic CSS, nó giống bảng cửu chương ấy học thuộc lòng là viết style CSS mà không cần code một dòng CSS nào.

alt text

Nhẹ là điểm cộng thứ hai, vì cách đặt bên biến ngắn gọn do đó sẽ chiếm ít ký tự dẫn đến size CSS giảm đi đáng kể.

Không lo sợ sự bùng cháy của CSS là điểm cộng cuối cùng, CSS nó đã khai báo hết trong CSS Source rồi chỉ việc reuse thôi thì tại sao nó phải to nữa nhỉ.

Điểm Trừ Của Atomic CSS

Các gì cũng không thể hoàn hảo được và dưới đây là một vài điểm trừ.

Tự thân vận động, ý tui là việc đã theo đuổi Atomic CSS, cũng giống như việc các anh em sẽ tự style CSS từ đầu đến cuối mà dùng đến mấy Framework cháo ăn liền như Bootstrap. Chứ nửa Atomic CSS nửa kia thì tui thấy hơi dị dị :pray::pray::pray:

Mỗi phần tử HTML sẽ hơi dài dòng tí, vì phải kế thừa nhiều Class.

Một Vài Framework Về Atomic CSS:

tachyons hiện tại tui đang dùng ông anh này, thấy nó dễ hiểu và phải gọi là siêu tiện lợn, cách khai báo ngắn gọn mang tính tượng hình cao :laughing: :laughing: :laughing:

basscss tui chưa sử dụng ông anh này nhưng thấy Google AMP có recommend nên thiết nghĩ cũng một Framework nên tìm hiểu.

tailwindcss tui chưa dùng ông anh này luôn nhưng tui thấy cách đặt Class vẫn hơi dài hơn tachyons.

Kết Luận:

Tuỳ theo dự án mà các anh sẽ chọn cách viết CSS theo cách nào, không nhất thiết phải theo Atomic CSS vì nó sẽ hơi cực ban đầu nhưng sẽ sướng về sau. Còn nếu dùng mấy cách viết khác có thể sướng ban đầu nhưng cực về sau cũng không chừng ( tui nghĩ vậy ) :smile_cat::smile_cat::smile_cat:

Đừng quên để lại bình luận về ý kiến của các anh em để cho tui biết nhé.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hùng Phạm

14 bài viết.
14 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
7 2
CSS Sprites thật ra đã là một cái tên khá cũ rồi và mình viết bài viết này hy vọng nó sẽ hữu ích cho các anh em nào chưa bao giờ biết đến cái tên c...
Hùng Phạm viết 7 tháng trước
7 2
White
4 2
Webpack là một cái tên không quá mới nhưng mình nghĩ không ít lần các anh em đã nghe qua nó. Nhiệm vụ chính của Webpack trong hệ thống là dùng để đ...
Hùng Phạm viết 7 tháng trước
4 2
White
4 0
Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới: (Link) Hoặc là có thể xem bài viết full cả...
Hùng Phạm viết 6 tháng trước
4 0
Bài viết liên quan
White
33 6
Mình có một anh bạn người Pháp tên là Aurelien, anh này có một biệt tài đó là convert được màu RGB sang mã Hex chỉ bằng cách tính nhẩm. Phương phá...
Huy Trần viết 2 năm trước
33 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
14 bài viết.
14 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!