Miligam css

Chắc chắn rằng mọi nhà phát triển web đều đã quá quen thuộc với CSS, CSS3, hay thậm chí họ đã nghe đến cả CSS4. Nhưng còn Atomic Css thì sao?

Atomic Css là gì?

Hiểu một cách đơn giản. Atomic css là một dạng Css kiến ​​trúc [CSS Architecture]. Mà ở đó các css được chia thành các lớp nhỏ, mỗi lớp chỉ có thể hiện một thuộc tính duy nhất. Và tên của lớp 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

Heading font weight 400

Còn với Atomic Css

Classic style

Lợi ích của việc sử dụng Atomic Css

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

Heading width font weight 600, color black

	
Heading width font weight 400, color blue

Nhìn qua ví dụ trên, dễ nhận thấy, việc muốn thay đổi phong cách của tiêu đề nằm trong khối tiêu đề khác [.wrap-heading-block] thì bắt buộc phải ghi đè. Như vậy dễ dàng nhận thấy sự lặp lại các thuộc tính ở đây

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

Heading width font weight 600, color black

	
Heading width font weight 400, color blue

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

There are doing like to do what?

Với 2 cấp như vậy mà bạn đã phải ghi đè 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 tương ứng với 4 đoạn css mới, với mức độ khác nhau cao nhất mà bạn có thể tạo ra . Và như vậy thì ghi đè số lần sẽ tương đương với số đoạn css bạn tạo thêm.
Còn việc với dự án có nhiều hơn 1 người thì thôi khỏi nói. Each he 1 type thì coi như bỏ.

Với Atomic css thì khác, việc mỗi lớp chỉ đại diện cho 1 thuộc tính khiến việc ghi đè 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 nhau hoặc cấp độ cao hơn. Điều đó làm cho việc viết css trở nên đơn giản hơn và giới hạn việc xảy ra xung đột css

Tầm nhìn rộng ra dự án 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 ghi đè. Từ đó việc trang web sẽ tải nhanh hơn, vì dung lượng css mà khách hàng phải kéo về sẽ ít hơn

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

Tựu chung lại việc sử dụng Atomic css có 1 số đ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. ]. Set the menu name and only to the property
• Tối ưu hiệu suất của trang web bằng cách hạn chế sự trùng lặp css, dẫn đến tệp css sẽ nhẹ nhất có thể
• Đơn giản cho việc thay đổi và bảo trì. Việc mỗi lớp chỉ đại diện cho 1 thuộc tính, nên khi cần thay đổi kiểu chỉ việc hủy bỏ lớp và thay thế bằng lớp mới
• Đồng nhất được thiết kế [color,

  
  Classic style

  0, distance. ] cho toàn bộ dự án
• Đặc biệt hữu ích cho một dự án lớn. Với một dự án lớn thì tính năng tái sử dụng của Atomic css càng có thể thực hiện một cách rõ ràng 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

  
  Classic style

  1,

  
  Classic style

  0,

  
  Classic style

  1. Việc này rất hữu ích cho việc sử dụng js sau này. Đó là những điểm mà js có thể sử dụng để thay đổi, chỉnh sửa trang web
• Với việc các Web Framework [Wordpress, Magento, Shopify] hiện đang quá phổ biến, việc cấu trúc css và thêm bớt css là khá khó khăn. Do đó nên kết hợp giữa Atomic Css và BEM [Block Element Modifier] ​​Tận dụng tối đa hiệu quả tối đa của 2 mô hình này
• Với công việc chỉnh sửa hoặc sửa lỗi rút ngắn thời hạn của dự án do không viết theo css theo mô hình Atomic Css không bị hạn 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 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ả dự án để tạo ra file css có hiệu quả cao nhất. Dev must have a best mode
• Với các dự án nhỏ, với 1 hoặc 2 trang[màn hình], thì không nên sử dụng Atomic Css. Việc sử dụng Atomic Css sẽ làm cho thời gian thực hiện sẽ lâu hơn so với cách truyền thống

pause

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