Atomic Css Và Tương Lai Nào Cho Css?

Atomic Css Và Tương Lai Nào Cho Css?

Chắc hẳn mọi web developer đã đều quá quen thuộc với CSS, CSS3, hay thậm chí đã nghe tới cả CSS4. Nhưng còn Atomic Css thì sao? Nó là quái gì, dùng để làm cái gì vậy? Nào cùng xem Atomic Css là như thế nào nhé.

Atomic Css là gì?

Hiểu một cách đơn giản: Atomic css là một dạng kiến trúc Css (CSS Architecture). Mà ở đó các css được chia thành các lớp nhỏ, mỗi class chỉ thể hiện một thuộc tính duy nhất. Và tên của class sẽ tương ứng với các thuộc tính đó.

Lấy một ví dụ sau:

Style theo phong cách cổ điển:

<style type="text/css">
.light-heading{
	color: #000;
	margin-bottom:20px;
	line-height:1.3;
	font-size:18px;
	font-family:'Muli';
	font-weight:600
}
</style>
<h3 class="heading">Heading font weight 400</h3>

Còn với Atomic Css:

<style type="text/css">
.black-text{
	color: #000;
}
.mg-b-20{
	margin-bottom:20px;
}
.font-muli{
	font-family:'Muli';
}
.fw-600{
	font-weight:600
}
.fz-18{
	font-size:18px;
}
.lh-1_3{
	line-height:1.3;
}
</style>
<h3 class="black-text mg-b-20 font-muli fw-600 fz-18 lh-1_3">Classic style</h3>

Lợi ích của việc dùng Atomic Css

Hmm, nhìn qua có vẻ chẳng cần dùng Atomic Css, viết như cũ có phải nhanh hơn không. Từ từ, xem tiếp ví dụ sau:

<style>
.heading{
	color: #000;
	margin-bottom:20px;
	line-height:1.3;
	font-size:18px;
	font-family:'Muli';
	font-weight:600
}

.wrap-heading-block .heading{
	font-weight:400;
	font-size:24px;
	margin-bottom:10px;
	color:blue
}
</style>

<h3 class="heading">Heading width font weight 600, color black</h3>
<div class="wrap-heading-block">
	<h3 class="heading">Heading width font weight 400, color blue</h3>
</div>

Nhìn qua ví dụ trên, dễ nhận thấy, việc muốn thay đổi style của heading nằm trong block heading khác (.wrap-heading-block) thì buộc phải override. Như vậy dễ nhận thấy sự trùng lặp các thuộc tính ở đây.

Còn nếu viết theo Atomic css thì sao:

<style type="text/css">
.black-text{
	color: #000;
}
.blue-text{
	color: blue;
}
.mg-b-20{
	margin-bottom:20px;
}
.mg-b-10{
	margin-bottom:20px;
}
.font-muli{
	font-family:'Muli';
}
.fw-600{
	font-weight:600
}
.fw-400{
	font-weight:400
}
.fz-18{
	font-size:18px;
}
.fz-24{
	font-size:18px;
}
.lh-1_3{
	line-height:1.3;
}
</style>
<h3 class="black-text mg-b-20 font-muli fw-600 fz-18 lh-1_3">Heading width font weight 600, color black</h3>
<div class="wrap-heading-block">
	<h3 class="black-text mg-b-10 font-muli fw-400 fz-24 lh-1_3">Heading width font weight 400, color blue</h3>
</div>

Có thể thấy, không có một sự trùng lặp css nào ở đây, và vì vậy ko nhất thiết phải override lại css.

Vậy làm như thế để làm gì?

Với 2 cấp như vậy mà bạn đã phải override 4 thuộc tính với 2 cấp css, vậy trường hợp với nhiều hơn 3 cấp thì sao.
Giả sử bạn có 4 cấp, mỗi cấp đều thay đổi các thuộc tính như cấp 2 thì bạn phải tạo ra tương ứng 4 đoạn css mới, với cấp lồng nhau cao nhất bạn có thể phải tạo là 4 class css. Và như vậy thì số lần override sẽ tương tứng với số đoạn css bạn tạo thêm.
Còn việc với project có nhiều hơn 1 người, thì thôi khỏi nói. Mỗi ông 1 kiểu thì coi như bỏ.

Với Atomic css thì khác, việc mỗi class chỉ đại diện cho 1 thuộc tính khiến việc override css không xảy ra. Việc tạo ra các css mới có thể tái sử dụng ở các vị trí khác, hoặc cấp sâu hơn. Điều đó khiến việc viết css trở nên đơn giản hơn, và hạn chế việc xảy ra xung đột css.

Nhìn rộng ra project của bạn có thể sẽ giảm đc kha khá dung lượng css, do các css không bị trùng lặp và phải override. Từ đó việc website sẽ tải nhanh hơn, vì dung lượng css mà client phải kéo về sẽ ít hơn.

Dẫn tới file css viết theo mô hình Atomic Css có thể sẽ chỉ bằng 1/10 so với cách viết truyền thống.

Tựu chung lại việc sử dụng Atomic css có 1 số ưu điểm sau:

  • Không mất thời gian nghĩ tên cho class (trừ mấy thanh niên đặt tên class theo kiểu ngẫu hứng abc, xyz...). Việc đặt tên đơn giản và chỉ cần theo thuộc tính.
  • Tối ưu hiệu suất của website bằng việc hạn chế sự trùng lặp css, dẫn tới việc file css sẽ nhẹ nhất có thể.
  • Đơn giản cho việc thay đổi và bảo trì. Việc mỗi class chỉ đại diện cho 1 thuộc tính, nên khi cần thay đổi style chỉ việc gỡ bỏ class và thay thế bằng class mới.
  • Đồng nhất được thiết kế (color, font-size, khoảng cách...) cho toàn bộ project.
  • Đặc biệt hữu ích cho một project lớn. Với một project lớn thì tính tái sử dụng của Atomic css càng được thể hiện một cách rõ rệt và hiệu quả.

Lưu ý nào cho Atomic Css

  • Atomic Css rất hữu ích, nhưng không phải mỗi css với html cấu thành nên 1 trang, mà js cũng là 1 phần không thể thiếu. Nên đừng quên đặt thêm 1 số anchor css cho từng section, block, button... Việc này rất hữu ích cho việc sử dụng js sau này. Đó các điểm mà js có thể sử dụng để thay đổi, chỉnh sửa website.
  • Với việc các Web Framework(Wordpress, Magento, Shopify) hiện tại là quá phổ biến, việc cấu trúc css và thêm bớt css là khá khó khăn. Vậy nên kết hợp giữa Atomic Css và BEM (Block Element Modifier) nhằm tận dụng tối đa hiệu quả của 2 mô hình này.
  • Với việc chỉnh sửa hoặc vá một lỗi ngắn hạn của project không viết theo css theo mô hình Atomic Css là không đươc khuyến khích. Việc sử dụng Atomic css trong trường hợp này dễ phát sinh lỗi, và không đạt được hiệu quả cao. Còn nếu bạn có thừa thời gian thì cứ xõa đi :v
  • Atomic Css yêu cầu Dev phải bao quát đươc cả project để tạo ra file css có hiệu quả cao nhất. Nên dev cần có một trình độ nhất định.
  • Với các project nhỏ, với 1 hoặc 2 trang(màn hình), thì nên không nên sử dụng Atomic Css. Việc sử dụng Atomic Css sẽ khiến thời gian thực hiện sẽ lâu hơn so với cách truyền thống.

Tạm kết

Qua các chia sẻ vừa rồi, mình mong muốn các bạn đã có cái nhìn tổng quát nhất, điểm mạnh cũng như hạn chế của Atomic Css. Hy vọng các bạn có được trải nhiệm tốt nhất với Atomic Css cho project của mình.