- vừa được xem lúc

A taste of Atomic CSS

0 0 15

Người đăng: Huy Tran

Theo The Full Snack

A taste of Atomic CSS

Thực lòng mà nói, khi cả thế giới thậm chí đã ngưng nói về OOCSS, BEM hay các CSS methodologies khác, thì mình vẫn còn stick với kiểu viết CSS truyền thống, đó là cách viết "trải lòng", theo đúng nghĩa đen của nó:

// css
.container .mot-cai-gi-do { color: #f00; background: #000; border: none; border-radius: 3px;
} .container .mot-cai-gi-do .con-cua-mot-cai-gi-do { color: #f00;
} // hay scss
.container { .mot-cai-gi-do { color: #f00; background: #000; border: none; border-radius: 3px; .con-cua-mot-cai-gi-do { color: #f00; } }
}

Cho đến một ngày, khi mình quyết định là mình đã chịu hết nổi khi phải nghe @kcjpop@bần_harris @bần_harris là thanh niên không chịu cho xin địa chỉ Github để link vô đây, đây là thanh niên làm cho mình mỗi sáng thức dậy lại cảm thấy khủng hoảng vì trình độ lớp trẻ ngày một cao siêu... nói mãi về những tachyons hay tailwind, cụ thể hơn là Atomic CSS, những thứ từ vựng mình không biết và không hiểu mẹ gì. Mình quyết định lại một lần nữa, nhảy lên con tàu của những kẻ hipster.


Atomic CSS hiểu nôm na là một cách viết CSS mà chúng ta... không cần viết một dòng CSS nào cả. Thay vì viết code CSS, chúng ta sẽ sử dụng các class có sẵn mà một Atomic CSS Framework cung cấp. Trong các framework này, mỗi class có nhiệm vụ định nghĩa một thuộc tính duy nhất (vậy nên mới gọi là atomic).

atomic /əˈtämik/: adjective, relating to an atom or atoms / of or forming a single irreducible unit or component in a larger system. tiếng Việt: nguyên tử

Ưu điểm lớn nhất của Atomic CSS có lẽ là giúp tránh được các vấn đề với CSS specificity (mức độ ưu tiên của các thuộc tính), gây ra do cách viết kế thừa class.

Tức là, thay vì muốn có một cái nút phẳng bo góc tròn, thay vì:

<button class="btn-cai-nut">Touch me</button>
.btn-cai-nut { border: none; border-radius: 3px; background: $red; color: #FFF; padding: 2px 5px; &:hover { background: $dark-red; }
}

Thì ta chỉ cần:

<button class="bg-red hover:bg-red-dark border-none rounded-sm text-white px-5 py-2">Touch me</button>

Nhìn qua thì có vẻ hơi rối và hoang đường, thứ nhất, ai lại đi viết một đống class dài lê thê thế kia? thứ hai, ấn tượng của mình là: Ba cái bọn bốc phét! Không viết CSS thì chắc chỉ làm được vài ba cái style đơn giản, còn mấy cái cần customize nhiều thì thách cha nó làm cũng không được!

Đây cũng là quan điểm của khá nhiều người, mình biết được vì sau đó vài ngày thì trên Hacker News cũng xuất hiện một thread thảo luận về một bài viết về Atomic CSS của Julia Evans.

Tuy nhiên, sau vài hôm thử nghiệm, mình làm được vài cái demo nho nhỏ với Tailwind CSS, cũng cảm thấy thoải mái hơn khi sử dụng. Đầu tiên là prototype một cái giao diện blog minimal:

Live demo: https://codepen.io/huytd/pen/mzzoRe

Đọc thêm:

Bình luận

Bài viết tương tự

- vừa được xem lúc

Căn giữa các phần tử HTML theo chiều dọc (phần 1)

Bài viết được dịch từ bài Vertical centering of elements in HTML xuất bản ngày 18/01/2015 trên trang Web++. .

0 0 58

- vừa được xem lúc

Căn giữa phần tử trong CSS

1. Theo chiều ngang. Đó có phải là phần tử inline hay inline-* (như text hay links). .

0 0 49

- vừa được xem lúc

99% không biết đến mẹo này khi sử dụng Flexbox CSS

Hello lại là mình đây. Bài viết hôm nay mình sẽ giới thiệu tới mọi người một trick khá hay khi dùng CSS flexbox nhé. 1. Chia layout với flexbox.

0 0 47

- vừa được xem lúc

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 49

- vừa được xem lúc

1 số UI component và layout hữu ích với Frontend

Giới thiệu. Hôm nay mình xin chia sẻ 1 số Layout và UI component quen mà có lẽ là quen thuộc với nhiều người khi làm dự án, hay bắt gặp trên mạng.

0 0 47

- vừa được xem lúc

Style text css

Giới thiệu. Chào 2021, mình sẽ giới thiệu vài kiểu style cho text màu mè chút cho rực rỡ .

0 0 28