Share vì hữu ích

6 phút đọc

PostCSS là một xu hướng sử dụng CSS chuyển thể mới nổi lên từ năm 2016. Sự xuất hiện của nó đem lại khá nhiều tiện ích và được cộng đồng Lập trình Frontend khá ưa chuộng. Code Tốt xin giới thiệu những điểm nhấn và ứng dụng rộng rãi của PostCSS.

Mô phỏng sự đa-zi-năng của PostCSS
Mô phỏng sự đa-zi-năng của PostCSS

PostCSS là gì?

PostCSS ra đời vào cuối năm 2013 và được một số lượng lớn frontend developer ứng dụng vào các dự án của mình, bao gồm cả các công ty lớn như Google, Twitter, Shopify.

Vậy PostCSS là gì mà nổi đến thế?

Định nghĩa từ trên Github cho rằng đây là một công cụ để chuyển đổi style với các plugin JS, chẳng hạn như tối ưu CSS, hỗ trợ biến và mixins, sư dụng các công nghệ CSS của tương lai,…

Nói cách khác, đây là một framework mà bạn cài đặt hoặc tạo plugin JS để mô phỏng CSS của bạn. Nó chuyển CSS của bạn thành AST (abstract syntax tree), gửi nó tới bất kỳ plugin JS nào bạn đã cài, sau đó lấy kết quả. Điều này giúp PostCSS trở nên chẳng có giới hạn nào mà không thể làm.

PostCSS khác biệt so với SCSS, vì tính đa dạng và cấu trúc tương đồng CSS nhiều hơn.

Bản chất của PostCSS

Một điều tuyệt vời của công cụ này là nó mang tính modular rõ rệt. Bạn không cần cài đặt tất tần tật những gì thư viện có, mà có thể tự do lựa chọn những gì cần thiết nhất trong số các plugin. Chẳng hạn, các project cần hỗ trợ autoprefixer, lint CSS và compress cũng là đủ rồi.

Chính bởi cách tiếp cận này, có tới hơn 200 plugin có thể sử dụng cùng PostCSS. Bạn có thể lọc theo danh sách này tại đây.

Quay trở lại, rõ ràng cách tiếp cận về mặt cấu trúc như vậy làm mọi thứ trở nên nhanh đến bất ngờ, mà kiểm chứng rõ nhất là benchmark của PostCSS.

Sử dụng PostCSS và gulp

Bởi vì PostCSS được làm với JS, nó có thể được tích hợp với phần lớn các công cụ phổ biến như Gulp, Grunt, webpack hoặc npm. Trong ví dụ dưới đây, chúng ta sẽ thử làm điều đó với gulp.

PostCSS
PostCSS

Chuẩn bị

Để bắt đầu, hãy chắc chắn rằng bạn đang có sẵn trên máy:

Tất nhiên, bạn nên hiểu qua về cách sử dụng Git qua bài hướng dẫn phần 1phần 2 của Code Tốt thì tốt hơn.

Bắt đầu cài đặt

Ta cần tạo 1 thư mục chứa project mới.

Ta chạy npm init để cài đặt thiết lập cho package.json, gói cấu hình các package sẽ có trong project.

Cài đặt cả gulp và gulp-postcss package bằng terminal/cmd sau:

npm install --save-dev gulp gulp-postcss

Vẫn trong thư mục đó, ta tạo 2 thư mục tên là “src“(chứa file source chưa nén ta có thể sửa) và “dest“(chứa file đã được xử lý qua gulp).

Giờ ta tạo 1 file đặt tên là gulpfile.js với nội dung như sau:

var gulp = require('gulp');
var postcss = require('gulp-postcss');

gulp.task('css', function () {
  var plugins = [
  ];
  return gulp.src('./src/*.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('./dest'));
});

Nhìn qua thì rất dễ hiểu đúng không, chỉ đơn giản là xác định điểm đầu vào (là bất kì file nào .css nằm trong thư mục “src” và điểm đầu ra là thư mục “dest”.

Hãy thử test bằng cách tạo 1 file src/style.css, nhập 1 vài dòng style và chạy gulp css xem kết quả như thế nào nhé.

Thêm các plugin của PostCSS

Giờ ta sẽ cài đặt các package cần thiết bằng dòng lệnh:

npm install postcss-import autoprefixer cssnano --save-dev

postcss-import sẽ giúp nhập nhiều file CSS vào làm 1 file duy nhất sử dụng @import

autoprefixer sẽ giúp thêm các prefix cho các trình duyệt, chẳng hạn Safari hay Firefox và cả IE11, tương sự tương thích giữa các trình duyệt lên.

cssnano giúp minify (giảm dung lượng) file CSS đầu ra

Bây giờ ta sẽ cần đưa việc xử lý của các plugin này vào file gulpfile.js như sau:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var atImport = require('postcss-import');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
  var plugins = [
	atImport,
	autoprefixer,
	cssnano
  ];
  return gulp.src('./src/style.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('./dest'));
});

Có một chút thay đổi là với đường dẫn file CSS ta cần update lại để nó sử dụng file style.css làm đầu vào mà thôi.

Giờ hãy tự mình kiểm tra kết quả nhé.

Các thư viện sử dụng PostCSS

Rất nhiều các framework và library tận dụng thế mạnh của PostCSS để phát triển dành cho cộng đồng.

CSSNext.io cung cấp hàng loạt các cấu trúc sử dụng mới mà bạn không thể viết bằng CSS bình thường. Ví dụ như:

Custom media queries:

@custom-media --small-viewport (max-width: 30em);
@media (--small-viewport) {
  /* styles for small viewport */
}

Xác định thuộc tính và sử dụng:

:root {
  --mainColor: red;
}

a {
  color: var(--mainColor);
}

Nesting: class lồng trong class

a {
  /* direct nesting (& MUST be the first part of selector)*/
  & span {
    color: white;
  }
  /* @nest rule (for complex nesting) */
  @nest span & {
    color: blue;
  }
  /* media query automatic nesting */
  @media (min-width: 30em) {
    color: yellow;
  }
}

Tối ưu hình ảnh cho từng breakpoint khác nhau:

.foo {
    background-image: image-set(url(img/test.png) 1x,
                                url(img/test-2x.png) 2x,
                                url(my-img-print.png) 600dpi);
}

CSSNano.co cung cấp chức năng tối ưu kết quả đầu ra của file CSS giúp bạn có điểm số PageSpeed cao hơn.

Kết luận

Với tính đa dạng trong thư viện plugin, PostCSS trở nên mạnh mẽ hơn bao giờ hết khi bạn kết hợp sử dụng trong các project của mình.

Hãy dành thời gian lướt tìm các plugin phù hợp, thêm nhiều plugin nữa để tối ưu hoá và cho kết quả tốt nhất.

Tài nguyên tham khảo

Bài viết lược dịch nội dung từ SliceJack

Share vì hữu ích

Tác giả: Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

Trả lời