PostCSS có còn phù hợp không?

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à

npm install -g postcss-import

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 xuất 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ỏ quá 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ừ webpack, Parcel, Gulp. js và các công cụ khác, 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-import

2

Đảm bảo nó hoạt động bằng cách nhập cái này

npm install -g postcss-import

3

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

npm install -g postcss-import

1

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

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

9

npm install -g postcss-import

3

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

npm install -g postcss-import

10 và tên tệp

npm install -g postcss-import

11

npm install -g postcss-import

6

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

npm install -g postcss-import

12 mới trong thư mục gốc của dự án

npm install -g postcss-import

8

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

npm install -g postcss-import

14 sẽ làm nổi bật dòng 2 của

npm install -g postcss-import

15 thay vì dòng 8 của

npm install -g postcss-import

12

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

npm install -g postcss-import

17 (hoặc

npm install -g postcss-import

18) vào lệnh

npm install -g postcss-import

19. 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

npm install -g postcss-import

30. 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ư

npm install -g postcss-import

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

npm install -g postcss-import

32,

npm install -g postcss-import

33 và

npm install -g postcss-import

34

Cài đặt plugin trên toàn cầu với cái này

npm install -g postcss-import

1

Sau đó tham chiếu nó như một tùy chọn

npm install -g postcss-import

10 khác trên lệnh

npm install -g postcss-import

19 của bạn

npm install -g postcss-import

4

Kiểm tra khai báo

npm install -g postcss-import

37 từ dòng 11 của

npm install -g postcss-import

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

npm install -g postcss-import

30

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à

• npm install -g postcss-import
  

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

• npm install -g postcss-import
  

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

• npm install -g postcss-import
  

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

• npm install -g postcss-import
  

  62. 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

npm install -g postcss-import

63. Ví dụ

npm install -g postcss-import

31

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

npm install -g postcss-import

64 vào

npm install -g postcss-import

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

npm install -g postcss-import

32

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ố

npm install -g postcss-import

32 trong Safari

npm install -g postcss-import

33

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 postcss-import

34

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

npm install -g postcss-import

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

npm install -g postcss-import

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

npm install -g postcss-import

35

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

npm install -g postcss-import

36

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

Tùy chọn PostCSS

npm install -g postcss-import

69 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

npm install -g postcss-import

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

npm install -g postcss-import

37

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

npm install -g postcss-import

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

npm install -g postcss-import

12 đượ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

npm install -g postcss-import

19 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

npm install -g postcss-import

84 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 sẽ cần chỉ định

  npm install -g postcss-import
  

  85 khi chạy

  npm install -g postcss-import
  

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

  npm install -g postcss-import
  

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

  npm install -g postcss-import
  

  88 được đặt trong

  npm install -g postcss-import
  

  65

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

npm install -g postcss-import

84

npm install -g postcss-import

38

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

npm install -g postcss-import

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

npm install -g postcss-import

39

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

• npm install -g postcss-import
  

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

• npm install -g postcss-import
  

  13. 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 postcss-import
  

  14. 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

npm install -g postcss-import

19 có tùy chọn

npm install -g postcss-import

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

npm install -g postcss-import

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

npm install -g postcss-import

19 với

npm install -g postcss-import

19 và, tùy chọn, đặt

npm install -g postcss-import

40. Đ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 đã 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 terminal hoặc

npm install -g postcss-import

41 để giảm thêm nỗ lực gõ

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 được sử dụng không?

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

Sass có còn cần thiết vào năm 2022 không?

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