fbpx
Search
Generic filters
Exact matches only
Filter by Custom Post Type

Try these: wordpressfront endvloghackerrankmalaysia

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à 😹😹😹.

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 🙏.

atomic css

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 😹😹😹).

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 😝😝😝

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.

atomic css

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ị 🙏🙏🙏

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 😂😂😂

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 )😹😹😹

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

Xin chào các đồng chí tôi là Phạm Phi Hùng, tác giả của blog Hung Pham Dev Web Tôi là một Front-end Developer, kiêm writer, quay phim dạo, sửa máy dạo và làm một số ngành nghề khác nữa

Leave a reply:

Your email address will not be published.

Site Footer