-->

5 công cụ CSS hàng đầu cho các nhà phát triển và thiết kế web

CSS đã đi một chặng đường dài, nhưng công cụ xung quanh nó vẫn chưa có cho đến bây giờ.

Nếu bạn cảm thấy việc viết CSS giống như chiến đấu với quái vật trong hố hắc ín thì bạn không đơn độc. Mặc dù CSS là một trong những công nghệ cơ bản nhất cung cấp năng lượng cho Web, nhưng xét trên thực tế, nó không phải là một ngôn ngữ lập trình hoặc khung công tác thích hợp.

Kết quả là, ngay khi dự án của bạn bắt đầu trở nên nổi bật hơn, thì sự lộn xộn cũng vậy - các quy tắc của bộ chọn dường như ở khắp nơi, và thật khó để tìm ra cái gì ở đâu; khi bạn bao gồm phông chữ, CSS bên ngoài, JS và các nội dung khác trên các trang của mình, kích thước cuối cùng của gói dường như phát triển vượt quá tầm tay và bạn tự hỏi lý tưởng về giao diện người dùng nhanh, thân thiện với người dùng đã mất đi đâu.

Nhưng nó không cần phải như thế. Ngày nay, công cụ xung quanh CSS đã phát triển đến một mức độ mà quy trình làm việc không chỉ có thể được thuần hóa mà còn trở nên thú vị.

Trong bài viết này, tôi sẽ nói về năm công cụ CSS mà tôi thấy có giá trị to lớn trong công việc của mình. Tôi đã tránh một cách có ý thức, bao gồm các công cụ "đồ chơi" như trình tạo CSS, trình tạo menu, v.v., vì chúng tạo ra nhiều vấn đề hơn là giải quyết.

#1 PostCSS

Một công cụ để chuyển đổi CSS với JavaScript.
PostCSS
Nếu bạn yêu thích JavaScript, bạn sẽ thích ý tưởng giờ đây chúng tôi có thể thêm và kiểm soát CSS thông qua JavaScript. Và đó chính xác là khả năng mà PostCSS cung cấp.

#2 PurgeCSS

Bạn có yêu thích quy trình làm việc dựa trên khuôn khổ giao diện người dùng hiện đại nhưng cảm thấy thất vọng vì họ mang theo quá nhiều hành lý? Nếu có, PurgeCSS là bạn của bạn, ít nhất là theo CSS.

#3 Tailwind

Tailwind là một khung công tác CSS, nhưng nó đi ngược lại rất nhiều điều mà tôi nghĩ rằng tôi sẽ đưa nó vào đây trong số các công cụ CSS.
Tailwind
Nếu bạn ghét CSS nội tuyến (ai không?!), Rất có thể Tailwind sẽ khiến bạn phải giật mình kinh hoàng ngay lần đầu tiên gặp phải nó. Hãy thử trải nghiệm lần đầu tiên bằng cách xem cách bạn có thể viết mã một biểu mẫu điển hình bằng Tailwind CSS.

#3 Sass-lang

Mặc dù Sass đã xuất hiện từ lâu, tôi đã đưa nó vào đây vì các nhà phát triển vẫn không biết nó hữu ích như thế nào.

Stylisally Awesome Style Sheets (hoặc SASS) là một tập hợp siêu CSS được phát triển để chế ngự sự điên rồ của những kẻ xâm nhập vào dự án khi CSS phát triển vượt quá một vài dòng.

#5 Linters CSS

Vì các nhà thiết kế web (và nhà phát triển giao diện người dùng - mặc dù tôi tự hỏi hai thuật ngữ này khác nhau như thế nào 🤔) sử dụng các trình soạn thảo văn bản đơn giản - hoặc như trường hợp ngày nay, mã trực tiếp từ các công cụ phát triển Chrome - họ hiếm khi nghe về hoặc hưởng lợi từ linter.

Mặt khác, các lập trình viên sử dụng các trình soạn thảo văn bản tốt như VS Code, Sublime Text hoặc các IDE khác biết rất rõ công cụ này vì nó là bản chất thứ hai đối với họ. Dù sao, vấn đề là, nếu bạn là một trong những nhà phát triển CSS bị chìm trong CSS lộn xộn, bạn có thể hưởng lợi từ một linter.

Phần kết luận

Tôi chắc chắn bây giờ, bạn tin chắc rằng sự phát triển CSS hiện đại khác xa so với phương pháp chăn gia súc trong quá khứ. 🙂

Mời các bạn viết lời bình cho bài viết!

Nhấp bài bình luận SEO