Tôi có nên sử dụng PostCSS không?

đăngCSS. Chuyển đổi CSS bằng các plugin JS. PostCSS là một công cụ để chuyển đổi CSS bằng các plugin JS. Các plugin này có thể hỗ trợ các biến và mixin, dịch mã cú pháp CSS trong tương lai, hình ảnh nội tuyến, v.v.; . Cú pháp tuyệt vời Style Sheets. Sass là một phần mở rộng của CSS3, thêm các quy tắc lồng nhau, biến, mixin, kế thừa bộ chọn, v.v. Nó được dịch sang CSS tiêu chuẩn, được định dạng tốt bằng cách sử dụng công cụ dòng lệnh hoặc plugin khung web

PostCSS và Sass có thể được phân loại là các công cụ "Tiền xử lý CSS/Tiện ích mở rộng"

""Babel" của CSS" là lý do chính khiến các nhà phát triển coi PostCSS hơn các đối thủ cạnh tranh, trong khi "Các biến" được coi là yếu tố chính trong việc chọn Sass

PostCSS và Sass đều là công cụ mã nguồn mở. PostCSS với 21 nghìn sao GitHub và 1. 15K fork trên GitHub dường như phổ biến hơn Sass với 12K sao GitHub và 1. 93 nghìn nhánh GitHub

Theo cộng đồng StackShare, Sass được chấp thuận rộng rãi hơn, được đề cập trong 2082 ngăn xếp công ty & 1445 ngăn xếp nhà phát triển;

Bộ tiền xử lý CSS 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 của nó và phạm vi mở rộng của các plugin của nó có thể đạt được những gì

Giá trị và hạn chế của tiền xử lý

Hầu hết các nhà phát triển CSS đều quen thuộc với 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 phần tệp, lồng nhau, biến và mixin. Một số tính năng đang dần xuất hiện trong CSS gốc, nhưng bộ tiền xử lý vẫn hữu ích để quản lý các cơ sở mã lớn và duy trì tính nhất quán về phong cách và mã hóa

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 bộ 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ụ đó vẫn là không thể — chẳng hạn như đặt SVG làm hình nền

  Tương tự, bạn không thể ngăn 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ư

  npm install -g postcss-import
  

  2 hoặc lồng sâu. Linting có thể hữu ích, nhưng nó sẽ không ngăn bộ 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 riêng của chúng. Mã tiền xử lý có thể giống với 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 là gì?

PostCSS không phải là bộ tiền xử lý (mặc dù nó có thể hoạt động giống như vậy). Đó là một nút. js lấy CSS hợp lệ và nâng cao nó. Ngay cả những người sử dụng Sass, Less hoặc Stylus cũng thường chạy một bước PostCSS sau quá trình biên dịch CSS ban đầu. Bạn có thể đã gặp plugin PostCSS Autoprefixer tự động thêm tiền tố nhà cung cấp

npm install -g postcss-import

3,

npm install -g postcss-import

4 và ________0____5 vào các thuộc tính CSS yêu cầu chúng

Về bản thân, 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. Plugin có thể xử lý cây này và cập nhật các thuộc tính tương ứng. Khi tất cả các plugin đã hoàn thành công việc của chúng, PostCSS sẽ đị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ụ đơn lẻ như khai báo nội tuyến

npm install -g postcss-import

6, đơn giản hóa các hàm

npm install -g postcss-import

7, xử lý nội dung hình ảnh, linting cú pháp, rút ​​gọn, v.v. Tìm kiếm plugin thân thiện với người dùng hơn 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 tiêu chuẩn. PostCSS là CSS, Babel là gì đối với JavaScript. Nó có thể lấy một biểu định kiểu tiêu chuẩn hoạt động trong các trình duyệt gần đây và CSS đầu ra hoạt động ở mọi nơi — ví dụ: chuyển đổi thuộc tính

  npm install -g postcss-import
  

  8 mới hơn trở lại thành các thuộc tính

  npm install -g postcss-import
  

  9,

  /* src/main.css */
  @import '_reset';
  @import '_elements';
  

  0,

  /* src/main.css */
  @import '_reset';
  @import '_elements';
  

  1 và

  /* src/main.css */
  @import '_reset';
  @import '_elements';
  

  2. Theo thời gian, bạn có thể bỏ quy trình này khi có nhiều trình duyệt hỗ trợ

  npm install -g postcss-import
  

  8

  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 tiêu 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 bạn yêu cầu. Ví dụ: bạn có thể hỗ trợ các phần và lồng nhau nhưng không cho phép các biến, vòng lặp, mixin, 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ể tăng cường hoặc giảm bớt tập hợp các plugin được sử dụ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 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 hiếm khi xảy ra, 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

• Có thể bạn đang sử dụng PostCSS rồi. Bạn có thể xóa các phần phụ thuộc của bộ tiền xử lý nếu bạn đang chạy plugin PostCSS, chẳng hạn 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ộ xử lý trước, nhưng nó có thể xử lý tất cả quá trình xử lý CSS trong một bước

Cài đặt PostCSS

PostCSS yêu cầu Nút. 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à Node. dự án js. Bạn cũng có thể sử dụng PostCSS từ , nhưng chúng tôi sẽ sử dụng dòng lệnh

Cài đặt PostCSS trên toàn cầu 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ó hoạt động bằng cách nhập cái này

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 tuyến tất cả các khai báo

npm install -g postcss-import

6 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ư

/* src/main.css */
@import '_reset';
@import '_elements';

5, sau đó tạo thư mục con

/* src/main.css */
@import '_reset';
@import '_elements';

6 cho các tệp nguồn của bạn. Tạo một tệp

/* src/main.css */
@import '_reset';
@import '_elements';

7 để tải tất cả các phần

________số 8_______

Sau đó, tạo một tệp

/* src/main.css */
@import '_reset';
@import '_elements';

8 trong cùng một thư mục

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

Thực hiện theo điều này với một tệp

/* src/main.css */
@import '_reset';
@import '_elements';

9

/* 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 plugin tới

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

0 và tên tệp

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

1

postcss ./src/main.css --use postcss-import --output ./styles.css

Nếu bạn không có bất kỳ lỗi nào, đoạn mã sau sẽ được xuất ra tệp

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

2 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 các tệp CSS ở bất kỳ đâu, nhưng thư mục đầu ra phải tồn tại;

Kích hoạt và vô hiệu hóa 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ị tệp và dòng

/* src/main.css */
@import '_reset';
@import '_elements';

6 gốc. Ví dụ: xem kiểu

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

4 sẽ tô sáng dòng 2 của

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

5 thay vì dòng 8 của

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

Bạn có thể tạo bản đồ nguồn bên ngoài bằng cách thêm công tắc

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

7 (hoặc

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

8) vào lệnh

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

9. 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 bằng

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

0. 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à lần gặp đầu tiên của nhà phát triển với PostCSS. Nó thêm 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ố của 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ác cờ. Tuy nhiên, vẫn có những thuộc tính như

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

1 yêu cầu tiền tố

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

2,

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

3 và

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

4

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 tùy chọn

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

0 khác trên lệnh

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

9 của bạn

postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css

Kiểm tra khai báo

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

7 từ dòng 11 của

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

2 để xem các thuộc tính có tiền tố nhà cung cấp

postcss --help

0

AutoPrefixer sử dụng mô-đun danh sách trình duyệt để xác định tiền tố trình duyệt nào cần thêm. mặc định là

• /* src/elements.css */
  body {
    font-family: sans-serif;
  }
  
  label {
    user-select: none;
  }
  

  9. một trình duyệt có ít nhất 0. 5% thị phần

• postcss ./src/main.css --use postcss-import --output ./styles.css
  

  0. hai bản phát hành cuối cùng của các trình duyệt đó

• postcss ./src/main.css --use postcss-import --output ./styles.css
  

  1. bao gồm các bản phát hành hỗ trợ mở rộng của Firefox

• postcss ./src/main.css --use postcss-import --output ./styles.css
  

  2. bất kỳ trình duyệt nào không bị ngừng

Bạn có thể thay đổi các giá trị mặc định này bằng cách tạo tệp

postcss ./src/main.css --use postcss-import --output ./styles.css

3. Ví dụ

postcss --help

1

Hoặc bạn có thể thêm một mảng

postcss ./src/main.css --use postcss-import --output ./styles.css

4 vào

postcss ./src/main.css --use postcss-import --output ./styles.css

5 trong một Nút. dự án js. Ví dụ

postcss --help

2

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ố

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

2 trong Safari

postcss --help

3

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

postcss --help

4

Sau đó thêm nó vào lệnh

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

9 của bạn. Chúng tôi cũng sẽ bao gồm

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

0 để tắt bản đồ nguồn

postcss --help

5

Điều này làm giảm tệp CSS xuống còn 97 ký tự

postcss --help

6

Tự động xây dựng khi tệp nguồn thay đổi

Tùy chọn PostCSS

postcss ./src/main.css --use postcss-import --output ./styles.css

9 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

/* 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,...

0 báo cáo khi quá trình xây dựng diễn ra

postcss --help

7

Thiết bị đầu cuối của bạn sẽ hiển thị

/* 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,...

1. Thực hiện thay đổi đối với bất kỳ tệp nào và

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

2 được xây dựng 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 + C trong thiết bị đầu cuối

Tạo tệp cấu hình PostCSS

Lệnh

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

9 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 một 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ý liệu nó đang chạy trong môi trường phát triển hay sản xuất

Tạo một tệp cấu hình có tê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,...

4 trong thư mục gốc của thư mục dự án của bạn. Aso lưu ý những điều sau đây

• bạn có thể đặt tệp vào một thư mục khác, nhưng bạn cần chỉ định

  /* 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,...
  

  5 khi chạy

  /* src/reset.css */
  * {
    padding: 0;
    margin: 0;
  }
  

  9
• bạn có thể sử dụng

  /* 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,...
  

  7 làm tên tệp, nhưng PostCSS có thể bị lỗi trong Node. các dự án js có

  /* 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,...
  

  8 được đặt trong

  postcss ./src/main.css --use postcss-import --output ./styles.css
  

  5

Thêm đoạn mã sau vào

/* 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,...

4

postcss --help

8

PostCSS chuyển một đối tượng

npm install -g autoprefixer

1 chứa các tùy chọn dòng lệnh. Ví dụ

postcss --help

9

Mô-đun phải trả về một đối tượng có thuộc tính tùy chọn

• npm install -g autoprefixer
  

  2. cài đặt bản đồ nguồn

• npm install -g autoprefixer
  

  3. 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)

• npm install -g autoprefixer
  

  4. một loạt 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

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

9 có tùy chọn

npm install -g autoprefixer

6 hay không. Đây là lối tắt để đặt biến môi trường

npm install -g autoprefixer

7. Để biên dịch CSS ở chế độ phát triển, hãy chạy

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

9 với

npm install -g autoprefixer

9 và, tùy ý, đặt

postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css

0. Điều này tạo ra một bản đồ nguồn nội tuyến và không thu nhỏ đầu ra

npm install -g postcss-import

0

Để chạy trong chế độ sản xuất và biên dịch CSS được rút gọn mà không cần bản đồ nguồn, hãy sử dụng cái này

npm install -g postcss-import

1

Lý tưởng nhất là bạn có thể chạy chúng dưới dạng tập lệnh đầu cuối hoặc

postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css

1 để giảm thêm nỗ lực nhập liệu

Tiến độ PostCSS

Bây giờ bạn đã biết những kiến ​​thức cơ bản về PostCSS. Tăng cường chức năng là vấn đề thêm và định cấu hình các plugin khác. Hãy đầ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ể điều chỉnh cho bất kỳ dự án web nào

Hướng dẫn về cách sử dụng PostCSS làm 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à tùy chọn plugin

Liên kết khác

• Trang chủ PostCSS
• PostCSS CLI
• một danh sách plugin cho PostCSS
• một danh mục plugin có thể tìm kiếm cho PostCSS
• plugin trên npmjs. com cho PostCSS
• Viết plugin cho PostCSS

Chia sẻ bài viết này

Craig Buckler

Craig là một nhà tư vấn web tự do ở Vương quốc Anh, người đã xây dựng trang đầu tiên của mình cho IE2. 0 vào năm 1995. Kể từ thời điểm đó, anh ấy đã ủng hộ các tiêu chuẩn, khả năng truy cập và các kỹ thuật HTML5 thực hành tốt nhất. Anh ấy đã tạo các thông số kỹ thuật doanh nghiệp, trang web và ứng dụng trực tuyến cho các công ty và tổ chức bao gồm Nghị viện Vương quốc Anh, Nghị viện Châu Âu, Bộ Năng lượng & Biến đổi Khí hậu, Microsoft, v.v. Anh ấy đã viết hơn 1.000 bài báo cho SitePoint và bạn có thể tìm thấy anh ấy @craigbuckler

PostCSS có cần thiết không?

PostCSS có còn được sử dụng không?

Tôi nên sử dụng PostCSS hay Sass?

Tôi có thể sử dụng PostCSS với SCSS không?