Quy tắc đặt tên trong CSS (Phần 2) - Stolennguyen Website

Các Quy Ước Đặt Tên Trong CSS (Phần 2)

quy-tac-dat-ten-trong-css

1. Tại sao sử dụng quy ước đặt tên?

Chỉ có hai vấn đề khó khăn trong Khoa học Máy tính: làm mất hiệu lực bộ nhớ cache và đặt tên cho mọi thứ – Phil Karlton


  • Làm cho mọi thứ trở nên dễ dàng hơn và tiết kiệm thời gian bảo trì hơn.
  • Đặt tên đúng thứ trong CSS sẽ làm cho mã của bạn dễ đọc và dễ bảo trì hơn.
  • Nếu bạn chọn sử dụng quy ước đặt tên BEM, sẽ dễ dàng hơn để xem mối quan hệ giữa các elements / blocks thiết kế của bạn chỉ bằng cách xem xét đánh dấu.

2. Tên class có JavaScript kèm theo

Có 1 câu chuyện như sau:

Hôm nay là ngày đầu tiên của John tại nơi làm việc. Anh được chuyển giao một mã HTML trông như thế này:

<div class="siteNavigation">
</div>

John đã đọc bài viết này và nhận ra điều này có thể không phải là cách tốt nhất để đặt tên cho mọi thứ trong CSS. Vì vậy, anh đi trước và tái cấu trúc codebase như vậy:

<div class="site-navigation">
</div>

Có vẻ tốt, huh? John không biết, anh ta đã phá vỡ codebase. Như thế nào?

Một nơi nào đó trong code JavaScript, có một mối quan hệ với tên class trước đó, siteNavigation:

//the Javasript code
const nav = document.querySelector('.siteNavigation')

Vì vậy, với sự thay đổi trong tên class, biến nav đã trở thành null.

Thật buồn.

Để ngăn chặn các trường hợp như thế này, các nhà phát triển đã đưa ra các chiến lược khác nhau.

Sử dụng tiền tố js- class names

Một cách để giảm thiểu các lỗi như vậy là sử dụng tên lớp js- * để biểu thị mối quan hệ với phần tử DOM được đề cập

<div class="site-navigation js-site-navigation">
</div>

và trong JavaScript code:

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

Theo quy ước, bất kỳ ai nhìn thấy tên class js-site-navigation web sẽ hiểu rằng có mối quan hệ với phần tử DOM đó trong code JavaScript.

Sử dụng Rel attribute

Tôi không sử dụng kỹ thuật này, nhưng tôi đã thấy mọi người làm.

Bạn có nhận ra điều này không?

<link rel="stylesheet" type="text/css" href="main.css">

Về cơ bản, thuộc tính rel xác định mối quan hệ mà tài nguyên được liên kết có đến tài liệu mà từ đó nó được tham chiếu.

Trong ví dụ trước với John, những người ủng hộ kỹ thuật này sẽ làm điều này:

<div class="site-navigation" rel="js-site-navigation">
</div>

Và trong JavaScript:

const nav = document.querySelector("[rel='js-site-navigation']")

Chú ý: Nếu mọi người sử dụng thuộc tính ‘rel’, thì có thể không được sử dụng thuộc tính dữ liệu trong một số trường hợp nhất định.

Tôi có những nghi ngờ của tôi về kỹ thuật này, nhưng bạn có khả năng đi qua nó trong một số codebases.

Tuyên bố ở đây là, “tốt, có một mối quan hệ với Javascript, vì vậy tôi sử dụng thuộc tính rel để biểu thị điều đó”.

Web là một nơi lớn với nhiều “phương pháp” khác nhau để giải quyết cùng một vấn đề.

Đừng sử dụng data attributes

Một số nhà phát triển sử dụng các thuộc tính dữ liệu như JavaScript hooks. Điều này không đúng. Theo định nghĩa, các thuộc tính dữ liệu được sử dụng để lưu trữ dữ liệu tùy biến.

Mẹo: Viết thêm comment trong CSS

Điều này không liên quan gì đến các quy ước đặt tên, nhưng nó cũng sẽ giúp bạn tiết kiệm thời gian.

Mặc dù rất nhiều nhà phát triển web cố gắng KHÔNG viết các comments JavaScript hoặc dính vào một số ít, tôi nghĩ bạn nên viết thêm các nhận xét CSS.

Vì CSS không phải là “ngôn ngữ” thanh lịch nhất, nên các nhận xét được cấu trúc tốt có thể tiết kiệm thời gian khi bạn đang cố gắng hiểu mã của mình.

Nguồn: Viblo

Các quy ước đặt tên CSS giúp bạn rút ngắn thời gian khi Debug! (Phần 1)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *