5 mẹo cho CSS siêu nhanh

Jan 23, 2026

Cách

Bạn đã nghĩ về kích thước của CSS của trang web của bạn? Nếu tấm phong cách của bạn đang bóng bay, nó có thể bị trì hoãn kết xuất trang.

16 ví dụ hoạt hình CSS hàng đầu

Mặc dù CSS không phải là loại tài sản lớn nhất, bạn sẽ phục vụ, đó là một trong những người đầu tiên mà trình duyệt phát hiện ra. Bởi vì trình duyệt bị chặn khỏi kết xuất trang cho đến khi CSS được tải xuống và phân tích cú pháp, nó phải càng gọn càng tốt. Dưới đây là năm mẹo để giúp bạn đến đó.

Có một trang web phức tạp? Bạn cần sự hoàn hảo web hosting dịch vụ. Hoặc, nếu bạn muốn tạo một trang web mà không cần phiền phức, hãy thử một người tạo ra trang web .

01. Sử dụng bộ chọn nông

Bố mẹ bạn nói với bạn rằng sự nông cạn không phải là một đức tính, nhưng khi nói đến CSS, họ đã sai. Được sử dụng nhất quán, các bộ chọn nông có thể cắt kilobyte tắt các tấm phong cách lớn. Lấy bộ chọn này:

nav ul li.nav-item

Điều này có thể được thể hiện ngắn gọn hơn:

.nav-item

Cũng như giúp giữ cho CSS Svelte của bạn, trình duyệt cũng sẽ hiển thị các phần tử được nhắm mục tiêu bởi các bộ chọn nông nhanh hơn. Các trình duyệt đọc bộ chọn từ phải sang trái. Các bộ chọn sâu hơn là càng lâu để trình duyệt hiển thị và hiển thị lại các yếu tố mà các bộ chọn đó được áp dụng cho. Đối với những chiếc DOM phức tạp phản xạ thường xuyên, các bộ chọn ngắn cũng có thể cắt giảm Jank.

Lý tưởng nhất, bạn muốn các bộ chọn là nông nhất có thể, nhưng điều này không có nghĩa là bạn nên cắt mọi thứ xuống xương. Đôi khi bạn cần thêm tính đặc hiệu để mở rộng các thành phần. Tấn công sự cân bằng phù hợp, nhưng cũng thực sự.

02. Sử dụng thuộc tính tốc ký

Using shorthand CSS will speed up your site — Sử dụng Shorthand CSS sẽ tăng tốc trang web của bạn

Điều này có vẻ như lẽ thường, nhưng bạn sẽ ngạc nhiên về mức độ thường xuyên của lâu dài được sử dụng không cần thiết. Dưới đây là một ví dụ về một số tính chất dài trong sử dụng:

 Kích thước phông chữ: 1,5rem;
chiều cao dòng: 1.618;
Font-Family: "Arial", "Helvetica", Sans-serif;

Đó là rất nhiều CSS! Hãy gọn gàng lên:

 Phông chữ: 1,5REM / 1.618 "Arial", "Helvetica", Sans-serif;

Các nét chữ Tài sản Shorthand ngưng tụ một số tuyên bố vào một lớp lót tiện dụng chiếm ít không gian hơn nhiều.

Trong ví dụ hiển thị ở trên, tốc ký sử dụng khoảng 40% ít hơn khoảng 40% so với tương đương lâu dài của nó. Nó không thể đọc được ngay từ cái nhìn đầu tiên, nhưng cú pháp trở thành bản chất thứ hai sau khi bạn dành thời gian sử dụng nó.

Tất nhiên, nét chữ không phải là tốc ký duy nhất có sẵn cho bạn. Ví dụ, lề có thể được sử dụng thay cho các thuộc tính dài hơn như lề-top Cái gì lề lề và như thế.

Các đệm tài sản hoạt động theo cùng một cách. Để biết thêm nhiều cách để dọn dẹp CSS, Mạng nhà phát triển Mozilla cung cấp một danh sách hữu ích về Tài liệu tham khảo tài sản Shorthand .

Điều gì sẽ xảy ra nếu bạn cần ghi đè một giá trị hơn nữa trong Cascade? Ví dụ: giả sử bạn có một yếu tố tiêu đề cần thay đổi kích thước phông chữ của nó cho màn hình lớn hơn.

Trong trường hợp này, bạn nên sử dụng cụ thể hơn cỡ chữ bất động sản thay thế:

 H1 {
    Phông chữ: 1,5rem / 1.618 "Arial", "Helvetica", Sans-serif;
Không thể
@Media (Chiều rộng tối thiểu: 60rem) {
    h1 {
        Kích thước phông chữ: 2rem;
    Không thể
}

Điều này không chỉ thuận tiện, nó còn làm tăng tính linh hoạt thành phần. Nếu bất kỳ phần nào khác của cơ sở nét chữ Tài sản được sửa đổi, những thay đổi đó sẽ hoan nghênh tối đa màn hình lớn hơn. Điều này hoạt động tuyệt vời cho các phần ghi đè thành phần nơi một bối cảnh mới đòi hỏi một phương pháp điều trị khác nhau.

03. Sử dụng Gợi ý tài nguyên tải trước

Các tải trước Gợi ý tài nguyên có thể cung cấp cho trình duyệt một đầu để tải CSS của trang web của bạn. Các tải trước Gợi ý tài nguyên cho trình duyệt bắt đầu tìm nạp sớm cho một tài sản.

Bạn có thể đặt nó như một & lt; link & gt; Thẻ trong HTML:

  & lt; link rel = "preload" href = "/ css / styles.css" as = "style" & gt;

Hoặc như một tiêu đề HTTP trong cấu hình máy chủ của bạn:


    link: & lt; /css/styles.css> ;; rel = tải trước; As = Style

Trong cả hai kịch bản này, tải trước cung cấp cho trình duyệt một đầu bắt đầu khi tải /css/styles.css. . Sử dụng tải trước Trong một tiêu đề HTTP là tốt hơn, vì điều này có nghĩa là trình duyệt sẽ phát hiện ra gợi ý trước đó trong các tiêu đề phản hồi, thay vì sau này trong thân phản hồi.

Một lý do khác để sử dụng tải trước Trong một tiêu đề HTTP là nó sẽ bắt đầu một sự kiện đẩy máy chủ trên hầu hết các triển khai HTTP / 2. Máy chủ đẩy là một cơ chế mà tài sản được ưu tiên đẩy đến máy khách khi yêu cầu nội dung được thực hiện và nó cung cấp các lợi ích hiệu suất tương tự như các nội tuyến CSS.

Máy chủ đẩy không khả dụng trên http / 1. Tuy nhiên, sử dụng tải trước Trong môi trường http / 1 vẫn có thể cải thiện hiệu suất.

04. Dự phòng của Cull với CSSCSS

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — CSSCSS sẽ phân tích bất kỳ tệp CSS nào bạn cung cấp cho nó và cho bạn biết các quy tắc nào đã sao chép các khai báo

Nó có thể thanh toán để kiểm tra CSS của bạn để biết các quy tắc trùng lặp với trình kiểm tra dự phòng. Ví dụ, hãy thực hiện các CSSCS dựa trên Ruby.

Người dùng Ruby có thể cài đặt nó với:


  Gem Cài đặt CSSCSS

Sau khi cài đặt, bạn có thể kiểm tra CSS của mình cho các khoản dự phòng như vậy:


  csscss -v styles.css

Lệnh này liệt kê những bộ chọn chia sẻ quy tắc mà bạn có thể sao chép để tiết kiệm không gian:

 {h1} và {p} chia sẻ 3 tuyên bố
  - Màu sắc: # 000
  - Chiều cao dòng: 1.618
  - Biên độ: 0 0 1,5rem

Bạn có thể di chuyển các quy tắc trùng lặp trong một bộ chọn:

 H1, P {
    Màu sắc: # 000;
    chiều cao dòng: 1.618;
    Biên độ: 0 0 1,5rem;
}

Bạn sẽ ngạc nhiên về bao nhiêu không gian quy trình này có thể tiết kiệm trong các dự án lớn. Sử dụng --Cứu giúp Tùy chọn để xem nhiều lệnh bạn có thể sử dụng để điều chỉnh thêm mọi thứ.

05. Đi thêm một dặm với CSSNANO

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — CSSNANO mất CSS được định dạng độc đáo của bạn và chạy nó thông qua nhiều tối ưu hóa tập trung

Đối với Cherry trên đầu, bạn có thể sử dụng CSSNANO. - một công cụ phụ thuộc một nút và postcss. CSSNANO không chỉ thu nhỏ CSS, nó tạo ra nhiều tối ưu hóa tập trung có thể làm giảm CSS của bạn nữa. Cài đặt nó trên hệ thống của bạn với NPM như vậy:

 NPM i -g cssnano-cli

Sau đó sử dụng nó để tối ưu hóa CSS của bạn:

 CSSNANO STYLE.CSS Tối ưu hóa-Styles.css

Nếu chạy các lệnh ad hoc không phải là phong cách của bạn, bạn có thể tự động hóa CSSNANO với hệ thống xây dựng. Đây là cách sử dụng CSSNANO trong GULPFILE:

 Const Gulp = yêu cầu ("Gulp");
Const postcss = yêu cầu ("Gulp-postcss");
const cssnano = yêu cầu ("cssnano");

const buildcss = () = & gt; {
    Trả về Gulp.SRC ("CSS / Kiểu chữ.css")
        .pipe (postcss ([cssnano ()])
        .pipe (Gulp.dest ("CSS / Tối ưu hóa"));
};
Const xem = () = & gt; {
    Gulp.Watch ("css / styles.csss", buildcss);
};
Xuất.Buildcss = buildcss;
Xuất.watch = xem;

Các buildcss. Nhiệm vụ đọc CSS bạn viết trong css / styles.css. , sau đó ống đầu ra được tối ưu hóa cho css / tối ưu hóa danh mục. Các đồng hồ đeo tay nhiệm vụ khởi động buildcss. Bất cứ khi nào thay đổi xảy ra trong css / styles.css. .

Các đồng hồ đeo tay Nhiệm vụ sau đó có thể được gọi trong thiết bị đầu cuối như vậy:

 Gulp Watch

Với một số tinh chỉnh, bạn có thể xây dựng một quy trình công việc thực hiện tối ưu hóa cụ thể này ngoài các nhiệm vụ liên quan đến CSS khác, chẳng hạn như xây dựng các tệp Sass / Ít hơn, AutoPrefixing và nhiều hơn nữa.

Bạn muốn lưu trang web của bạn? Xuất dưới dạng PDF và lưu trong đáng tin cậy lưu trữ đám mây .

Bài viết này ban đầu xuất hiện trong mạng lưới , Tạp chí hàng đầu thế giới cho các nhà thiết kế web. Đăng ký tại đây .

Những bài viết liên quan:

Hiểu thuộc tính Hiển thị CSS
Biên giới mới của hoạt hình CSS
Cách xây dựng bố cục phức tạp bằng CSS

5 mẹo cho CSS siêu nhanh

01. Sử dụng bộ chọn nông

02. Sử dụng thuộc tính tốc ký

03. Sử dụng Gợi ý tài nguyên tải trước

04. Dự phòng của Cull với CSSCSS

05. Đi thêm một dặm với CSSNANO

Cách - Các bài báo phổ biến nhất

Adobe XD: Cách sử dụng tính năng Auto-Animate

Tạo hiệu ứng Anaglyph cũ

Tạo một con người kỹ thuật số giống như thật

Cách tạo màu phát sáng với sơn dầu

Cách tạo proxy dịch chuyển đỏ trong rạp chiếu phim 4D

Cách tạo tóc trong rạp chiếu phim 4D

Tạo bảng điều khiển đáp ứng với Figma

Tăng tốc mô hình 3D của bạn

Thể loại