Các. cờ quan trọng được dành cho khách truy cập trang web để dễ dàng ghi đè CSS thông qua “bảng định kiểu người dùng. ”
Ví dụ: bạn có thể tạo một trình chặn quảng cáo thô bằng cách thêm phần này vào biểu định kiểu người dùng của mình.
body big { font-size: 1em; }
04Với tư cách là người dùng, bạn biết rằng mình không muốn xem quảng cáo đó và. cờ quan trọng đảm bảo rằng bạn sẽ không
Nhưng các nhà phát triển web đã bắt đầu sử dụng. quan trọng theo những cách nó không bao giờ được dự định sử dụng
Các. cờ quan trọng, đó là một cách làm không tốt vì nó khiến mọi thứ trở nên khó ghi đè một cách không cần thiết trong tương lai và chỉ nên được bảo lưu như là phương sách cuối cùng
Hầu như luôn có một cách tốt hơn để ghi đè các quy tắc CSS khi bạn cần
Làm cho các quy tắc CSS cụ thể hơn một chút
Trong hầu hết các trường hợp, sử dụng một. cờ quan trọng giống như bẻ đai ốc bằng búa tạ. Để ghi đè quy tắc CSS, tất cả những gì bạn cần là kiểu cụ thể hơn một chút
Ví dụ: giả sử các phần tử
body big { font-size: 1em; }
05 của bạn làm cho văn bản hơi lớn với CSS saubig { font-size: 3em; }
Bạn có thể bị cám dỗ để trượt một. Quan trọng trước dấu chấm phẩy và gọi nó là một ngày, nhưng CSS tùy chỉnh sau sẽ có hiệu quả như nhau
body big { font-size: 1em; }
Vì mọi trang web có lẽ đều có thẻ, nên đây là một cách khá phổ biến để làm cho CSS trở nên cụ thể hơn
Tuy nhiên, có một vài trường hợp hiếm khi sử dụng được. quan trọng
Ghi đè lên một cái khác [không được khuyên?]. quan trọng
Tôi biết bạn đã không thêm cái này. quan trọng. Nhưng người khác đã làm. Có thể thông qua plugin hoặc tiện ích của bên thứ ba hoặc thứ gì đó
Một số nhà phát triển plugin sẽ sử dụng nó để đảm bảo bất cứ điều gì họ đang cố gắng hiển thị trên giao diện người dùng, chẳng hạn như một biểu mẫu, không bị chủ đề che khuất
Và tôi thậm chí không đánh gục các nhà phát triển plugin vì đã làm điều đó
Xem xét có bao nhiêu chủ đề rác ngoài đó, việc nhà phát triển plugin đảm bảo sản phẩm của họ hiển thị như dự định là hoàn toàn hợp lý.
Chủ đề thùng rác có thể tiếp tục trở nên rác rưởi, người dùng có một khoảnh khắc hạnh phúc thoáng qua và nhà phát triển plugin đã hạn chế một email hỗ trợ tức giận
Nếu việc vô hiệu hóa plugin CSS là không khả thi và/hoặc bạn không muốn “vứt đứa bé ra ngoài bằng nước tắm”, bạn có thể sử dụng một. cờ quan trọng để ghi đè
Ghi đè các kiểu nội tuyến do JavaScript tạo ra
Tôi biết bạn đang tránh các kiểu nội tuyến nhiều nhất có thể, nhưng trong một số trường hợp, điều đó là không thể tránh khỏi
Ví dụ: Masonry, sẽ tự động áp dụng định vị tuyệt đối và chuyển đổi kiểu cho các khối bị ảnh hưởng
Nếu bạn muốn đặt lại vị trí hoặc ngăn chúng nhảy xung quanh bằng các biến hình, bạn cần sử dụng một. cờ quan trọng để ngăn chặn nó
Bởi vì nó không cụ thể hơn các kiểu nội tuyến, bạn có thể sử dụng một. cờ quan trọng để ghi đè
lớp học tiện ích
Chris Coyier có một số ý tưởng về những
Hãy nhớ rằng, bài báo đã được xuất bản hơn năm năm trước, nhưng các trường hợp sử dụng vẫn còn đúng cho đến ngày nay
Ví dụ: nếu văn bản màu xanh lá cây được rải khắp trang web là một thành phần thương hiệu quan trọng, thì có thể nên sử dụng những điều sau đây.
body big { font-size: 1em; }
06Trang web có văn bản màu xanh lá cây sẽ biến mất nếu không có. lá cờ quan trọng? . Nhưng hãy nhớ rằng, đó là một thành phần thương hiệu quan trọng, vì vậy bạn có thể sử dụng. quan trọng để được an toàn hơn là xin lỗi
Bài đăng cũng bao gồm việc sử dụng. quan trọng để đảm bảo các nút có phong cách nhất quán
Đối với một dự án một lần, điều này sẽ hợp lý. Đối với một chủ đề WordPress được phát hành công khai, người dùng của nó không thể tùy chỉnh các kiểu nút nếu không sử dụng thêm. cờ quan trọng
Khá sớm thôi, đó là một cuộc chạy đua vũ trang. Và đó là điều bạn muốn tránh khi phát hành chủ đề ra công chúng
6 trong CSS là một ký hiệu đặc biệt mà chúng ta có thể áp dụng cho một khai báo CSS để ghi đè các quy tắc xung đột khác cho bộ chọn phù hợpThis is heading text
This is heading text
Khi chúng tôi làm việc trên các dự án web, điều tự nhiên là chúng tôi có một số khai báo kiểu mà các kiểu khác sẽ ghi đè
Đây không phải là vấn đề đối với nhà phát triển có kinh nghiệm, người hiểu cơ chế cốt lõi của CSS. Tuy nhiên, người mới bắt đầu có thể khó hiểu tại sao các khai báo kiểu mà họ mong đợi không được trình duyệt áp dụng
Vì vậy, thay vì họ tập trung vào giải quyết vấn đề một cách tự nhiên, họ có xu hướng khắc phục nhanh bằng cách thêm khai báo
6 để thực thi phong cách mà họ mong đợi. Mặc dù cách tiếp cận này có thể hiệu quả vào thời điểm đó, nhưng nó cũng có thể gây ra một vấn đề phức tạp khácThis is heading text
This is heading text
Trong hướng dẫn này, chúng tôi sẽ xem xét những điều sau đây, bao gồm cách sử dụng
6 và khi nào chúng tôi nên sử dụng nóThis is heading text
This is heading text
- Cơ chế lõi CSS
- Hiểu khai báo
6 trước khi chúng tôi sử dụng nóThis is heading text
This is heading text
.mytitle { color: blue; } h2 { color: green; }
1 và các chức năng lớp giả có liên quan khác- Khi nào chính xác thì chúng ta có thể sử dụng khai báo
6?This is heading text
This is heading text
- lớp học tiện ích
- Các quy tắc kiểu chúng tôi không thể ghi đè
Nói đủ rồi - hãy đi sâu vào
Cơ chế lõi CSS
Việc hiểu các nguyên tắc cốt lõi của CSS sẽ giúp chúng ta biết rõ ràng khi nào nên sử dụng khai báo
6. Trong phần này, chúng ta sẽ đi qua một số cơ chế nàyThis is heading text
This is heading text
Hãy xem xét mã HTML và CSS bên dưới, bạn nghĩ văn bản tiêu đề sẽ có màu gì?
Đầu tiên, HTML
This is heading text
Sau đó, CSS
body big { font-size: 1em; }
0Văn bản sẽ hiển thị màu xanh lá cây. Đây là CSS cơ bản cơ bản. Với thuật toán xếp tầng CSS, thứ tự của các quy tắc CSS rất quan trọng. Trong trường hợp này, khai báo nào xuất hiện cuối cùng trong mã nguồn sẽ thắng
Thông thường, điều này là hợp lý. Đầu tiên, chúng ta không nên lặp lại bộ chọn giống như chúng ta đã làm ở trên. CSS không muốn lặp lại nên sử dụng quy tắc khai báo cuối cùng
Tuy nhiên, có những trường hợp chúng ta tạo các kiểu chung cho các phần tử gốc, chẳng hạn như
.mytitle { color: blue; } h2 { color: green; }4, sau đó thêm các lớp để tạo kiểu cho các phần tử cụ thể. Hãy xem xét cả ví dụ sau, bắt đầu với HTML
This is heading text
This is heading text
Sau đó, hãy xem CSS
.mytitle { color: blue; } h2 { color: green; }
Trong đoạn mã trên, phần tử
.mytitle { color: blue; } h2 { color: green; }4 đầu tiên không có lớp nào được áp dụng, vì vậy rõ ràng là nó có màu xanh lục của bộ chọn
.mytitle { color: blue; } h2 { color: green; }4
Tuy nhiên, phần tử
.mytitle { color: blue; } h2 { color: green; }4 thứ hai sử dụng quy tắc cho bộ chọn lớp,
.mytitle { color: blue; } h2 { color: green; }8, ngay cả khi quy tắc bộ chọn phần tử xuất hiện cuối cùng trong mã CSS. Lý do cho điều đó là bộ chọn lớp có tính đặc hiệu cao hơn khi so sánh với bộ chọn phần tử
Nói cách khác, trọng số được áp dụng cho khai báo trong bộ chọn lớp lớn hơn trọng số của bộ chọn phần tử
Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn
Tương tự, phần khai báo trong bộ chọn ID nhiều hơn phần khai báo trong bộ chọn lớp. Trong trường hợp này, màu đỏ trong mã bên dưới được ưu tiên
body big { font-size: 1em; }
8Tiếp theo là CSS
body big { font-size: 1em; }
9Hơn nữa, thuộc tính
.mytitle { color: blue; } h2 { color: green; }9 nội tuyến được ưu tiên hơn bộ chọn ID, bắt đầu bằng HTML
1This is heading text
This is heading text
Sau đó, tiếp theo là CSS
2This is heading text
This is heading text
Đây là luồng ưu tiên lý tưởng trong CSS và phải được duy trì để tránh bất thường. Tuyên bố
6 hầu hết xảy ra khi chúng ta không biết các quy tắc cơ bản nàyThis is heading text
This is heading text
Thuộc tính kiểu nội tuyến và mỗi bộ chọn có các giá trị mà trình duyệt gán cho chúng. Bằng cách đó, nó biết cái nào có mức độ ưu tiên cao hơn hoặc thấp hơn. Hãy coi giá trị này là một số có bốn chữ số đơn với thuộc tính
.mytitle { color: blue; } h2 { color: green; }9 được gán giá trị trọng số mạnh nhất là
body big { font-size: 1em; }
82Điều này theo sau ID có giá trị là
body big { font-size: 1em; }
83, sau đó là lớp có body big { font-size: 1em; }
84 và cuối cùng là bộ chọn phần tử có giá trị là body big { font-size: 1em; }
85Đôi khi, chúng tôi có thể kết hợp các bộ chọn nhắm mục tiêu các phần tử cụ thể, như đã thấy trong ví dụ bên dưới
body big { font-size: 1em; }
8Tiếp theo là CSS
0This is heading text
This is heading text
Tính đặc hiệu của bộ chọn
body big { font-size: 1em; }
86 trong CSS ở trên là sự bổ sung của .mytitle { color: blue; } h2 { color: green; }4 và
.mytitle { color: blue; } h2 { color: green; }8. Đó là,
body big { font-size: 1em; }
89. Tuy nhiên, tổng giá trị này nhỏ hơn giá trị của ID body big { font-size: 1em; }
90 là body big { font-size: 1em; }
83Các bài viết hay khác từ LogRocket
- Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
- Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các sự cố trong ứng dụng của bạn
- Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
- Chuyển đổi giữa nhiều phiên bản của Node
- Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
- Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
- So sánh NestJS với. Thể hiện. js
Vì vậy, trình duyệt sử dụng khai báo trong bộ chọn ID để ghi đè các quy tắc xung đột khác. Trong trường hợp trọng lượng bằng nhau, tuyên bố quy tắc cuối cùng sẽ thắng
Bây giờ chúng ta đã biết quy tắc nào có liên quan nhất và lý do tại sao trình duyệt áp dụng chúng, việc sử dụng khai báo
6 này sẽ trở nên rõ ràng một cách tự nhiênThis is heading text
This is heading text
Hiểu khai báo This is heading text
This is heading text
6 trước khi chúng tôi sử dụng nó
This is heading text
This is heading text
Trước khi xem xét sử dụng ký hiệu
6, chúng tôi phải đảm bảo rằng chúng tôi tuân theo quy tắc về tính đặc hiệu và sử dụng tầng CSSThis is heading text
This is heading text
Trong đoạn mã bên dưới, chúng ta có các phần tử
.mytitle { color: blue; } h2 { color: green; }4 và
body big { font-size: 1em; }
96 được tạo kiểu thành màu body big { font-size: 1em; }
97body big { font-size: 1em; }
00Sau đó,
.mytitle { color: blue; } h2 { color: green; }8 trong CSS
body big { font-size: 1em; }
01Nhưng, giả sử tại một thời điểm nào đó, chúng ta muốn cung cấp cho phần tử
body big { font-size: 1em; }
96 một màu 10. Việc thêm quy tắc kiểu như quy tắc bên dưới sẽ không làm thay đổi màu vì lớp có nhiều trọng số hơn và nó cụ thể hơn bộ chọn phần tử, như chúng ta đã họcThis is heading text
This is heading text
body big { font-size: 1em; }
02Tuy nhiên, việc sử dụng
6 trên trọng lượng nhỏ hơn sẽ khiến trình duyệt thực thi tuyên bố đó đối với các quy tắc xung đột khácThis is heading text
This is heading text
body big { font-size: 1em; }
03Điều này là do ký hiệu
6 làm tăng trọng số của khai báo theo thứ tự ưu tiên theo tầng. Điều này có nghĩa là chúng tôi đã phá vỡ quy trình ưu tiên bình thường. Do đó, thực hành không tốt và có thể dẫn đến khó khăn trong việc bảo trì và gỡ lỗi mãThis is heading text
This is heading text
Nếu tại một thời điểm nào đó, chúng tôi muốn ghi đè quy tắc quan trọng trên, chúng tôi có thể áp dụng một ký hiệu
6 khác cho một khai báo có độ đặc hiệu cao hơn [hoặc tương tự nếu nó nằm dưới nguồn]. Sau đó nó có thể dẫn đến một cái gì đó như thế nàyThis is heading text
This is heading text
body big { font-size: 1em; }
04Điều này là xấu và nên tránh. Thay vào đó, chúng ta nên kiểm tra xem
- Sắp xếp lại quy tắc hoặc viết lại bộ chọn có thể giải quyết vấn đề xếp tầng
- Tăng tính đặc hiệu của phần tử đích có thể giải quyết vấn đề
Vâng, hãy cùng tìm hiểu. Quay lại quy tắc kiểu của chúng tôi, chúng tôi có thể thực thi màu
10 trên phần tửThis is heading text
This is heading text
body big { font-size: 1em; }
96 bằng cách tăng điểm cụ thểNhư được thấy bên dưới, chúng ta có thể kết hợp các bộ chọn cho đến khi điểm cụ thể của chúng thay thế quy tắc xung đột. Bộ chọn
16 cho điểm cụ thể làThis is heading text
This is heading text
17, cao hơn điểmThis is heading text
This is heading text
.mytitle { color: blue; } h2 { color: green; }8 của
body big { font-size: 1em; }
84body big { font-size: 1em; }
05Như chúng ta có thể thấy, thay vì sử dụng khai báo
6 để thực thi quy tắc, chúng ta tập trung vào việc tăng điểm cụ thểThis is heading text
This is heading text
.mytitle {
color: blue;
}
h2 {
color: green;
}
1 và các chức năng lớp giả có liên quan khác
Đôi khi, chúng tôi có thể theo dõi các vấn đề đối với chức năng lớp giả. Vì vậy, biết cách thức hoạt động của nó có thể giúp chúng ta giảm bớt căng thẳng. Hãy xem một ví dụ khác
Hãy tưởng tượng chúng ta đang làm việc trên một dự án và xem đoạn mã sau
body big { font-size: 1em; }
06Sử dụng các quy tắc CSS sau đây sẽ cho chúng ta đầu ra sau
body big { font-size: 1em; }
07Bây giờ, giả sử chúng ta muốn cung cấp cho
22 và văn bản liên kết trong đoạn văn có màu khác củaThis is heading text
This is heading text
10. Chúng ta có thể làm điều này bằng cách thêm quy tắc sauThis is heading text
This is heading text
body big { font-size: 1em; }
08Quy tắc trước đó sẽ ghi đè lên màu
10 mặc dù nằm ở cuối dòngThis is heading text
This is heading text
Để khắc phục nhanh, chúng tôi có thể thực thi màu
10 của mình bằng cách sử dụng ký hiệuThis is heading text
This is heading text
6 như vậyThis is heading text
This is heading text
body big { font-size: 1em; }
09Nhưng, như bạn có thể đoán, đó là cách làm không tốt, vì vậy chúng ta không được vội vàng sử dụng ký hiệu
6. Thay vào đó, chúng ta có thể bắt đầu bằng cách phân tích cách mọi bộ chọn hoạt động.This is heading text
This is heading text
.mytitle { color: blue; } h2 { color: green; }1 được sử dụng trong mã là một hàm lớp giả để viết các bộ chọn lớn ở dạng nén hơn
Vì vậy, đây là quy tắc sau trong đoạn mã trên
body big { font-size: 1em; }
07Điều nào tương đương với điều sau đây
1This is heading text
This is heading text
Vậy tại sao
29 vàThis is heading text
This is heading text
body big { font-size: 1em; }
80 không ghi đè màu mặc dù có điểm cụ thể là 17, cao hơnThis is heading text
This is heading text
body big { font-size: 1em; }
82 của body big { font-size: 1em; }
83 và body big { font-size: 1em; }
84Chà, mọi bộ chọn trong
.mytitle { color: blue; } h2 { color: green; }1 đều sử dụng tính đặc hiệu cao nhất trong danh sách đối số. Trong trường hợp đó, cả
body big { font-size: 1em; }
86 và body big { font-size: 1em; }
87 trong body big { font-size: 1em; }
88 đều sử dụng điểm cụ thể của body big { font-size: 1em; }
86, là body big { font-size: 1em; }
83. Do đó, trình duyệt giữ nguyên giá trị của nó vì nó có tính đặc hiệu cao hơnDo đó, bất cứ khi nào chúng ta thấy loại xung đột này, tốt hơn hết là chúng ta không sử dụng hàm giả lớp và sử dụng hàm tương đương của nó như sau
1This is heading text
This is heading text
Bây giờ, chúng ta sẽ có thể xem kết quả mong đợi mà không cần sử dụng ký hiệu
6 làm gián đoạn trật tự tầngThis is heading text
This is heading text
Bạn có thể tự mình xem trên CodeSandbox
Khi nào chính xác chúng ta có thể sử dụng khai báo This is heading text
This is heading text
6?
This is heading text
This is heading text
Dưới đây là một số trường hợp nên sử dụng ký hiệu
6This is heading text
This is heading text
lớp học tiện ích
Giả sử chúng ta muốn tạo kiểu cho tất cả các nút trên một trang trông giống nhau, chúng ta có thể viết một quy tắc CSS có thể được sử dụng lại trên một trang. Chúng ta hãy xem đánh dấu và phong cách sau đây
3This is heading text
This is heading text
Tiếp theo là CSS
4This is heading text
This is heading text
Trong đoạn mã trên, chúng ta có thể thấy rằng liên kết nút trong phần tử
04 được nhắm mục tiêu bởi cả hai bộ chọn trong CSS. Và, chúng tôi biết rằng đối với các quy tắc xung đột, trình duyệt sẽ sử dụng quy tắc cụ thể nhất. Như chúng tôi mong đợi,This is heading text
This is heading text
05 có số điểm làThis is heading text
This is heading text
17 trong khiThis is heading text
This is heading text
07 có số điểm làThis is heading text
This is heading text
body big { font-size: 1em; }
84Trang sẽ trông như thế này
Trong trường hợp này, chúng ta có thể thực thi quy tắc
07 bằng cách thêm ký hiệuThis is heading text
This is heading text
6 vào các khai báo xung đột như thế nàyThis is heading text
This is heading text
5This is heading text
This is heading text
Trang bây giờ trông như chúng ta mong đợi
Xem cho chính mình trên CodeSandbox
Các quy tắc kiểu chúng tôi không thể ghi đè
Điều này chủ yếu xảy ra khi chúng tôi không có toàn quyền kiểm soát mã đang hoạt động. Đôi khi, khi chúng tôi làm việc với một hệ thống quản lý nội dung như WordPress, chúng tôi có thể thấy rằng kiểu CSS nội tuyến trong chủ đề WordPress của chúng tôi đang ghi đè lên kiểu tùy chỉnh của chúng tôi
Trong trường hợp này, khai báo
6 rất hữu ích để ghi đè kiểu nội tuyến của chủ đềThis is heading text
This is heading text
Phần kết luận
Tuyên bố
6 không bao giờ được sử dụng như chúng tôi mong muốn. Chúng ta chỉ được sử dụng nó nếu thực sự cần thiết, chẳng hạn như tình huống mà chúng ta có ít quyền kiểm soát hơn đối với mã hoặc các trường hợp cực kỳ nghiêm trọng trong mã của chính chúng taThis is heading text
This is heading text
Việc chúng ta có sử dụng nó hay không tùy thuộc vào cách chúng ta hiểu cơ chế CSS cốt lõi và trong hướng dẫn này, chúng tôi cũng đã đề cập đến điều đó
Tôi hy vọng bạn thích đọc bài viết này. Nếu bạn có câu hỏi hoặc đóng góp, hãy chia sẻ suy nghĩ của bạn trong phần bình luận và nhớ chia sẻ hướng dẫn này trên web
Giao diện người dùng của bạn có ngốn CPU của người dùng không?
Khi giao diện người dùng web ngày càng phức tạp, các tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất cả người dùng của bạn trong sản xuất, hãy thử LogRocket.LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các chỉ số hiệu suất chính của giao diện người dùng, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, ghi nhật ký yêu cầu mạng và tự động hiển thị tất cả các lỗi