Thứ tự yêu tiên CSS và loại bỏ css chống chéo

CSS (Cascading Style Sheets) là một ngôn ngữ lập trình không thể thiếu trong mọi website ở thời điểm hiện tại.

Nó giúp chúng ta nâng tầm giao diện, giúp người dùng trải nghiệm website một cách tốt hơn và dễ dàng hơn.

Hôm nay mình sẽ chia sẻ tìm hiểu về thứ tự yêu tiên css nó giúp chúng ta hiểu css chồng tréo là gì đồng thời giảm bớt được css chồng chéo và để tăng tốc độ load và đặc biệt để bạn hiểu hơn khi có đoạn css hay nào đó thì nên cho nó để ở đâu thì sẽ load nhanh nhất.

Và đặc biệt để giúp bạn hiểu khi copy đoạn css hay nào đó mà nó không chạy được không phải là css nó lỗi mà do bạn vẫn chưa hiểu được thứ tự yêu tiên css.

Bài viết này đòi hỏi bạn cần phải có một ít kiến thức css cơ bản thì sẽ dễ dàng hiểu bài viết này hơn.

Cách nhúng thêm css

sẽ có 3 cách nhúng đoạn mã css vào giao diện của bạn.

• Inline – css nội tuyến (nhúng trực tiếp vào phần tử HTML bằng việc sử dụng thuộc tính style của phần tử): <p style=”margin:10px;color:red;”>Hello</p>
• Internal – css nội bộ vẫn có thể là css nội tuyến (tạo các bộ chọn trực tiếp trên trang bằng cách đặt trong thẻ <style></style>: thứ mà trong phần tùy chỉnh giao diện có chỗ thêm css, gần như themes WordPress nào cũng hỗ trợ cái này
• External – css bên ngoài (tạo file css nằm riêng và nhúng vào trang sử dụng thẻ <link> để nhúng vào trang: trong WordPress sẽ là các file style.css, file .css plugin themes …

Thứ tự yêu tiên css

Thứ tự yêu tiên css điểm nhỏ thì càng được yêu tiên hiển thị.

Ví dụ cơ bản

Cho css ví dụ là:

.p-den{
  color:black;
}
#p2-xanh-blue{
  color:blue;
}

<p class="p-den" id="p2-xanh-blue" style="color:red;">Chào bạn mình là wp tăng tốc!</p>

Kết quả trả về sẽ là:

Chào bạn mình là wp tăng tốc!

màu đỏ sẽ là được hiển thị, vì nội tuyến sẽ được yêu tiên nhất trong các trường hợp này. (điểm là 5)

Ví dụ cơ bản 2

Bây giờ mình sẽ bỏ css inline đi.

Kết quả sẽ trả về là :

Chào bạn mình là wp tăng tốc!

và bây giờ rules dạng ID sẽ là được yêu tiên nhất và hiển thị (điểm là 6)

Ví dụ cơ bản 3

Bây giờ tiêp tục mình sẽ loại bỏ luôn thẻ id đi.

kết quả sẽ chả về.

Chào bạn mình là wp tăng tốc!

sẽ trả về chữ màu đen ( điểm là 7).

Ví dụ cơ bản khi sử dụng !important

Cho css ví dụ là:

.p-den{
  color:black;
}
#p2-xanh-blue{
  color:blue;
}

<p class="p-den" id="p2-xanh-blue" style="color:red !important;">Chào bạn mình là wp tăng tốc!</p>

Kết quả trả về sẽ là:

Chào bạn mình là wp tăng tốc

màu đỏ sẽ là được hiển thị, vì nội tuyến sẽ được yêu tiên nhất trong trường hợp này, mà nó cũng là yêu tiên vố đối rồi. (điểm là 1)

Nhiều nhà lập trình viên không muốn cho sửa css + không cho truy cập vào css thì họ sẽ làm cách này thì người dùng sau sẽ không sửa đè lên được.

Ví dụ như bạn dùng Tawk không thể css vẽ lại được ngắt luôn.

Ví dụ cơ bản khi sử dụng !important trong thẻ id

Cho css ví dụ là:

.p-den{
  color:black;
}
#p2-xanh-blue{
  color:blue !important;
}

<p class="p-den" id="p2-xanh-blue" style="color:red ;">Chào bạn mình là wp tăng tốc!</p>

Chào bạn mình là wp tăng tốc!

kết quả sẽ hiện thị về mau xanh da trời (blue) – điểm số ưu tiên là 2.

Ví dụ cơ bản khi sử dụng !important trong thẻ class

Cho css ví dụ là:

.p-den{
  color:black !important;
}
#p2-xanh-blue{
  color:blue;
}

<p class="p-den" id="p2-xanh-blue" style="color:red ;">Chào bạn mình là wp tăng tốc!</p>

Chào bạn mình là wp tăng tốc!

kết quả sẽ hiện thị về chữ màu đen(black) – điểm số ưu tiên là 3.

Yêu tiên chồng tréo trùng lặp css

Chắc giờ bạn cũng đã hiệu yêu tiên của các rules bây giờ đến phần món ăn chính mà người dùng WordPress thường mắc phải và không sử được css đôi khi họ đổ lỗi cho lập trình viên làm ăn chán thế.

Mà google page speed vẫn bán chồng tréo quá nhiều css, thứ bạn thường áp dụng trong WordPress.

Hiểu cơ bản css chồng tréo là cung một tên và cùng một dạng rules trong một thời điểm.

Ví dụ chồng tréo phổ biến nhất WordPress

.p-giatuan{
  color:blue;
}
.p-giatuan{
  color:red;
  background-color:#eee;
}

<p class="p-giatuan">Chào mừng các bạn đến với WP Tăng Tốc</p>

Kết quả sẽ trả về:

Chào mừng các bạn đến với WP Tăng Tốc

Hiểu theo nguyên tắc: nó yêu tiên từ dưới lên trên và từ phải qua trái. (nó hơi dị với các kiểu máy học thông thường hơi ngược lại một tí). color:red sẽ đè chồng tréo color:blue; các thuộc tính background-color:#eee; vẫn hiện thị bình thường.

Chính vì nó do đó bạn khi bạn thêm css vào file style.css bạn cần phải cho đoạn css đó xuống cuối file, sẽ được yêu tiên chồng tréo.

Khi tối ưu tốc độ load website bạn cần tìm ra những đoạn css chồng chéo để xóa đi, ví dị trên bạn có thể xóa đi .p-giatuan{ color:blue; } để cho website của bạn nhẹ hơn mà không ảnh hưởng đến chức năng giao diện. ( có một số trường hợp trồn chéo là do javascript cố ý rất khó để xóa nếu xóa rất dễ lỗi bạn cần phải cân nhắc trước khi xóa).

Trường hợp này phổ biến nhất và là nguyên nhất chính tạo ra css chồng tréo lãng phí dung lượng css của bạn.

Hiện tại thì vẫn chưa có công cụ nào thật sự ngon auto loại bỏ css chồng tréo thật sự tốt bạn chỉ có thể làm bằng phương pháp thủ công mà thôi.

Ví dụ css chống tréo dạng 2 rules nhưng chung một thuộc tính

Đây là được gọi là đối tượng để tác động bởi 2 rules nhưng chung một thuộc tính

.p-giatuan{
  color:blue;
}
.p-giatuan-1{
  color:red;
  background-color:#eee;
}

<p class="p-giatuan p-giatuan-1">Chào mừng các bạn đến với WP Tăng Tốc</p>

Ví dụ này là khác rules nhưng chồng treo thuộc tính color
Kết quả sẽ trả về:

Chào mừng các bạn đến với WP Tăng Tốc

nó sẽ được ưu tiên tử phải qua trái. để hiện thị màu đỏ.

Đây là cách code css mà mình yêu thích nhất giúp giảm nhẹ css rất tốt.

• Bạn muốn tìm hiểu các kỹ thuật tối ưu css bạn có thể tham khảo bài viết này: 11 cách Tối ưu hóa css

Dùng WordPress thì nên cho vào css vào đâu là tốt nhất

Với website WordPress thì bạn nên cho vào file css ngoài, trong file style.css hay file themes-cua-ban.css của bạn là tốt nhấtvà đưa nó xuống dưới cuối cùng để được yêu tiên sự chồng chéo css. cách này giúp bạn cache trình duyệt tốt hơn rất nhiều, không nên đưa vào tùy chỉnh css nếu như bạn hiểu bạn đang làm gì thì mới nên cho vào ( khi đã cho css vào xong thì nhớ xóa cache trình duyệt hoặc đổi truy vấn query, nếu bạn chưa có kiến thức về cache trình duyệt thì rất khó khăn trong sử dụng: bạn có thêm khảo bài viết trình duyệt cache bạn cần hiểu những nguyên tắc mình đề cập trong đây để giúp bạn sửa file css chuẩn nhất và không bị lỗi nhé.

Giờ các bạn đã hiểu mình vẫn khuyên mọi người cho vào file style.css nhưng nên cho vào dưới cùng file nó có nguyên nhân của nó cả nhé.

Tóm tắt:

Bài viết này sẽ rất giúp ích cho những bạn đang muốn tùy chỉnh css themes của mình một cách tối ưu nhất, đây là những thứ kiến thức rất quan trọng để bạn chỉnh sửa lập trình giao diện responsive một cách tối ưu nhất.

Hiện tại thì vẫn chưa có công cụ nào thật sự ngon auto loại bỏ css chồng tréo thật sự tốt bạn chỉ có thể làm bằng phương pháp thủ công mà thôi. bài viết này giúp bạn có thêm kiến thức để tự tay loại bỏ css chồng tréo.

Tại sao chưa có công cụ loại bỏ css?

Thực sự đã có một số công cụ hỗ trợ loại bỏ css thừa chồng tréo không sử dụng, tuy nhiên thì không dễ tạo như phần mềm tạo css quan trọng. Khi phần mềm đó quét qua thì chỉ quét được nhưng css tĩnh, không quét được css động ( css động hiệu đơn giản là có javascript chạy theo) nếu xóa nhầm thì toang hẳn.

Đối với các trang WordPress thì gần như trả có trang nào không sử dụng javascript, nên mình sẽ không để cập công cụ đó ở đây.

Nếu trang website không có một tí javascript nào thì có thể tìm hiểu: https://www.jitbit.com/unusedcss/ lưu ý trang đang sử dụng javascript thì không nên sử dụng, đặc biệt là những trang bán hàng woocommerce.

Cách loại bỏ css không sử dụng chồng tréo tốt nhất hiện tại chỉ có phương pháp thủ công và sự tỉ mỉ của bạn.

Trong tương lai nếu có một công cụ nào đó thực sự ngon mình sẽ chia sẻ cho các bạn sau.

Chúc bạn thành công!!