Tạm biệt Tailwind: Hành trình khám phá và tổ chức lại CSS của tôi

Tạm biệt Tailwind: Hành trình khám phá và tổ chức lại CSS của tôi

Tailwind đã dạy tôi điều gì?

Julia Evans, tác giả của bài viết gốc, chia sẻ rằng cô từng rất hào hứng khi phát hiện ra Tailwind cách đây 8 năm. Tailwind đã giúp cô vượt qua sự hỗn loạn trong việc tổ chức CSS và xây dựng nhiều trang web nhỏ một cách nhanh chóng. Tuy nhiên, gần đây, cô đã quyết định chuyển từ Tailwind sang sử dụng HTML ngữ nghĩa và CSS thuần. Điều này không chỉ mang lại niềm vui mà còn mở ra một góc nhìn mới về cách tổ chức CSS một cách bài bản hơn.

Julia thừa nhận rằng, mặc dù cô không phải là một lập trình viên front-end chuyên nghiệp, nhưng Tailwind đã mang đến cho cô một nền tảng kiến thức vững chắc. Những hệ thống mà Tailwind cung cấp, như reset stylesheet, bảng màu, và thang đo phông chữ, đã giúp cô hiểu rõ hơn về cách CSS hoạt động và cách tổ chức chúng một cách hiệu quả.

Những bài học từ Tailwind

Julia nhận ra rằng, dù không còn sử dụng Tailwind, cô vẫn có thể áp dụng những hệ thống mà Tailwind đã dạy để tổ chức CSS của mình. Dưới đây là một số khía cạnh mà cô đã học được:

#### 1. Reset stylesheet

Một trong những điều đầu tiên Julia làm khi chuyển sang CSS thuần là sao chép "preflight styles" của Tailwind. Đây là đoạn mã reset CSS giúp đảm bảo tính nhất quán trên các trình duyệt. Ví dụ, Tailwind sử dụng quy tắc `* { box-sizing: border-box; }`, giúp tính toán kích thước phần tử bao gồm cả padding. Điều này đã trở thành một phần không thể thiếu trong cách cô viết CSS.

#### 2. Tổ chức màu sắc

Tailwind cung cấp một bảng màu rõ ràng và dễ sử dụng. Julia đã học cách tạo một hệ thống màu sắc riêng trong CSS thuần, đảm bảo rằng các màu sắc được đặt tên và sử dụng một cách nhất quán. Điều này giúp cô dễ dàng quản lý và thay đổi giao diện của trang web.

#### 3. Thang đo phông chữ

Thay vì sử dụng các giá trị phông chữ ngẫu nhiên, Julia đã áp dụng một thang đo phông chữ tương tự như Tailwind. Điều này không chỉ giúp giao diện trở nên đồng nhất mà còn cải thiện trải nghiệm người dùng.

#### 4. Các lớp tiện ích (Utility classes)

Mặc dù không còn sử dụng các lớp tiện ích của Tailwind, Julia vẫn giữ lại ý tưởng về việc tạo các lớp CSS nhỏ gọn, dễ tái sử dụng. Ví dụ, cô tạo các lớp như `.text-center` hoặc `.mt-4` để giảm bớt sự phức tạp trong mã CSS.

Hệ thống CSS mới của Julia

Julia đã xây dựng một hệ thống CSS mới dựa trên những gì cô học được từ Tailwind. Dưới đây là các thành phần chính trong hệ thống của cô:

#### 1. Reset

Đây là bước đầu tiên và quan trọng nhất. Julia sao chép phần reset của Tailwind và điều chỉnh nó để phù hợp với nhu cầu của mình. Điều này giúp cô đảm bảo rằng mọi trình duyệt đều hiển thị trang web một cách đồng nhất.

#### 2. Components (Thành phần)

Julia tổ chức CSS của mình thành các thành phần nhỏ, mỗi thành phần chịu trách nhiệm cho một phần cụ thể của giao diện. Điều này giúp mã CSS dễ đọc và dễ bảo trì hơn.

#### 3. Bảng màu

Cô tạo một bảng màu tùy chỉnh, sử dụng các biến CSS để định nghĩa màu sắc. Điều này giúp việc thay đổi giao diện trở nên dễ dàng hơn.

#### 4. Khoảng cách (Spacing)

Julia thiết lập một hệ thống khoảng cách nhất quán, tương tự như cách Tailwind xử lý spacing. Điều này giúp cô dễ dàng điều chỉnh layout mà không cần viết quá nhiều mã CSS.

#### 5. Responsive design

Thay vì dựa vào các lớp tiện ích của Tailwind, Julia sử dụng các media query để tạo giao diện đáp ứng. Điều này mang lại sự linh hoạt hơn trong việc thiết kế giao diện.

Kết luận

Rời xa Tailwind không có nghĩa là từ bỏ tất cả những gì nó mang lại. Julia đã chứng minh rằng, ngay cả khi không sử dụng Tailwind, chúng ta vẫn có thể học hỏi từ những hệ thống mà nó cung cấp để xây dựng một mã CSS rõ ràng, dễ bảo trì và hiệu quả hơn. Hành trình của cô là một minh chứng cho việc không ngừng học hỏi và cải tiến trong lĩnh vực phát triển web.

Nếu bạn đang cân nhắc việc chuyển từ Tailwind sang CSS thuần, hãy nhớ rằng điều quan trọng nhất là hiểu rõ nhu cầu của dự án và áp dụng những gì phù hợp nhất cho bạn.