Cân nhắc về bộ chọn CSS. Ưu tiên kiểu dáng trong CSS

sẽ hoạt động tốt và khai báo từ dòng 3 sẽ bị gián đoạn bởi khai báo từ dòng 6 (vì nó có tính đặc hiệu hơn). Văn bản bên trong div của chúng ta sẽ có màu xanh lục nhưng không đậm.

Cái này ví dụ đơn giản nhất cho thấy tầm quan trọng của việc có thể đếm được các đặc tính. Đầu tiên, tôi luôn có thể tạo bộ chọn phù hợp để quảng cáo tôi cần sẽ chiến thắng. Thứ hai, nếu một số quảng cáo không hoạt động, bạn sẽ hiểu ngay lý do và tiết kiệm rất nhiều thời gian cho việc gỡ lỗi.

Lưu ý rằng độ đặc hiệu của bộ chọn định danh (0,1,0,0) luôn cao hơn độ đặc hiệu của bộ chọn thuộc tính (0,0,1,0). Ngay cả khi thuộc tính này là ! Đó là lý do tại sao:

Đầu vào Form.feedback ( color: #f00; /* Độ đặc hiệu 0,0,2,2. */ ) #name ( color: #0f0; /* Độ đặc hiệu 0,1,0,0. - win! */ )

Phong cách tích hợp

Về lý thuyết, lẽ ra ai đó phải hỏi từ lâu, tại sao trên thực tế lại có chữ số đầu tiên cụ thể? Rốt cuộc, chúng tôi chưa sử dụng nó theo bất kỳ cách nào!

Đúng rồi. Chữ số đầu tiên được dành riêng cho kiểu nội tuyến. Độ đặc hiệu của chúng được coi là 1.0,0.0. Do đó, kiểu nội tuyến luôn ghi đè kiểu được chỉ định trong biểu định kiểu bên ngoài hoặc lồng nhau. Ví dụ:

Ngay cả khi chúng tôi sử dụng bộ chọn mã định danh, chúng tôi sẽ không ghi đè kiểu nội tuyến.

Div#box ( color: #00f; /* Độ đặc hiệu 0,1,0,1. - không đủ */ )

Điều đó có nghĩa là gì? Không có quyền kiểm soát các phong cách tích hợp?

Đừng lo lắng. Tất nhiên, có một cách để ghi đè các kiểu nội tuyến (và đồng thời tất cả các khai báo khác).

Thông báo!quan trọng

Nếu thực sự cần, bạn có thể đánh dấu một số quảng cáo là quan trọng. Một quảng cáo như vậy sẽ được coi là người chiến thắng khi so sánh các đặc điểm cụ thể. Có, vâng, bao gồm cả phong cách chiến thắng và phong cách tích hợp. Hãy thay đổi CSS một chút cho ví dụ trước:

Div ( color: #00f !quan trọng; /* thông báo quan trọng - chiến thắng ngay lập tức! */ )

Ngay cả bộ chọn loại, vốn có độ đặc hiệu yếu (0,0,0,1), đã vượt qua được kiểu dựng sẵn, vì việc khai báo nó giờ đây đã trở nên quan trọng!

Chi tiết ứng dụng! quan trọng được mô tả rõ ràng trong Tham khảo CSS. Nếu bạn muốn biết thêm chi tiết, hãy theo liên kết.

Bây giờ bạn đã được trang bị kiến ​​thức về tính đặc hiệu, bạn có thể tiếp tục khám phá tính kế thừa trong CSS.

TRONG dự án lớn khi lớn lên CSS tập tin, tình hình không được vui cho lắm. Bởi vì số lượng lớn quy tắc, việc xác định kiểu nào sẽ được áp dụng cho một phần tử cụ thể sẽ trở nên khó khăn. Một số kiểu được kế thừa, một số kiểu khác được xác định thông qua toàn bộ chuỗi các bộ chọn khác nhau và được sử dụng ở đâu đó .lớp học, một vài nơi #nhận dạng, và ở đâu đó nói chung kiểu nội tuyến.

Để thay đổi kiểu cho một phần tử, chúng ta phải thử nghiệm với các trọng số của bộ chọn. Để làm cho công việc của chúng tôi dễ dàng hơn, chúng tôi có thể làm theo một số nguyên tắc:

1. Không bao giờ sử dụng NHẬN DẠNG bộ chọn trong CSS. Họ không có lợi thế hơn lớp học.
   • Mọi thứ bạn có thể làm với NHẬN DẠNG, có thể được thực hiện với lớp học.
   • NHẬN DẠNG không thể tái sử dụng được.
   • Cân nặng NHẬN DẠNG rất lớn. Ngắt NHẬN DẠNG thậm chí không có một trăm dây chuyền các lớp học.
2. Đừng tạo các bộ chọn không cần thiết. Nếu như .header-nav() hoạt động tốt, sau đó không sử dụng định nghĩa .header .header-nav(). Trong trường hợp này, sẽ không có gì thay đổi và sẽ không có lợi ích gì từ nó.
3. Đừng tạo các bộ chọn cụ thể cho đến khi bạn thực sự cần. Nếu như .nav() có tác dụng thì đừng dùng ul.nav(). Ký hiệu như vậy sẽ chỉ làm giảm các tùy chọn sử dụng lớp này. .nav và cũng sẽ làm tăng trọng lượng của bộ chọn mà không mang lại lợi ích rõ ràng.
4. Buộc bản thân phải sử dụng .lớp học, bởi vì đây là những bộ chọn lý tưởng.

Không bao giờ sử dụng bộ chọn nặng hơn mức cần thiết.

Tất cả đều rất quy tắc đơn giản và theo dõi họ không quá khó khăn.

giảm trọng lượng ID

Giả sử bạn có một tiện ích trên trang của mình và bạn muốn tạo kiểu cho nó:

Và, ví dụ, chúng ta không thể thay đổi HTML mã widget để loại bỏ NHẬN DẠNG. Vì vậy, chúng tôi làm điều này:

#tiện ích ( ... )

Kết quả là chúng ta có định nghĩa cho NHẬN DẠNG V. CSS tập tin, điều này không tốt chút nào. Thay vào đó chúng ta có thể làm như sau:

{ ... }

Đây là một bộ chọn thuộc tính. TRONG trong trường hợp nàyđây không còn là một định nghĩa cho NHẬN DẠNG, và cho phần tử. Nói chính xác hơn, bộ chọn đang nói: “Này, hãy tìm cho tôi một phần tử có thuộc tính nhận dạng có ý nghĩa tiện ích».

Cái hay của phương pháp này là chúng ta đã giảm được trọng lượng NHẬN DẠNG lên đến trọng lượng lớp. Nhưng đây là một hack.

Tăng cân an toàn

Chúng ta có thể tăng trọng số của bộ chọn như thế này:

Btn.btn.btn.btn ( ... )

Nhưng tôi hy vọng rằng tôi sẽ không bao giờ phải sử dụng cách ghi âm như vậy trong các dự án.

Ở đây chúng ta thấy rằng màu được chỉ định trong .box a(), ghi đè màu của văn bản nút. Kết quả là văn bản sẽ hợp nhất với nền của nút.

Tất nhiên chúng ta có thể khắc phục điều này nếu chúng ta đặt !quan trọng(jsfiddle.net/csswizardry/3N53n/1) nhưng không, cảm ơn, hãy loại bỏ điều đó!

Chúng ta có thể thêm một bộ chọn bổ sung vào phần .btn()(dòng 23) jsfiddle.net/csswizardry/3N53n/2 , nhưng đây không phải là nhiều nhất Quyết định tốt nhất. Điều gì sẽ xảy ra nếu vấn đề với nút không chỉ .hộp, và bất cứ nơi nào khác? Thêm một bộ chọn mới mỗi lần là một lựa chọn tồi.

Vì vậy chúng tôi sẽ nhân đôi .btn.btn: http://jsfiddle.net/csswizardry/3N53n/3

Đây cũng không phải là giải pháp tốt nhất, nhưng chúng tôi vẫn tăng trọng lượng của bộ chọn và màu sắc trên nút bây giờ vẫn như cũ.

Bây giờ chúng ta đã biết 2 cách để thay đổi trọng số của bộ chọn, nhưng hãy nhớ rằng đây vẫn là những cách hack và bạn không nên quá lo lắng về chúng.

Từ tác giả: hãy nghĩ về tính đặc hiệu như một điểm số hoặc mức độ quyết định kiểu nào sẽ áp dụng cho một phần tử. Bộ chọn phổ quát (*) có độ đặc hiệu thấp. Bộ chọn id cao. Bộ chọn cha loại p img và bộ chọn con loại .panel > h2 có độ đặc hiệu cao hơn bộ chọn loại p, img và h1.

Lúc đầu tính toán có vẻ khó khăn giá trị chính xác tính đặc hiệu. Thông số kỹ thuật của Bộ chọn cấp 3 nói rằng để thực hiện việc này, bạn cần:

bỏ qua bộ chọn phổ quát.

Các giá trị của A, B và C cùng nhau cho ra giá trị cuối cùng tính đặc hiệu. Bộ chọn ID loại #foo có độ đặc hiệu là 1,0,0. Bộ chọn thuộc tính loại và các lớp type.chart có độ đặc hiệu 0,1,0. Nếu bạn thêm một lớp giả thuộc loại:con đầu (ví dụ: .chart:con đầu), độ đặc hiệu sẽ trở thành 0.2.0. Nhưng các bộ chọn phần tử hoặc tiêu chuẩn đơn giản như h1 và p chỉ cho 0,0,1.

Lưu ý: Tính toán độ đặc hiệu

Bạn có thể tìm hiểu và tính toán độ đặc hiệu của bộ chọn bằng cách sử dụng tài nguyên Máy tính độ đặc hiệu từ phố Keegan và Giải thích CSS của Joshua Peek.

Bộ chọn và bộ kết hợp phức tạp đương nhiên mang lại tính đặc hiệu cao hơn. Hãy sắp xếp nó ra Ví dụ về CSS:

ul#story-list > .book-review ( color: #0c0; ) #story-list > .book-review ( color: #f60; )

ul #story-list > .book-review ( màu : #0c0; #story-list > .book-review ( màu : #f60;

Những quy tắc này tương tự nhau, nhưng không giống nhau. Bộ chọn đầu tiên, ul#story-list > .bookreview, chứa bộ chọn loại (ul), bộ chọn ID (#story-list) và một lớp (.bookreview). Độ đặc hiệu là 1.1.1. Bộ chọn thứ hai #story-list > .book-review chỉ lưu trữ ID và lớp. Độ đặc hiệu là 1.1.0. Mặc dù #story-list > .book-review được khai báo bên dưới ul#story-list > .bookreview, tính đặc hiệu cao của cái sau khiến các phần tử có lớp .book-review chuyển sang màu xanh lục thay vì màu cam.

Các lớp giả:link và:invalid có cùng đặc tính như các lớp. a:link và a.external sẽ có cùng độ đặc hiệu là 0,1,1. Tương tự, các phần tử giả như ::trước và ::after có cùng đặc tính như bộ chọn loại và phần tử. Nếu hai bộ chọn có cùng độ đặc hiệu thì tính năng xếp tầng sẽ phát huy tác dụng. Ví dụ:

a:link ( color: #369; ) a.external ( color: #f60; )

đường dẫn ( màu : #369; Một. bên ngoài( màu : #f60;

Giữ độ đặc hiệu ở mức thấp giúp ngăn chặn sự thay đổi của bộ chọn hoặc xu hướng độ đặc hiệu liên tục tăng. Điều này thường xảy ra khi các nhà phát triển mới tham gia nhóm hoặc khi các dạng nội dung mới được thêm vào trang web. Sự thay đổi của bộ chọn cũng làm tăng thêm vấn đề đau đầu khi bảo trì dài hạn. Bạn sẽ sử dụng các bộ chọn ngày càng cụ thể hơn để viết lại các quy tắc hoặc bạn sẽ phải cấu trúc lại mã. Bộ chọn dài tăng trọng lượng CSS các tập tin.

Trong Chương 2 chúng ta sẽ thảo luận cách duy trì độ đặc hiệu thấp.

Phần kết luận

Sau khi đọc chương này, bạn sẽ hiểu rõ về bộ chọn CSS. Đặc biệt bạn nên biết:

cách sử dụng bộ chọn và áp dụng kiểu cho các phần tử, phần tử giả và lớp giả cụ thể;

hiểu sự khác biệt giữa các phần tử giả và các lớp giả;

sử dụng các lớp giả mới được giới thiệu trong thông số kỹ thuật của Bộ chọn cấp 3 và 4;

tính toán độ đặc hiệu.

Trong chương tiếp theo, chúng ta sẽ đề cập đến các quy tắc vàng về viết mã CSS có thể duy trì và mở rộng.

Một phần tử HTML có thể là mục tiêu một số quy tắc CSS. Hãy sử dụng một đoạn văn đơn giản làm ví dụ:

Chúng ta có thể thay đổi đoạn này đơn giản bằng cách sử dụng tên thẻ:

P (màu: xanh; )

Hoặc chúng ta có thể sử dụng tên lớp:

Tin nhắn (màu: xanh; )

Hoặc chúng ta có thể sử dụng định danh:

#giới thiệu (màu: đỏ; )

Vì trình duyệt chỉ có thể chọn một màu và áp dụng nó vào đoạn này thì anh ta phải quyết định cái nào quy tắc CSS Nó có một ưu tiên hơn người khác. Điều này được gọi là mức độ ưu tiên trong CSS (hoặc tính đặc hiệu).

Trong ví dụ của chúng tôi, đoạn văn sẽ là màu đỏ, bởi vì định danh hơn cụ thể và do đó hơn thế nữa quan trọng hơn các bộ chọn khác.

Thứ tự các quy tắc CSS

Nếu bạn có các bộ chọn giống hệt nhau trong CSS thì bộ chọn cuối cùng sẽ được ưu tiên.

P ( color: green; ) p ( color: red; ) /* Đoạn văn sẽ có màu đỏ */

Phép tính 100

Chỉ có một đường tắt tìm hiểu mức độ "mạnh" của quy tắc CSS bằng cách tính toán độ đặc hiệu bộ chọn:

• số nhận dạng giá 100;
• các lớp học giá 10;
• bộ chọn nhãn chi phí 1.

Người chọn có "điểm" cao nhất sẽ thắng thế, bất kể thứ tự xuất hiện của các quy tắc CSS.

#introduction ( color: red; ) .message ( color: green; ) p ( color: blue; )

MarkSheet là hướng dẫn miễn phí về HTML và CSS.

Quy tắc #introduction ( color: red; ) cao hơn cụ thể hơn những người khác vì số nhận dạng phải độc nhất xuyên suốt toàn bộ trang web, vì vậy chỉ có thể có một phần tử mục tiêu.

Thông báo ( color: green; ) sẽ nhắm mục tiêu bất kì Một phần tử HTML có thuộc tính class="message" và do đó ít cụ thể hơn. Điều tương tự cũng áp dụng cho p ( color: blue; ), có thể dành cho bất kìđoạn văn.

Làm thế nào để tránh xung đột

Trong khi viết CSS, vấn đề có thể dễ dàng phát sinh. quy tắc mâu thuẫn, trong đó cùng một thuộc tính được áp dụng nhiều lần.

Để tránh điều này:

• chỉ sử dụng các lớp học: Sử dụng .introduction thay vì #introduction ngay cả khi phần tử này chỉ xuất hiện một lần trên trang web của bạn;
• tránh sử dụng một số lớp họcđến một phần tử HTML: không viết

  MỘT

  Cái nào mang tính mô tả nhiều hơn về mặt ngữ nghĩa;

• không được dùng kiểu nội tuyến, chẳng hạn như
  .

Giống như bất kỳ bài viết nào của tôi, bài viết này bắt đầu bằng phần giới thiệu. Để khỏi phải nói ngôn ngữ khác nhau, hãy bắt đầu với những điều cơ bản nhất trong thế giới CSS, tức là với thuật ngữ. Tôi cảm thấy mình giống như một giáo viên ở trường đại học - điều đó thật tuyệt vời.

Để hiểu thành công CSS và trở thành một chuyên gia giỏi trong lĩnh vực này, trước tiên bạn cần hiểu cái được gọi là bộ chọn. Hình ảnh dưới đây cho thấy cấu trúc đơn giản nhất Quy tắc CSS.

Bộ chọn là một chuỗi đại diện mô tả chính thức cấu trúc trên cơ sở đó một phần tử hoặc nhóm phần tử được chọn trong cây tài liệu và áp dụng khối thuộc tính đã khai báo.

Có nhiều loại bộ chọn khác nhau. Có các bộ chọn đơn giản, ví dụ, bao gồm một chữ cái hoặc một từ và các bộ chọn phức tạp, bao gồm một số lượng lớn các từ và các cấu trúc cú pháp khác nhau.

Tôi sẽ không đi sâu vào chi tiết về việc bộ chọn phải bắt đầu bằng một chữ cái và một số ký tự khác. Tôi cũng sẽ không nói về những sự thật nhàm chán có thể tìm thấy trong bất kỳ bài viết nào về chủ đề này Khái niệm cơ bản về CSS. Bài viết này sẽ nói về tầm quan trọng của bộ chọn CSS và nếu chúng ta nói bằng ngôn ngữ đơn giản- về anh ấy biểu diễn số và sự hiểu biết.

Trọng lượng bộ chọn

Không, chúng tôi không nói về họ ở đây trọng lượng thực(không có), cũng như số lượng ký tự. Trọng lượng như vậy không thể đo được bằng cân, vì nó không phải là vật chất theo nghĩa thông thường và hoàn toàn không tồn tại trong thế giới con người của chúng ta. Nhưng nó tồn tại ở dạng số không và số một. Hóa ra bộ chọn có thể được cân bằng cách sử dụng một hệ thống nhất định mà chúng ta sẽ nói thêm.

Trọng lượng bộ chọn là gì?

Trọng số của bộ chọn là bốn vị trí có điều kiện x, x, x, x, được điền bằng số 0 và số 1 theo nội dung của bộ chọn. Mỗi vị trí đều có nội dung riêng:

• Kiểu nội tuyến
• Số nhận dạng
• Lớp, thuộc tính và lớp giả
• Thẻ và phần tử giả

Làm thế nào để đọc cái này?

Rất đơn giản. Từ phải qua trái. Các số ở bên trái có thứ tự cao nhất nên có trọng lượng lớn hơn, ngược lại các số ở bên phải có trọng lượng nhỏ nhất. Tất cả điều này sẽ trở nên rõ ràng sau này, vì vậy bạn thậm chí không cần phải suy nghĩ về ý nghĩa của đoạn này.

Làm thế nào để điền nó?

H1 ( màu: #777; )

Trong ví dụ này, bộ chọn là tiêu đề h1, bao gồm một thẻ duy nhất. Hóa ra đối diện với cột “thẻ”, chúng ta đặt một cột. Kết quả là hình sau: 0, 0, 0, 1.

Tất cả điều này đều tuyệt vời, nhưng trong các dự án thực tế, nó chỉ được tìm thấy trong cốt lõi của các kiểu hoặc chuẩn hóa, điều đó có nghĩa là nhiệm vụ cần phải phức tạp.

#main .container Article.post > tiêu đề h1.giga ( color: #777; )

Ví dụ này hóa ra khó khăn hơn ví dụ trước và trong đời thực xứng đáng với giải thưởng “Người tuyển chọn dư thừa nhất”. Việc dư thừa như vậy cần phải bị pháp luật truy tố nhưng chúng ta sẽ nói rõ hơn về chủ đề này ở một phần riêng của bài viết. Được rồi, hãy quay lại ví dụ và làm việc với thang đo một chút.

Hãy bắt đầu từ bên trái, vì mã định danh duy nhất ở đầu là #main . Tiếp theo, chúng ta thấy ba lớp.container, .post và .giga, cũng như ba thẻ bài viết, tiêu đề và h1. Để rõ ràng hơn nữa, tôi sẽ viết điều này dưới dạng các giai đoạn:

// Selector #main .container Article.post > header h1.giga // Trọng số ban đầu 0, 0, 0, 0 // Mã định danh #main 0, 1, 0, 0 // Các lớp, thuộc tính và pseudo-classes.container 0 , 1 , 1, 0 .post 0, 1, 2, 0 .giga 0, 1, 3, 0 // Thẻ và phần tử giả bài viết 0, 1, 3, 1 tiêu đề 0, 1, 3, 2 h1 0, 1, 3, 3 // Tóm tắt #main .container Article.post > header h1.giga => 0, 1, 3, 3

Hãy viết một số bộ chọn điên rồ mà tôi hy vọng sẽ không bao giờ thấy trong mã của bất kỳ ai:

// Selector body.page-posts #main .container Article.post ul.list-unstyled > li:first-child h2.article-title:hover ( color: #333; ) // Trọng số ban đầu 0, 0, 0, 0 // Mã định danh #main 0, 1, 0, 0 // Lớp, thuộc tính và pseudo-classes.page-posts 0, 1, 1, 0 .container 0, 1, 2, 0 .post 0, 1, 3, 0 . list-unstyled 0, 1, 4, 0:first-child 0, 1, 5, 0 .article-title 0, 1, 6, 0:hover 0, 1, 7, 0 // Thẻ và phần tử giả body 0, 1 , 7, 1 bài viết 0, 1, 7, 2 ul 0, 1, 7, 3 li 0, 1, 7, 4 h2 0, 1, 7, 5 // Tóm tắt body.page-posts #main .container bài viết.post ul.list-unstyled > li:first-child h2.article-title:hover => 0, 1, 7, 5

Và cuối cùng, để hiểu đầy đủ về chủ đề, sẽ có một ví dụ với các thuộc tính và phần tử giả.

// Selector.main:Before ( content: "3 .column.size-1of3"; ) // Trọng số ban đầu 0, 0, 0, 0 // Mã định danh 0, 0, 0, 0 // Lớp, thuộc tính và giả class.main 0, 0, 1, 0 0, 0, 2, 0 // Thẻ và phần tử giả:trước 0, 0, 2, 1 // Tóm tắt main:trước => 0, 0, 2, 1

Đó là cách mọi thứ diễn ra.

Trên thực tế, chủ đề này rất đơn giản nhưng rất quan trọng trong thực tế đối với sự hiểu biết tầm thường (tối thiểu) về cách trình duyệt xác định khối quảng cáo nào sẽ được áp dụng cho một thành phần cụ thể trên trang.

Điều gì sẽ xảy ra nếu trọng số của các bộ chọn giống nhau?

Giả sử bạn có hai hoặc nhiều bộ chọn bằng cách nào đó trỏ đến cùng một phần tử. Và điều đó xảy ra khi bạn đếm hoặc chỉ nhìn vào chúng, và trọng lượng hóa ra là như nhau. Đừng thất vọng, chỉ khối khai báo bộ chọn cuối cùng trong mã CSS của bạn từ nhóm này sẽ được áp dụng cho phần tử. Một cái gì đó như thế này. Điều này có vẻ hợp lý với tôi. Đúng như câu nói “ai không có thời gian thì lại đến muộn” mà ngược lại: “ai đến muộn thì lại đúng giờ”.

Tại sao điều này là cần thiết?

Cái này rất điểm thú vị, bởi vì bạn có thể hiểu khối khai báo nào sẽ được áp dụng cho một phần tử mà không cần tính trọng số của bộ chọn, nghĩa là chỉ cần nhìn vào nó và suy nghĩ một chút. Tuy nhiên, mắt có thể hỏng nhưng máy không hỏng, sẽ tính toán trọng lượng và làm hỏng bố cục. Tất nhiên lỗi không phải ở máy mà là ở lớp giữa máy tính và ghế, nhưng đó lại là một câu chuyện hoàn toàn khác.

Một ứng dụng khác của loại tính toán này là các dịch vụ hoặc tập lệnh xây dựng sơ đồ đặc trưng CSS. Điều này có thể rất hữu ích cho việc phân tích và đánh giá tính dư thừa trong mã của bạn.

Một sự thật thú vị là lần duy nhất tôi phải tính trọng lượng của bộ chọn là một bài kiểm tra từ Mail.ru về một loại chứng chỉ nào đó. Nếu bạn quan tâm, tôi sẽ tìm bài kiểm tra này trong lịch sử của mình.

Ồ, tôi có một dịch vụ đặc biệt dành cho bạn mà tôi đã tình cờ thấy khi chuẩn bị trình bày tài liệu này: Máy tính độ đặc hiệu là một công cụ tính trọng số chọn đơn giản và hiệu quả.

Độ đặc hiệu của bộ chọn

Vì chúng ta đang nói về trọng lượng của các bộ chọn CSS, nên chắc chắn bạn sẽ nghĩ về cách đánh giá nó: khi nào nó cần giảm cân và ngược lại, khi nào nó cần tăng cân. Cũng giống như con người, bộ chọn vẫn có trọng lượng tối ưu.

Điều đó xảy ra là nhiều nhà phát triển web coi ba lần lồng nhau là tính đặc hiệu của bộ chọn tối ưu. Độ đặc hiệu tối đa của bộ chọn là năm lần lồng và bạn nên cố gắng không vượt quá con số này. Tất nhiên, có thể phải đầu tư nhiều hơn vì bất cứ điều gì trong cuộc sống đều có thể xảy ra. Mặc dù vậy, tốt nhất bạn vẫn nên làm theo khuyến nghị này, ít nhất là một cách gián tiếp. Cách tiếp cận này sẽ giúp bạn tiết kiệm thời gian trong tương lai.

Được rồi, điều đó thật tuyệt, nhưng cân nặng có liên quan gì đến nó? - Vâng, nó rất đơn giản, nó phụ thuộc trực tiếp vào nó. Càng đầu tư nhiều thì càng nặng. Tuy nhiên, nó hợp lý.

Bạn có thể đánh giá mã CSS của mình bằng cách sử dụng tài nguyên Trình tạo biểu đồ đặc hiệu CSS. Dựa trên mã CSS bạn đề xuất, nó được xây dựng biểu đồ tương tác tính đặc hiệu của mã của bạn, nhờ đó bạn có thể xác định trực quan các khu vực có vấn đề trong kiểu của mình.

kết luận

Cố gắng duy trì trọng số bộ chọn tối ưu và thỉnh thoảng cấu trúc lại mã của bạn. Lúc đầu, nó có vẻ dư thừa và không cần thiết, nhưng cuối cùng nó có thể tạo ra một trò đùa không hay đối với bạn.