Giả sử bạn tìm hiểu về một tính năng CSS thực sự thú vị, chẳng hạn như lồng nhau. Nhưng khi bạn tiếp tục và dùng thử, bạn sẽ nhận ra rằng sự hỗ trợ thật tồi tệ và sẽ mất nhiều năm trước khi bạn có thể sử dụng nó. Đây từng là một vấn đề lớn trong CSS cho đến khi giới thiệu các bộ tiền xử lý như PostCSS.
Tìm hiểu cách PostCSS cho phép bạn sử dụng CSS hiện đại và tương lai trong quá trình phát triển. Bạn sẽ tìm hiểu chính xác PostCSS là gì, cách bạn có thể sử dụng nó và cách tốt nhất để tận dụng các tính năng của nó.
Thiết lập dự án
Điều hướng vào một thư mục trống, tạo một tệp có tên index.html và thêm đánh dấu HTML sau vào tệp:
<!DOCTYPE html>
<html lang="en"><head>
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<p>Paragraph</p>
<div>Div</div>
</body>
</html>
Tài liệu HTML này hiển thị một đoạn văn và
body p {
color: orange;
}body div {
color: blue;
}
body {
display: grid;
}
CSS này tạo kiểu cho màu của cả hai thành phần trên trang và tạo bố cục dạng lưới. Hầu hết các trình duyệt đều hỗ trợ cú pháp CSS bình thường như thế này. Nhưng khi bạn có tầm nhìn về cú pháp mới hơn, bạn sẽ cần đưa vào PostCSS.
Tạo Dự án Node.js và Cài đặt PostCSS
Nói một cách đơn giản, PostCSS cho phép bạn chuyển đổi CSS hiện đại thành thứ mà hầu hết các trình duyệt đều có thể hiểu được; một quá trình thường được gọi là transpiling. Điều này là hoàn hảo nếu bạn muốn thử các thuộc tính CSS mới, thử nghiệm hoặc phi tiêu chuẩn trong mã của mình mà các trình duyệt chính có thể không hỗ trợ.
PostCSS cũng cung cấp một hệ sinh thái bổ trợ JavaScript phong phú mà bạn có thể cài đặt để kích hoạt một số tính năng nhất định, chẳng hạn như thu nhỏ CSS, hỗ trợ màu sắc và hỗ trợ xơ vải.
Để sử dụng PostCSS, điều đầu tiên bạn cần làm là khởi tạo một dự án Node.js mới:
npm init -y
Lệnh này sẽ tạo tệp pack.json chứa các giá trị mặc định cho ứng dụng của bạn.
Tiếp theo, cài đặt cả PostCSS và PostCSS CLI. Gói thứ hai cho phép bạn chạy PostCSS từ dòng lệnh:
npm i --save-dev postcss postcss-cli
Các –save-dev cờ cài đặt cả hai gói npm dưới dạng phần phụ thuộc của nhà phát triển; bạn sẽ chỉ sử dụng PostCSS và các plugin của nó để xử lý mã CSS trong quá trình phát triển.
Để bắt đầu sử dụng PostCSS qua giao diện dòng lệnh, hãy truy cập gói.json tập tin và tạo đơn giản xây dựng: css lệnh để dịch mã với PostCSS:
"scripts": {
"build:css": "postcss src/styles.css --dir dest -w"
}
Lệnh này sẽ lấy CSS trần của bạn (được lưu trữ trong src/styles.css), biên dịch mã, sau đó xuất nó trong định mệnh thư mục. Chạy bản dựng npm: css lệnh tạo thư mục này và điền vào nó với phong cách.css tệp chứa mã có thể đọc được của trình duyệt.
Khi bạn đang nhập CSS của mình vào HTML, hãy đảm bảo rằng bạn nhập từ thư mục đích nơi bạn đang biên dịch CSS chứ không phải thư mục nguồn mà PostCSS biên dịch từ đó. Điều này, trong trường hợp của chúng ta, là quận thư mục, không phải src thư mục.
Nếu mở trang web của mình trong trình duyệt, bạn sẽ thấy rằng trang web vẫn truy cập CSS. Bất cứ khi nào bạn thực hiện các thay đổi đối với tệp nguồn, PostCSS sẽ biên dịch lại mã và các thay đổi sẽ phản ánh trên trang web.
Sử dụng plugin PostCSS
Có hàng trăm plugin PostCSS để thêm tiền tố, linting, hỗ trợ cú pháp mới và hàng chục tính năng khác cho PostCSS. Sau khi cài đặt plugin PostCSS, bạn kích hoạt nó bên trong postcss.config.js tệp — một tệp JavaScript mà bạn có thể sử dụng để thiết lập tất cả các cấu hình cho PostCSS.
cài đặt cssnano Plugin PostCSS bằng lệnh sau:
npm i --save-dev cssnano
Một lần nữa, bạn chỉ cần lưu các phụ thuộc này dưới dạng phụ thuộc dev. Lý do là tất cả những điều này xảy ra khi bạn đang phát triển. Bạn không cần PostCSS hoặc bất kỳ plugin nào của nó sau khi đưa trang web vào sản xuất.
Để sử dụng plugin cssnano mới được cài đặt, bạn phải thêm đoạn mã sau vào bên trong postcss.config.js tài liệu:
const cssnano = require("cssnano")module.exports = {
plugins: [
cssnano({
preset: 'defaults'
})
]
}
Bây giờ nếu bạn quay lại terminal và chạy lại lệnh build, điều này sẽ thu nhỏ CSS đầu ra (tức là làm cho mã càng nhỏ càng tốt). Vì vậy, khi bạn chuyển sang một trang web sẵn sàng sản xuất, nó sẽ làm cho CSS của bạn nhỏ nhất có thể.
Sử dụng các tính năng hiện đại như Nesting
Giả sử bạn muốn sử dụng cú pháp lồng trong biểu định kiểu của mình, vì vậy bạn thay thế khối đoạn văn trong src/styles.css Với cái này:
body {
& p {
color: orange;
}
}
Mã này giống với phiên bản trong mã khởi động của bạn. Nhưng điều này sẽ gây ra lỗi vì cú pháp này rất mới và hầu hết các trình duyệt web không hỗ trợ nó. Bạn có thể kích hoạt hỗ trợ cho cú pháp này với PostCSS bằng cách cài đặt postcss-preset-env cắm vào.
Plugin biên dịch một loạt các plugin khác nhau để xử lý CSS dựa trên giai đoạn của nó. Giai đoạn 0 đại diện cho các tính năng siêu thử nghiệm thậm chí có thể không được đưa vào CSS. Trong khi đó, giai đoạn 4 dành cho các tính năng ngôn ngữ đã là một phần của đặc tả CSS.
Theo mặc định, hiện tại-env sử dụng các tính năng ở giai đoạn 2 (có nhiều khả năng biến nó thành CSS). Nhưng bạn có thể thay đổi giai đoạn thành bất kỳ thứ gì bạn muốn trong tệp cấu hình.
Để cài đặt plugin, hãy chạy lệnh sau:
npm i --save-dev postcss-preset-env
Sau đó, trong của bạn postcss.config.js tệp, bạn phải nhập plugin và đăng ký nó:
const cssnano = require("cssnano")
const postcssPresetEnv = require("postcss-preset-env")module.exports = {
plugins: [
cssnano({
preset: 'defaults'
}),
postcssPresetEnv({ stage: 1})
]
}
Bạn chỉ nên vượt qua giai đoạn mã CSS mới mà bạn định sử dụng. Trong trường hợp này, chúng ta giả định rằng tính năng lồng nhau đang ở giai đoạn 1. Khi bạn chạy lại lệnh xây dựng và kiểm tra trình duyệt, bạn sẽ thấy rằng nó đã biên dịch mã lồng nhau thành CSS tiêu chuẩn mà trình duyệt có thể hiểu được.
Sử dụng PostCSS với Framework
Định cấu hình PostCSS theo cách thủ công có thể hơi khó khăn. Đây là lý do tại sao hầu hết tất cả các khung hiện đại đều đi kèm với các công cụ đóng gói (ví dụ: Vite, Snowpack và Parcel) và những công cụ này sẽ hỗ trợ tích hợp PostCSS. Và ngay cả khi họ không hỗ trợ, quá trình thêm hỗ trợ PostCSS cực kỳ dễ dàng.
Luôn nhớ rằng Vite và hầu hết các gói khác sử dụng Hệ thống mô-đun ES6, không phải CommonJS. Để giải quyết vấn đề này, bạn cần sử dụng nhập khẩu tuyên bố thay cho yêu cầu() trong bạn postcssconfig.js tài liệu:
import cssnano from "cssnano"
Miễn là bạn đã cài đặt plugin, mọi thứ sẽ hoạt động tốt.
Tìm hiểu thêm về SaSS
PostCSS chỉ là một trong hàng chục bộ tiền xử lý CSS hiện có. Một trong số đó là SaSS, viết tắt của biểu định kiểu cú pháp tuyệt vời.
Học cách sử dụng một bộ tiền xử lý chính khác có thể hữu ích với tư cách là nhà phát triển CSS.