Tailwind: Cuộc bứt phá ngoạn mục trên con đường sử dụng Atomic CSS

Tailwind: Cuộc bứt phá ngoạn mục trên con đường sử dụng Atomic CSS

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

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 specificityspecificity 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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Tailwind CSS Cheatsheet

Master Tailwind CSS with this Cheatsheet. Tailwind CSS allows us to build modern websites with the respective classes without writing a single native CSS. Tailwind is amazing since we have to only to specify the respective classes and Tailwind CSS will take care of everything. We will see the most basic CSS classes and their relative properties in CSS.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Web App Development Company | Web Application Development Service

Web development company in India & USA offers different types of web application development services with the best result oriented, clients all specifications, different technologies, etc with a cost-effective rate. Get a free quote.