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

CSS đã đi được một chặng đường dài, nhưng công cụ xung quanh nó vẫn không có gì 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 một 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 nó không phải là một ngôn ngữ lập trình hay khuôn khổ phù hợp. Kết quả là, ngay khi dự án của bạn bắt đầu phát triể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 mọi nơi, và nó khó tìm thấy những gì ở đâu; khi bạn bao gồm phông chữ, CSS bên ngoài, JS và các tài sản khác trên các trang của bạn, kích thước cuối cùng của gói dường như vượt quá tầm kiểm soát và bạn tự hỏi rằng lý tưởng về các giao diện người dùng nhanh, thân thiện đã bị mất.

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 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 như vậy mà tôi đã tìm thấy có giá trị to lớn trong công việc của mình. Tôi có thể tránh một cách có ý thức, bao gồm các công cụ đồ chơi trên tường như máy phát 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.

Chuyến tàu CSS đang đến! Đi nào! �� ��

PostCSS

Nếu bạn yêu thích JavaScript, bạn sẽ yêu thích ý tưởng mà giờ đây chúng ta 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.

Tuy nhiên, nó không chỉ đơn thuần là cú pháp dựa trên JavaScript trên CSS. PostCSS kết hợp nhiều gói / tính năng mạnh mẽ với nhau, dẫn đến một quy trình làm việc dễ chịu và dễ dàng hơn nhiều khi xử lý CSS. Ví dụ:

  • Tiền tố nhà cung cấp được tự động thêm vào dựa trên thuộc tính mà bạn sử dụng.
  • Khả năng phát hiện các tính năng CSS nào có thể được sử dụng trên trình duyệt hiện tại.
  • Sử dụng bản cập nhật cú pháp sắp phát hành nhưng sắp phát hành nhưng rất mạnh mẽ cho CSS.
  • Một lưới phản ứng linh hoạt như nó được.

Tôi nghĩ rằng tôi đã thắng được công lý đối với PostCSS nếu tôi không bao gồm ví dụ về lưới. Vì vậy, ở đây chúng tôi đi. Một cái gì đó đơn giản như thế này:

div {
cột bị mất: 1/3
}

được chuyển đổi thành một hệ thống CSS toàn diện với hầu hết các trường hợp cạnh được chăm sóc:

div {
chiều rộng: calc (99,9% * 1/3 –
(30px – 30px * 1/3));
}
div: con thứ n (1n) {
phao: trái;
lề phải: 30px;
rõ ràng: không có;
}
div: con cuối {
lề phải: 0;
}
div: con thứ n (3n) {
lề phải: 0;
phao: phải;
}
div: con thứ n (3n + 1) {
rõ ràng: cả hai;
}

Vì nó là một thứ được điều khiển bởi JS, PostCSS không dễ cài đặt, đặc biệt là nếu bạn là một nhà thiết kế và thiên đường có liên quan nhiều đến các mô-đun, bộ đệm và thế giới npm nói chung. Điều đó nói rằng, tiềm năng cho PostCSS trong công việc của bạn là rất lớn và không nên bỏ qua.

Thanh lọc

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

Đối với những người có thể không biết vấn đề lớn là gì: ở đây, một bản tóm tắt nhanh chóng. Khi bạn xây dựng các ứng dụng trang đơn bằng cách sử dụng các khung công tác mặt trước như React, Angular, Vue, v.v., bạn sẽ trải qua những gì mà Liêu gọi là quy trình xây dựng của Bắt. Về cơ bản, bạn mã hóa tất cả CSS, JS, SASS, v.v., trong các tệp riêng biệt (sắp xếp chúng theo cách bạn thấy trực quan nhất), nhưng sau khi bạn thực hiện xong, bạn nói với người đóng gói để xây dựng điều đó. Những gì nó làm là đọc tất cả mã nguồn bạn đã viết, áp dụng các bộ lọc khác nhau cho nó (thu nhỏ, obfuscation / uglification, v.v.) và nhổ đầu ra thành các tệp duy nhất, thường là app.js tựa cho tất cả JavaScript và Ứng dụng dành cho tất cả các CSS. Các tệp này, cùng với một index index.html mỏng, là tất cả những gì bạn cần để chạy phần đầu của ứng dụng. Nhược điểm là vì mọi thứ được bao gồm trong các tệp cuối cùng này, kích thước của chúng thường vượt quá mức cho phép của thời gian phản hồi nhanh; ví dụ, nó không phải là hiếm khi thấy một ứng dụng và ứng dụng trên YouTube có dung lượng lớn hơn 500 KB!

PurgeCSS được thêm vào như một phần của quy trình xây dựng của bạn và ngăn CSS không được sử dụng bị bó vào đầu ra cuối cùng. Một trường hợp sử dụng điển hình là Bootstrap: đó là một thư viện cỡ trung bình với một số lớp UI cho các thành phần khác nhau. Nếu ứng dụng của bạn sử dụng, giả sử, 10% các lớp Bootstrap, thì 90% còn lại là sự phình to duy nhất trong tệp CSS cuối cùng của bạn. Nhưng nhờ có PurgeCSS, các tệp CSS không sử dụng như vậy có thể được xác định và ngăn chặn khỏi quá trình xây dựng, dẫn đến các tệp CSS cuối cùng nhỏ hơn nhiều (giảm kích thước 5-6 lần là khá bình thường).

Vì vậy, hãy tiếp tục, tinh lọc CSS không cần thiết CSS với Thanh lọc! ��

Gió cùng chiều

Gió cùng chiều là một khung CSS, nhưng nó đi ngược lại nhiều thứ mà tôi nghĩ tôi đã bao gồm nó ở đây trong số các công cụ CSS. Nếu bạn ghét CSS nội tuyến (ai không có?!), Tailwind rất có thể sẽ khiến bạn phải giật mình trong nỗi kinh hoàng ngay lần đầu tiên gặp phải nó. Hãy để Lôi có được hương vị đầu tiên bằng cách xem cách bạn có thể mã hóa một hình thức điển hình bằng cách sử dụng CSS của Tailwind:

tên tài khoản

Mật khẩu

Vui lòng chọn một mật khẩu.

Đăng nhập


Quên mật khẩu?

© 2019 Acme Corp Bảo lưu mọi quyền.

Đây là một trò đùa hay sao?! Tất cả những lớp học nhỏ gây phiền nhiễu là gì? Khi kiểm tra kỹ hơn, tại sao tôi lại thiết lập lề, phần đệm và màu trực tiếp cùng với HTML? Đây có phải là năm 2019 hay không?

Những suy nghĩ như thế này được mong đợi. Tôi biết bởi vì tôi cảm thấy như vậy và ngay lập tức đóng nắp trên Tailwind. Mãi đến sau này tôi mới bắt gặp một podcast nơi khách đã làm lại một trang web hợp thời trang, có quy mô ở Tailwind mà tôi bắt đầu chú ý.

Trước khi chúng tôi di chuyển xa hơn, hãy xem xét những câu hỏi sau:

  • Bạn có mệt mỏi khi ghi nhớ các lớp khung tiêu chuẩn và các chức năng của chúng để bạn có thể tùy chỉnh thiết kế của mình theo ý thích không? Một ví dụ điển hình là thay đổi giao diện và hành vi của thanh điều hướng Bootstrap.
  • Bạn có nghĩ rằng các khung phổ biến như Bootstrap là quá mức cần thiết và cố gắng làm nhiều hơn mức họ nên?
  • Bạn có thấy mình pha trộn các khuôn khổ bởi vì bạn muốn tốt nhất của tất cả các thế giới?
  • Bạn có muốn kiểm soát nhiều hơn các thiết kế của mình và chưa thấy trải nghiệm CSS vanilla tràn ngập?

Nếu câu trả lời cho bất kỳ câu hỏi nào trong số này là một vâng, thì bạn rất cần Tailwind. Giờ thì hãy cùng xem Hãy xem Tailwind là gì và nó làm gì.

Đuôi gió là thứ mà Lẫy gọi là CSS đầu tiên tiện ích, khác với những gì chúng ta làm trong quy trình công việc hàng ngày: CSS ngữ nghĩa. Sự khác biệt giữa CSS ngữ nghĩa và CSS tiện ích là trước đây cố gắng nhóm các thành phần kiểu theo tên của các phần trực quan xuất hiện trên trang. Vì vậy, nếu bạn có menu điều hướng, thẻ, băng chuyền, v.v., trên một trang, cách thực hiện ngữ nghĩa sẽ là nhóm các quy tắc kiểu CSS theo các lớp như .nav, .card, .carousel, v.v. các phần phụ của chúng được dán nhãn tương ứng (ví dụ: .card-body, .card-footer, v.v.). Đây là cách tiếp cận phổ biến nhất đối với CSS và tất cả chúng ta đều quen thuộc với nó thông qua các khung như Bootstrap, Foundation, Bulma, UI Kit, v.v..

Mặt khác, tiện ích của phong cách sử dụng các kiểu viết tên CSS chính xác theo chức năng của chúng: một lớp kiểm soát lề cho các mặt trên và dưới sẽ được đặt tên là .margin-y-Medium và có thể được áp dụng ở bất kỳ đâu trong HTML đánh dấu nơi mà lề này là cần thiết. Mặc dù điều này không giới thiệu phần nào về creep tên lớp (chỉ cần xem nhanh mã tôi đã chia sẻ trước đó hoặc tại ảnh chụp màn hình – rất nhiều lớp!), Ý định của CSS rất rõ ràng: bạn không cần phải nhảy qua lại giữa các tài liệu, CSS và HTML của bạn để tìm ra tên đúng và hiệu quả đúng.

Nó có một cách làm việc rất tự do, nhưng cũng có một nhược điểm: bạn cần phải có những kiến ​​thức cơ bản về CSS (bao gồm cả các khái niệm hiện đại như Flexbox). Điều đó bởi vì Tailwind không cung cấp các kiểu bên ngoài cho bất kỳ thành phần nào trên trang của bạn và nó sẽ tùy thuộc vào bạn để tạo các kiểu từ các khối xây dựng đã cho. Một vấn đề khác là về thiết lập: Tailwind cho phép bạn nhóm một số lớp CSS lại với nhau thành cái được gọi là các thành phần, nhưng nó thực hiện thông qua JavaScript và yêu cầu trình tải và mô-đun như Webpack.

Tất cả đã nói và làm, Tailwind là một cách tạo kiểu mới cực kỳ nổi bật và sẽ thu hút những người khao khát sự đơn giản và kiểm soát cao hơn.

Sa-lát

Mặc du 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 thể biết được nó hữu ích như thế nào. Style Style Awesome Awesome Sheets (hay SASS) là một siêu bộ CSS được phát triển để chế ngự sự điên rồ của creep vào dự án khi CSS phát triển vượt quá vài dòng.

Hình ảnh này: bạn đã đi một chặng đường dài để viết CSS cho dự án của bạn. Bạn sử dụng một vài màu sắc, đã tìm ra một số lề hợp lý cho các div khác nhau, kiểu phông chữ, v.v. Ngoại trừ việc bây giờ bạn nhận ra rằng tất cả đều không hợp nhau. Có lẽ bạn thích dùng thử lợi nhuận lớn hơn cho tất cả các phần, thẻ và nút. Chà, bây giờ thì sao? Ngay cả ý tưởng về việc phải tìm kiếm thay thế thông qua tệp CSS khổng lồ của bạn cũng đủ khiến bạn đau đầu. Chúng tôi đã thực hiện tất cả điều đó, và tất cả chúng ta đều biết nó dễ bị lỗi như thế nào. Sass giải quyết vấn đề này bằng cách giới thiệu các biến:

Khi chúng ta viết HTML, chúng ta lồng các phần tử bên trong các phần tử khác. Nhưng khi viết CSS, chúng ta phải viết một hệ thống phân cấp các quy tắc phẳng, điều này khiến cho việc cố gắng phù hợp với tinh thần CSS phù hợp với CSS về HTML. Với Sass, bạn có thể bắt chước cấu trúc trang bên trong các tệp kiểu của mình:

Tất cả điều này thậm chí không bắt đầu làm trầy xước bề mặt của các tính năng mà Sass cung cấp: thiết kế mô-đun, bao gồm các tệp, mixins, kế thừa. . . danh sách đi và về. Chắc chắn, bạn sẽ cần học một quy trình biên dịch Sass và đưa nó vào công việc của bạn, nhưng theo tôi, vài giờ đó là một khoản đầu tư sẽ trả cho bạn nhiều lần!

CSS Linters

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ừ kẻ nói dối. 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ó có tính chất thứ hai đối với họ. Dù sao đi nữa, 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 kẻ nói dối.

Nói một cách đơn giản, kẻ nói dối là một chương trình kiểm tra mã của bạn để tìm lỗi và sự không nhất quán. Nó thực hiện điều này với sự trợ giúp của một bộ quy tắc mà nó có để tìm ra điều gì sai trái và điều gì không nhất quán. Linters tốt tích hợp với IDE và trình soạn thảo mã và có thể được cấu hình để chạy mỗi khi bạn lưu tệp nguồn. Họ cũng giúp bạn xem trước màu sắc, lỗi và tự động hoàn thành khi bạn đang soạn thảo các tệp CSS của mình:

Nhưng ở đây, phần tốt nhất – nếu bạn tuân theo một định dạng và định dạng CSS cụ thể, bạn có thể điều chỉnh kẻ nói dối để bạn hài lòng. Điều này đảm bảo rằng CSS trong một dự án tuân theo cùng một hướng dẫn kiểu (kẻ nói dối cũng có thể được cấu hình để tự động định dạng tệp mỗi lần lưu / cam kết mã nguồn). Vì vậy, cho dù bạn làm việc trong một nhóm hay một mình, một kẻ nói dối luôn là một sự bổ sung tuyệt vời cho quy trình làm việc dự án của bạn.

Phần kết luận

Tôi chắc chắn rằng bây giờ, bạn đã thuyết phụ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 của mèo trong quá khứ. ��

Điều đó nói rằng, tôi sẽ thừa nhận điều gì đó một lần nữa, ngay cả khi tôi nghe có vẻ như một bản ghi bị hỏng: một số công cụ tôi đã trình bày trong bài viết này không dễ thiết lập, đặc biệt là nếu bạn không thân thiện với hệ sinh thái npm . Nhưng trước khi bạn cảm thấy ghê tởm và quay mặt đi, hãy nói với tôi điều này: CSS có dễ dàng khi bạn lần đầu tiên học tập nó không Thật dễ dàng để học cách tập trung vào một div, để làm chủ sự thay đổi tâm trạng của phao, vân vân? Tương tự, các công cụ mà tôi mô tả ở đây có một số đường cong học tập, nhưng chúng rất đáng giá.

Thành thật mà nói, một khi bạn đã bắt đầu trải nghiệm kết quả, bạn sẽ tự đá mình vì đã không làm điều này sớm hơn. Và hãy để Lát không nhấn mạnh tầm quan trọng của CSS là mô-đun, tinh gọn và được tổ chức tốt!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map