Các bộ tiền xử lý CSS rất phổ biến, nhưng chúng có một số nhược điểm. Trong phần giới thiệu về PostCSS này, chúng ta sẽ khám phá những ưu điểm của PostCSS, cách thức hoạt động và phạm vi bổ sung rộng rãi của nó có thể đạt được những gì.
Giá trị và Hạn chế của Bộ tiền xử lý
Hầu hết các nhà phát triển CSS đều quen thuộc với các bộ tiền xử lý. Các công cụ bao gồm Sass, Less và Stylus đã giới thiệu các khái niệm như phân vùng tệp, lồng, biến và mixin. Một số tính năng đang dần xuất hiện trong CSS gốc, nhưng một bộ tiền xử lý vẫn hữu ích để quản lý các cơ sở mã lớn và duy trì sự nhất quán về kiểu dáng và mã hóa.
Có thể khó tưởng tượng cuộc sống mà không có bộ xử lý trước CSS, nhưng có những mặt trái:
- Các bộ tiền xử lý không thể mở rộng hoặc giới hạn được. Hầu hết các bộ tiền xử lý là một hộp đen cung cấp cho bạn một tập hợp các tính năng được hỗ trợ cụ thể. Có thể viết các chức năng tùy chỉnh, nhưng chức năng nằm ngoài phạm vi của công cụ đó là không thể – chẳng hạn như nội tuyến SVG làm hình nền. Tương tự, bạn không thể ngăn các nhà phát triển sử dụng các tùy chọn mà bạn muốn tránh, chẳng hạn như
@extendhoặc lồng ghép sâu. Linting có thể giúp ích, nhưng nó sẽ không ngăn bộ xử lý tiền xử lý biên dịch một tệp hợp lệ. - Bộ tiền xử lý cung cấp cú pháp của riêng họ. Mã tiền xử lý có thể giống CSS, nhưng không trình duyệt nào có thể phân tích cú pháp tệp nguyên bản. Cú pháp khác và, nếu công cụ của bạn thay đổi hoặc không khả dụng, mã của bạn sẽ yêu cầu cập nhật để có thể sử dụng được.
Những lợi ích nhiều hơn những rủi ro này, nhưng có một giải pháp thay thế…
PostCSS không phải là một bộ tiền xử lý (mặc dù nó có thể hoạt động giống như một bộ xử lý). Đó là một công cụ Node.js có CSS hợp lệ và nâng cao nó. Ngay cả những người sử dụng Sass, Less hoặc Stylus thường chạy một bước PostCSS sau khi biên dịch CSS ban đầu. Bạn có thể đã gặp phải plugin PostCSS Autoprefixer tự động -webkitthêm tiền tố -mozvà -mstiền tố của nhà cung cấp vào các thuộc tính CSS yêu cầu chúng.
Riêng mình, PostCSS không làm gì cả. Đó là một trình phân tích cú pháp mã hóa mã CSS để tạo một cây cú pháp trừu tượng. Một plugin có thể xử lý cây này và cập nhật các thuộc tính cho phù hợp. Khi tất cả các plugin đã hoàn thành công việc của chúng, PostCSS định dạng lại mọi thứ thành một chuỗi và xuất ra tệp CSS.
Khoảng 350 plugin có sẵn và hầu hết thực hiện một tác vụ duy nhất như khai báo nội tuyến@import , đơn giản hóa calc()các chức năng , xử lý nội dung hình ảnh , viết mã cú pháp , rút gọn và hơn thế nữa. Tìm kiếm plugin thân thiện hơn với người dùng có sẵn tại danh mục plugin PostCSS .
Các lợi ích của PostCSS bao gồm:
- Bạn bắt đầu với CSS chuẩn . PostCSS là CSS, còn Babel là JavaScript. Nó có thể lấy một biểu định kiểu chuẩn hoạt động trong các trình duyệt gần đây và xuất CSS hoạt động ở mọi nơi – ví dụ: chuyển thuộc tính mới hơn
insettrở lạitop,bottomvà thuộclefttínhright. Theo thời gian, bạn có thể bỏ quá trình này khi có nhiều trình duyệt hỗ trợ hơninset.Phải thừa nhận rằng một số plugin cho phép bạn phân tích cú pháp giống như bộ tiền xử lý không phải là CSS chuẩn, nhưng bạn không cần phải sử dụng chúng. - Sử dụng các plugin và tính năng bạn cần . PostCSS có thể định cấu hình và bạn có thể sử dụng các plugin mà bạn yêu cầu. Ví dụ: bạn có thể hỗ trợ các thành phần và lồng nhau nhưng không cho phép các biến, vòng lặp, kết hợp, bản đồ và các tính năng khác có sẵn trong Sass.
- Cung cấp cấu hình tùy chỉnh cho mọi dự án . Một cấu hình dự án riêng lẻ có thể nâng cao hoặc giảm bớt tập hợp các plugin được sử dụng ở những nơi khác. Các tùy chọn đa dạng hơn nhiều so với bất kỳ bộ tiền xử lý nào.
- Viết các plugin PostCSS của riêng bạn . Một loạt các plugin có sẵn để mở rộng cú pháp, phân tích cú pháp các thuộc tính trong tương lai, thêm dự phòng, tối ưu hóa mã, xử lý màu sắc, hình ảnh, phông chữ và thậm chí viết CSS bằng các ngôn ngữ khác như tiếng Tây Ban Nha và tiếng Nga .Trong trường hợp không chắc, bạn không thể tìm thấy thứ mình cần, bạn có thể viết plugin PostCSS của riêng mình bằng JavaScript.
- Bạn có thể đang sử dụng PostCSS rồi . Bạn có thể xóa phần phụ thuộc bộ xử lý trước của mình nếu bạn đang chạy plugin PostCSS như AutoPrefixer. PostCSS không nhất thiết phải nhanh hơn hoặc nhẹ hơn so với sử dụng bộ tiền xử lý, nhưng nó có thể xử lý tất cả các quá trình xử lý CSS trong một bước duy nhất.
Cài đặt PostCSS
PostCSS yêu cầu Node.js, nhưng hướng dẫn này trình bày cách cài đặt và chạy PostCSS từ bất kỳ thư mục nào – ngay cả những thư mục không phải là dự án Node.js. Bạn cũng có thể sử dụng PostCSS từ webpack, Parcel, Gulp.js và các công cụ khác, nhưng chúng ta sẽ sử dụng các dòng lệnh.
Cài đặt PostCSS trên toàn hệ thống của bạn bằng cách chạy như sau:
npm install -g postcss-cli
Đảm bảo nó hoạt động bằng cách nhập vào:
postcss --help
Cài đặt Plugin PostCSS đầu tiên của bạn
Bạn sẽ cần ít nhất một plugin để làm bất cứ điều gì thiết thực. Plugin nhập PostCSS là một tùy chọn tốt giúp nội dòng tất cả các @importkhai báo và hợp nhất CSS của bạn thành một tệp duy nhất. Cài đặt nó trên toàn cầu như vậy:
npm install -g postcss-import
Để kiểm tra plugin này, hãy mở hoặc tạo một thư mục dự án mới, chẳng hạn như cssproject, sau đó tạo một srcthư mục con cho các tệp nguồn của bạn. Tạo một main.csstệp để tải tất cả các phần:
/* src/main.css */
@import '_reset';
@import '_elements';
Sau đó, tạo một _reset.csstệp trong cùng một thư mục:
/* src/reset.css */
* {
padding: 0;
margin: 0;
}
Theo dõi điều này với một _elements.csstệp:
/* src/elements.css */
body {
font-family: sans-serif;
}
label {
user-select: none;
}
Chạy PostCSS từ thư mục gốc của dự án bằng cách chuyển tệp CSS đầu vào, danh sách các plugin --usevà --outputtên tệp:
postcss ./src/main.css --use postcss-import --output ./styles.css
Nếu bạn không có bất kỳ lỗi nào, mã sau sẽ được xuất ra styles.csstệp mới trong thư mục gốc của dự án:
/* src/main.css */
/* src/reset.css */
* {
padding: 0;
margin: 0;
}
/* src/elements.css */
body {
font-family: sans-serif;
}
label {
user-select: none;
}
/* sourceMappingURL=data:application/json;base64,...
Lưu ý rằng PostCSS có thể xuất tệp CSS ở bất kỳ đâu, nhưng thư mục đầu ra phải tồn tại; nó sẽ không tạo cấu trúc thư mục cho bạn.
Bật và tắt Bản đồ nguồn
Bản đồ nguồn nội tuyến được xuất theo mặc định. Khi tệp CSS đã biên dịch được sử dụng trong trang HTML, việc kiểm tra tệp đó trong các công cụ dành cho nhà phát triển của trình duyệt sẽ hiển thị srctệp và dòng gốc. Ví dụ: <body>kiểu xem sẽ đánh dấu src/_elements.cssdòng 2 thay vì styles.cssdòng 8.
Bạn có thể tạo bản đồ nguồn bên ngoài bằng cách thêm --map(hoặc -m) chuyển đổi vào postcsslệnh. Có rất ít lợi ích ngoài việc tệp CSS sạch hơn và trình duyệt không cần tải bản đồ nguồn trừ khi các công cụ dành cho nhà phát triển được mở.
Bạn có thể xóa bản đồ nguồn với --no-map. Luôn sử dụng tùy chọn này khi xuất tệp CSS để triển khai sản xuất.
Cài đặt và sử dụng plugin AutoPrefixer
Plugin Autoprefixer thường là ứng dụng đầu tiên của nhà phát triển với PostCSS. Nó thêm các tiền tố của nhà cung cấp theo cách sử dụng trình duyệt và các quy tắc được xác định tại caniuse.com . Tiền tố nhà cung cấp ít được sử dụng hơn trong các trình duyệt hiện đại ẩn chức năng thử nghiệm đằng sau cờ. Tuy nhiên, vẫn có các thuộc tính như là user-selectyêu cầu -webkit-và -moz-tiền -ms-tố.
Cài đặt plugin trên toàn cầu với cái này:
npm install -g autoprefixer
Sau đó, tham chiếu nó như một --usetùy chọn khác trong postcsslệnh của bạn:
postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css
Kiểm tra labelkhai báo từ dòng 11 của styles.cssđể xem các thuộc tính có tiền tố nhà cung cấp:
label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
AutoPrefixer sử dụng mô-đun danh sách trình duyệt để xác định các tiền tố trình duyệt cần thêm. Giá trị mặc định là:
> 0.5%: trình duyệt có thị phần ít nhất 0,5%last 2 versions: hai bản phát hành cuối cùng của các trình duyệt đóFirefox ESR: bao gồm Bản phát hành hỗ trợ mở rộng của Firefoxnot dead: bất kỳ trình duyệt nào không bị ngừng hoạt động
Bạn có thể thay đổi các giá trị mặc định này bằng cách tạo một .browserslistrctệp. Ví dụ:
> 2%
Hoặc bạn có thể thêm một "browserslist"mảng package.jsonvào dự án Node.js. Ví dụ:
"browserslist": [
"> 2%"
]
Việc nhắm mục tiêu các trình duyệt có thị phần từ 2% trở lên chỉ yêu cầu -webkit-tiền tố trong Safari:
label {
-webkit-user-select: none;
user-select: none;
}
Giảm thiểu CSS với cssnano
cssnano thu nhỏ CSS bằng cách loại bỏ khoảng trắng, nhận xét và các ký tự không cần thiết khác. Kết quả sẽ khác nhau, nhưng bạn có thể mong đợi giảm 30% tệp mà bạn có thể triển khai cho các máy chủ sản xuất để có hiệu suất trang web tốt hơn.
Cài đặt cssnano trên toàn cầu:
npm install -g cssnano
Sau đó, thêm nó vào postcsslệnh của bạn. Chúng tôi cũng sẽ bao gồm --no-mapđể tắt bản đồ nguồn:
postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css
Điều này làm giảm tệp CSS xuống còn 97 ký tự:
*{margin:0;padding:0}body{font-family:sans-serif}label{-webkit-user-select:none;user-select:none}Tự động tạo khi tệp nguồn thay đổi
Tùy chọn PostCSS --watchtự động tạo tệp CSS của bạn khi bất kỳ tệp nguồn nào thay đổi. Bạn cũng có thể muốn thêm công --verbosetắc báo cáo khi bản dựng xảy ra:
postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css --watch --verbose
Thiết bị đầu cuối của bạn sẽ hiển thị Waiting for file changes. Thực hiện thay đổi đối với bất kỳ tệp nào và styles.cssđược tạo lại. PostCSS cũng sẽ báo cáo bất kỳ vấn đề nào như lỗi cú pháp.
Để kết thúc, nhấn Ctrl| Cmd+ Ctrong thiết bị đầu cuối.
Tạo tệp cấu hình PostCSS
Lệnh postcsssẽ trở nên dài và rườm rà khi bạn thêm các plugin và tùy chọn khác. Bạn có thể tạo tệp cấu hình JavaScript xác định tất cả các tùy chọn và có thể xác định một cách hợp lý xem nó đang chạy trong môi trường phát triển hay sản xuất.
Tạo tệp cấu hình có tên postcss.config.cjstrong thư mục gốc của thư mục dự án của bạn. Cũng cần lưu ý những điều sau:
- bạn có thể đặt tệp vào một thư mục khác, nhưng bạn sẽ cần chỉ định
--config <dir>khi chạypostcss - bạn có thể sử dụng
postcss.config.jslàm tên tệp, nhưng PostCSS có thể không thành công trong các dự án Node.js đã"type": "module"đặt trongpackage.json
Thêm mã sau vào postcss.config.cjs:
// PostCSS configruation
module.exports = (cfg) => {
const devMode = (cfg.env === 'development');
return {
map: devMode ? 'inline' : null,
plugins: [
require('postcss-import')(),
require('autoprefixer')(),
devMode ? null : require('cssnano')()
]
};
};
PostCSS chuyển một cfgđối tượng chứa các tùy chọn dòng lệnh. Ví dụ:
{
cwd: '/home/yourname/cssproject',
env: undefined,
options: {
map: { inline: true },
parser: undefined,
syntax: undefined,
stringifier: undefined
},
file: {
dirname: '/home/yourname/cssproject/src',
basename: 'main.css',
extname: '.css'
}
}
Mô-đun phải trả về một đối tượng có các thuộc tính tùy chọn:
map: cài đặt bản đồ nguồnparser: có sử dụng trình phân tích cú pháp không phải CSS (chẳng hạn như plugin scss )plugins: một mảng các plugin và cấu hình để xử lý theo thứ tự được chỉ định
Đoạn mã trên phát hiện xem postcsslệnh có một --envtùy chọn hay không. Đây là một phím tắt để thiết lập NODE_ENVbiến môi trường. Để biên dịch CSS ở chế độ phát triển, hãy chạy postcssvới --env developmentvà, tùy chọn, đặt --watch --verbose. Điều này tạo ra một bản đồ nguồn nội tuyến và không thu nhỏ đầu ra:
postcss ./src/main.css --output ./styles.css --env development --watch --verbose
Để chạy ở chế độ sản xuất và biên dịch CSS được rút gọn mà không có bản đồ nguồn, hãy sử dụng cái này:
postcss ./src/main.css --output ./styles.css
Lý tưởng nhất là bạn có thể chạy chúng dưới dạng thiết bị đầu cuối hoặc npmtập lệnh để giảm bớt nỗ lực nhập liệu hơn nữa.
Tiến trình PostCSS
Bây giờ bạn đã biết những điều cơ bản về PostCSS. Nâng cao chức năng là vấn đề của việc thêm và định cấu hình các plugin khác. Đầu tư một chút thời gian và bạn sẽ sớm có một quy trình làm việc mà bạn có thể thích ứng cho bất kỳ dự án web nào.
Hướng dẫn về cách sử dụng PostCSS như một giải pháp thay thế có thể định cấu hình cho Sass cung cấp thêm các ví dụ cấu hình và các tùy chọn plugin.
