Cùng tìm hiểu về Atomic CSS/utility-first CSS và sự phát triển bứt phá của Tailwind trong làng công nghệ CSS

Đã rất lâu rồi mình mới quay lại để viết bài trên blog của mình, thành thử ra là có một núi bài nháp viết dở mà chưa có cơ hội xuất bản =)). Nhân tiện dạo gần đây mình có đọc về các bài về cơ học lượng tử thì chợt nhớ tới ở lập trình cũng có 1 trend mới về CSS liên quan tới chủ đề này và đó chính là “Atomic CSS”.

Vậy “Atomic CSS” là gì?

Quay trở lại quá khứ một chút. Vào năm 2015, trước khi mình trở thành lập trình viên Full-Stack như bây giờ thì mình là một lập trình viên Front-End cho bộ phận phát triển sản phẩm của Kenh14.vn. Vào thời điểm đó, cứ vài ngày mình lại làm demo một sản phẩm để cho anh sếp đi trình sếp tổng vì thế mà cái demo của mình chứa CSS tùm lum như một mớ hỗn độn vậy. Với mỗi yêu cầu mới hay chỉnh sửa lại thiết kế mình phải custom lại CSS cho phù hợp làm sao nhanh nhất cho anh đi họp. Có những lần mình đã vừa code vừa khóc 😂 khi mà chỉ còn vài phút nữa để đi họp mà CSS vẫn đang nhảy tung tóe, giao diện vỡ tùm lum 😂 (được cái mấy anh quý chẳng mắng bao giờ hê hê).

Sau nhiều lần vừa code vừa khóc đó thì mình cũng nghĩ tới việc làm sao để chỉnh sửa nhanh nhất, ít phải viết lại CSS và đặc biệt quan trọng là tránh bị CSS specificity, specificity battle nhất có thể. Và thế là các class CSS độc lập ra đời chỉ để mình giải quyết mấy cái box lặp đi lặp lại khác nhau mỗi cái viền hoặc là sự điều chỉnh khoảng cách giữa các box khác nhau mà sự tinh mắt của anh sếp nhìn ra được mà mình thì chịu chết (từ sau giai đoạn này trở đi, phong cách code của mình đã trở nên tỉ mỉ hơn bao giờ hết). Dưới đây là một trong những gì mình đã từng viết vào những ngày tháng hào hùng chiến đấu tới sáng mới đi ngủ ấy 🥲. Đời không như mơ, công việc vả cho sấp mặt nên mình đã từ bỏ dự án này.

#tailwind #tailwindcss #css #web-development