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 và @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:
- React Hooks là gì? https://ehkoo.com/bai-viet/react-hooks-la-gi
- Tailwind: style your site without writing any CSS! https://jvns.ca/blog/2018/11/01/tailwind--write-css-without-the-css/
- The Problem with Atomic CSS https://medium.com/simple-human/the-problem-with-atomic-css-d0c09c7aa38e