Các bộ tiền xử lý CSS (CSS preprocessor) 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 plugin đa dạng của nó có thể đạt được những gì.
Giá trị và hạn chế của Preprocessors (Bộ tiền xử lý)
Hầu hết các CSS developers đều quen thuộc với các preprocessors. 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 chia tệp (partials), lồng (nesting), biến (variables) 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ề style và coding.
Có thể khó tưởng tượng cuộc sống mà không có bộ tiền xử lý CSS, nhưng có những nhược điểm:
Bộ tiền xử lý không thể mở rộng hoặc giới hạn. 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ể. Nó 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 nó là không thể - chẳng hạn như nội tuyến (inline) SVG làm hình nền.
Tương tự, bạn không thể ngăn các developer 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 deep nesting. Linting có thể giúp ích, nhưng nó sẽ không ngăn bộ tiền xử lý compile một tệp hợp lệ.Bộ tiền xử lý cung cấp cú pháp của riêng chúng. Mã tiền xử lý có thể giống CSS, nhưng không trình duyệt nào có thể tự mình phân tích cú pháp tệp. Cú pháp có sự khác biệt 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.
Ta thấy lợi ích của bộ tiền xử lý hoàn toàn xứng đáng để bỏ qua những rủi ro trên, nhưng có một giải pháp thay thế…
PostCSS là gì?
PostCSS không phải là một preprocessor (mặc dù nó có thể hoạt động với vai trò tương tự). Đây là một công cụ Node.js dùng CSS hợp lệ và nâng cấp nó lên. Ngay cả những ai sử dụng Sass, Less hoặc Stylus thường chạy một bước PostCSS sau khi lần compile CSS ban đầu. Bạn có thể đã gặp qua plugin Autoprefixer plugin cho PostCSS giúp tự động thêm tiền tố vendor -webkit, -moz, và -ms vào trước các thuộc tính CSS cần chúng.
Đứng riêng, PostCSS không làm được gì cả. Nó là một trình phân tích cú pháp giúp token 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.
Có khoảng 350 plugin và hầu hết thực hiện một tác vụ duy nhất như khai báo inlining @import, đơn giản hóa hàm calc(), xử lý nội dung hình ảnh, syntax linting, minifying 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ắt đầu với CSS chuẩn. Vai trò của PostCSS với CSS giống như Babel với JavaScript vậy. Nó có thể lấy một stylesheet 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ụ: transpile thuộc tính
insetmới hơn trở lại các thuộc tínhtop,bottom,left, vàright. Theo thời gian, bạn có thể bỏ quá trình này khi có nhiều trình duyệt hỗ trợinsethơn.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-preprocessor (chứ 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 cần. Ví dụ: bạn có thể hỗ trợ partials và nesting nhưng không cho phép các biến, vòng lặp, mixin, map 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 bộ plugin được sử dụng ở những nơi khác. Các tùy chọn của PostCSS đ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 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 may mà 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 preprocessor dependency trước của mình nếu bạn đang chạy một plugin PostCSS như AutoPrefixer. PostCSS không nhất thiết phải nhanh hơn hoặc nhẹ hơn so với việc sử dụng bộ tiền xử lý, nhưng nó có thể hoàn tất tất cả các quá trình xử lý CSS trong một bước duy nhất.
Cách cài đặt PostCSS
PostCSS yêu cầu Node.js, nhưng hướng dẫn này sẽ 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 cứ bám sát theo cách dùng dòng lệnh nhé.
Cài đặt PostCSS globally trê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ó đang 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 để thực hiện bất kỳ điều gì thiết thực. Plugin PostCSS import là một tùy chọn tốt giúp inline tất cả các khai báo @import và hợp nhất CSS của bạn thành một tệp duy nhất. Cài đặt nó globally như sau:
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 thư mục con src cho các tệp nguồn của bạn. Tạo tệp main.css để tải tất cả các phần tử:
/* src/main.css */
@import '_reset';
@import '_elements';
Then create a _reset.css file in the same folder: Sau đó, tạo một tệp _reset.css trong cùng một thư mục:
/* src/reset.css */
* {
padding: 0;
margin: 0;
}
Làm theo dưới với tệp _elements.css:
/* 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 đểo --use và tên tệp --output:
postcss ./src/main.css --use postcss-import --output ./styles.css
Nếu bạn không gặp bất kỳ lỗi nào, mã sau sẽ được xuất ra tệp styles.css mới trong thư mục gốc (root) 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.
Tắt mở Source Map
Source map inline được xuất theo mặc định. Khi tệp CSS đã compile được sử dụng trong trang HTML, việc kiểm tra tệp đó trong công cụ dành cho nhà phát triển của trình duyệt sẽ hiển thị dòng và tệp src gốc. Ví dụ: việc xem các kiểu <body> sẽ làm nổi bật src/_elements.css dòng 2 thay vì styles.css dòng 8.
Có một chút lợi ích bên cạnh việc tệp CSS rõ ràng hơn và trình duyệt không cần tải source mao trừ khi các công cụ dành cho nhà phát triển được mở.
Bạn có thể xóa source mao bằng --no-map. Luôn sử dụng tùy chọn này khi xuất tệp CSS cho giai đoạn production deployment.
Cài đặt và sử dụng plugin AutoPrefixer
Plugin Autoprefixer thường là màn làm quen đầu tiên của nhà phát triển với PostCSS. Nó thêm các vendor prefix theo cách sử dụng trình duyệt và các quy tắc được xác định tại caniuse.com. Vendor prefix (ít được sử dụng hơn trong các trình duyệt hiện đại) sẽ ẩn chức năng thử nghiệm đằng sau flag. Tuy nhiên, vẫn có các thuộc tính như user-select yêu cầu các tiền tố -webkit-, -moz-, and -ms-.
Cài đặt plugin globally với lệnh sau:
npm install -g autoprefixer
Sau đó, tham chiếu nó như một tùy chọn --use khác trên lệnh postcss của bạn:
postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css
Kiểm tra khai báo label từ dòng 11 của styles.css để xem các thuộc tính được vendor-prefix:
label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
AutoPrefixer sử dụng mô-đun browserlist để xác định các browser prefix cần thêm. Giá trị mặc định là:
> 0.5%: trình duyệt có ít nhất 0,5% thị phầnlast 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 tệp .browserslistrc. Ví dụ:
> 2%
Hoặc bạn có thể thêm mảng "browserslist" vào package.json trong 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 tiền tố-webkit- trong Safari:
label {
-webkit-user-select: none;
user-select: none;
}
Minify CSS với cssnano
cssnano minify CSS bằng cách loại bỏ khoảng trắng, comment 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ể giảm đến khoảng 30% tệp cần triển khai cho các production server để có hiệu suất trang web tốt hơn.
cài đặt cssnano globally:
npm install -g cssnano
Sau đó, thêm nó vào lệnh postcss 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 build khi tệp nguồn thay đổi
Tùy chọn PostCSS --watch tự độ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 tắc --verbose để 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 sẽ được rebuild. 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 + C trong terminal.
Tạo tệp PostCSS Configuration
Lệnh postcss sẽ 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 theo logic xem tệp đ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.cjs trong 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ạypostcssbạn có thể sử dụngpostcss.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 có"type": "module"được đặ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 pass đi một đối tượng cfg 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 của source mapparser: có sử dụng trình phân tích cú pháp không phải CSS hay không (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 lệnh postcss có tùy chọn --env hay không. Đây là một phím tắt để thiết lập biến môi trường NODE_ENV. Để biên dịch CSS ở chế độ phát triển, hãy chạy postcss với --env development và, nếu muốn, có thể set thêm --watch --verbose. Điều này tạo ra một inline source map và minify đầu ra:
postcss ./src/main.css --output ./styles.css --env development --watch --verbose
Để chạy ở chế độ production, và compile CSS được rút gọn không có source map, hãy sử dụng lệnh 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 lệnh terminal hoặc npm để bớt phải type nhiều.
Tiến đọ PostCSS
Bây giờ bạn đã biết những điều cơ bản về PostCSS. Nâng cao chức năng sẽ liên quan đến 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à mình có thể điều chỉnh cho bất kỳ dự án web nào.
Đọc thêm:
- PostCSS home page
- PostCSS CLI
- a plugins list for PostCSS
- a searchable catalog of plugins for PostCSS
- plugins on npmjs.com for PostCSS
- Writing a plugin for PostCSS
- Theo Sitepoint
Nhận xét
Đăng nhận xét