CSS hậu xử lý cho người mới bắt đầu Mẹo và tài nguyên

Xử lý trước CSS là một khái niệm mà hầu hết các nhà phát triển web đã học hoặc đọc về. Chúng tôi đã đề cập đến tiền xử lý CSS rất chi tiết để giúp các nhà phát triển bắt kịp tốc độ của công nghệ phổ biến này. Nhưng những gì về hậu xử lý?

Những công cụ tương đối mới này tương tự theo nghĩa là chúng ảnh hưởng đến quy trình phát triển web, tuy nhiên họ hoạt động trên mặt khác của sự phát triển CSS (“bài đăng” phát triển).

Trong bài đăng này, tôi muốn giới thiệu cơ bản của xử lý hậu kỳ, Cách thức hoạt động, tại sao bạn sử dụng nó và chia sẻ một vài thư viện / công cụ bạn có thể sử dụng để nâng cấp trò chơi CSS của mình với xử lý hậu kỳ.

Đăng so với tiền xử lý

Các cách mạng tiền xử lý xảy ra khi Sass / LESS đạt được cảnh. Các công cụ này cho phép các nhà phát triển sử dụng các biến, vòng lặp, hàm và mixin trong CSS. Điều này gần như làm cho sự phát triển CSS cơ bản tương tự như ngôn ngữ lập trình với chức năng mở rộng.

Hậu xử lý xảy ra sau khi bạn đã tạo CSS đơn giản và muốn mở rộng hơn nữa thông qua tự động hóa. Điều này có thể bao gồm mở rộng bộ chọn lớp, hoặc là tự động thêm tiền tố cho các thuộc tính CSS nhất định.

Nói chung, tiền xử lý có ngôn ngữ bản định kiểu riêng, chẳng hạn như Sass và LESS, rằng chuyển đổi thành CSS thuần. Xử lý hậu kỳ lấy CSS cơ bản đó và áp dụng tự động hóa / lặp lại.

Đây là một trích dẫn từ một bài đăng cũng là nguồn của hình ảnh trên. Tôi nghĩ rằng tác giả Stefan Baumgartner tổng hợp sự khác biệt.

Theo một cách nào đó, cả hai đều giống như các công cụ tự động hóa, chỉ hoạt động theo những cách khác nhau. Ví dụ, một nỗi đau phổ biến được giải quyết bằng cách xử lý hậu kỳ là tự động thêm tiền tố cho các thuộc tính CSS3 mới hơn.

Nhưng điều này cũng có thể được thực hiện trong Sass với phần mở rộng. Vì vậy, có thực sự có một sự khác biệt? Đây là một trích dẫn tuyệt vời từ cùng một bài:

Mặc dù điều này có thể đúng theo nghĩa lý thuyết, cộng đồng phát triển web vẫn tạo ra sự phân chia giữa các công cụ này. Vì lý do này, tôi đặc biệt khuyên bạn nên giới thiệu cho các nhà phát triển ít nhất là đọc về bộ xử lý hậu kỳ và để biết họ có thể làm gì.

Phù hợp với xử lý hậu kỳ vào quy trình làm việc của bạn

Hầu như tất cả mọi người tham khảo PostCSS như tài nguyên dứt khoát cho xử lý bài. Tuy nhiên, nhóm PostCSS đã công khai thừa nhận trên Twitter để thay đổi tiêu đề của họ bởi vì verbiage không còn ý nghĩa nữa.

PostCSS không còn chỉ là một công cụ tiền CSS hay hậu CSS. Nó thực sự có thể làm việc trong cả hai lĩnh vực! Điều này giải thích thêm về trích dẫn từ trước đó nói rằng tất cả các công cụ CSS đều hiểu rõ một điều - Chế biến.

PostCSS sử dụng plugin JavaScript để tự động hóa quy trình làm việc CSS của bạn, và thậm chí bạn có thể viết plugin JS của riêng mình để mở rộng thư viện PostCSS. Nếu bạn muốn bắt đầu với PostCSS, hãy xem hướng dẫn giới thiệu này trên Tạp chí Smashing. Nếu bạn đã sử dụng và hiểu Sass thì bạn sẽ nhanh chóng nhận được Post CSS.

Để xây dựng quy trình xử lý CSS trước / sau của riêng bạn, hãy bắt đầu bằng lập danh sách các điểm đau của bạn, nhu la:

• độ dốc CSS tự động tiền tố
• tự động tổ chức cho các quy tắc CSS
• nối thêm các polyfill cho các thuộc tính nhất định
• tạo kích thước hình ảnh cho hình ảnh nền

Lưu ý rằng tất cả những điều này có thể được thực hiện trong cả trước và sau xử lý. Điều quan trọng cần nhận ra là việc xử lý trước / sau CSS nhanh chóng được hợp nhất để trở thành một trong cùng một điều.

Thay vì chia nhỏ các mục tiêu của bạn thành các giai đoạn xử lý khác nhau, tốt hơn là nên liệt kê chúng là mục tiêu, sau đó tiếp tục tìm kiếm các công cụ phù hợp.

Công cụ xử lý hậu kỳ tốt nhất

Tôi đã cố gắng tránh đề cập đến các phần mở rộng trong phần này, vì Sass & PostCSS có rất nhiều thứ để lựa chọn. Thành thật mà nói bạn có thể có được chỉ với những thư viện, nhưng tôi cũng muốn cung cấp một số lựa chọn thay thế cho các giải pháp cụ thể hơn.

Bệnh hoạn

Nếu bạn đã làm việc với Node.js, thì dường như Pleeease là một lựa chọn rõ ràng. Nó có nhiều các tính năng xử lý CSS điển hình, chẳng hạn như nhập tệp, biến / chức năng, tự động thu nhỏ và hỗ trợ dự phòng cho các phần tử mới hơn như SVG.

Trang web cũng có một sân chơi tương tác cho bất cứ ai muốn thử thư viện trực tuyến mà không cần tải xuống một bản sao cục bộ.

Ban phước

Tôi nhớ khi Internet Explorer 6 vẫn còn phiền toái và thật tuyệt khi biết sự phát triển của IE đã được cải thiện - nhưng không nhiều. Mặc dù tôi muốn nói với bạn rằng việc sử dụng IE về cơ bản không còn nữa, nhưng điều này dường như không đúng.

Rất may, Bless CSS là một giải pháp mà phát hiện các vấn đề tiềm ẩn liên quan đến IE trong CSS của bạn và tạo các giải pháp xử lý hậu kỳ. Nó chạy trên Node.js, vì vậy nó phù hợp với quy trình làm việc NPM / Gulp điển hình.

CSSNext

Đây là một thư viện thực sự tuyệt vời cho phép bạn xây dựng CSS với chức năng nâng cao hơn hiện không được hỗ trợ. Thư viện CSSNext bao gồm hỗ trợ các chức năng CSS4 lẻ, nhu la màu xám (), hiện chỉ có trong bản nháp W3C.

Tôi không nghĩ mọi nhà phát triển sẽ cần thư viện này. Nó rất cụ thể và sẽ không giải quyết các vấn đề hàng ngày, tuy nhiên nó có thể cung cấp cho bạn một hương vị của thông số kỹ thuật CSS4 sắp tới trong khi chuyển đổi cú pháp xuống CSS3 hiện đại.

Bút ký

Nếu hỗ trợ trình duyệt là một vấn đề đối với bạn, thì Stylecow là một điều cần thiết. Thư viện mạnh mẽ này cho phép bạn phát triển CSS chỉ dành cho trình duyệt yêu thích của bạn. Sau đó, bạn có thể chạy công cụ dòng lệnh thông qua Node và CSS của bạn sẽ là cập nhật cho tất cả các trình duyệt bạn muốn hỗ trợ.

Bạn có thể tải xuống Stylecow từ GitHub và nó đi kèm với một số tài liệu cực kỳ chi tiết.

-không có tiền tố

Cuối cùng tôi muốn chia sẻ -không có tiền tố thư viện cũng là một công cụ yêu thích để phát triển CSS, vì nó cho phép bạn sử dụng các thuộc tính CSS chưa được chuẩn bị. Mọi người đều muốn sử dụng các thuộc tính CSS hiện đại, chẳng hạn như hình động và độ dốc, nhưng không ai muốn sao chép / dán mã dài dòng bằng tay.

Với plugin này, bạn thậm chí không phải chạy CSS thông qua bộ xử lý hậu trên máy tính. Nó cũng có thể hoạt động như một trình duyệt bao gồm chạy trên máy tính của người dùng để tự động cập nhật tập tin CSS.

Autoprefixer, một phần của thư viện PostCSS, thậm chí có thể là một lựa chọn tốt hơn cho xử lý hậu kỳ. Đó là lý do tại sao tôi đã nói trước đây rằng nếu bạn sử dụng LESS hoặc Sass cùng với PostCSS, thì bạn sẽ có mọi thứ bạn cần cho một quy trình phát triển CSS ấn tượng.

Kết thúc

Xử lý hậu kỳ là một cụm từ dễ hiểu hơn là một công nghệ thực sự, mặc dù nó có vị trí của nó trong quy trình làm việc CSS, như toàn bộ quá trình viết CSS hiện đại đã được tăng cường đáng kể bởi các công cụ này. Tôi chỉ có thể khuyên các nhà phát triển đào sâu hơn để tìm bất cứ điều gì tốt nhất cho họ.

Nếu bạn đang tìm kiếm thêm thông tin về xử lý hậu kỳ, hãy xem qua các bài viết liên quan sau:

• Điều gì sẽ cứu chúng ta khỏi Mặt tối của Bộ xử lý trước CSS?
• Nhìn vào việc viết CSS trong tương lai với PostCSS và cssnext
• Tiền xử lý CSS (SASS hoặc LESS) so với CSS Hậu xử lý