CSS gạch dưới trong tên lớp

Tính nhất quán là một trong những yếu tố quan trọng nhất để viết CSS dễ sử dụng, dễ bảo trì. Không chỉ cho chính bạn mà còn cho những người khác trong tương lai, những người sẽ phải tìm hiểu mã của bạn sau khi bạn. Sử dụng dấu gạch nối là một cách tuyệt vời để cải thiện tính nhất quán và cũng để tận dụng một số lợi ích sau mà bạn không nhận được với camelCase hoặc dấu gạch dưới

1. CSS đã là một cú pháp có dấu gạch nối

   margin-left, padding-top, font-size, v.v. Chúng tôi đã viết CSS với dấu gạch nối. Việc sử dụng dấu gạch nối cho các khai báo CSS cũng như tên và ID lớp HTML của chúng ta là điều tự nhiên và nhất quán. Việc đặt tên lớp và ID của chúng tôi là camelCase trong khi thực hiện khai báo bằng dấu gạch nối là không nhất quán

2. Nó dễ dàng hơn để quét

   CSS một dòng giúp quét CSS của chúng tôi dễ dàng hơn nhiều. Tên lớp và ID có dấu gạch nối cải thiện hơn nữa “khả năng đọc” và “khả năng quét” này. Trong số sau đây, phần dưới cùng với dấu gạch ngang sẽ dễ đọc hơn. 1

   .navHome a { .. }
   .navAbout a { .. }
   .navPortfolio a { .. }
   .navContact a { .. }
   
   .nav-home a { .. }
   .nav-about a { .. }
   .nav-portfolio a { .. }
   .nav-contact a { .. }

3. Sử dụng dấu gạch nối cho phép bạn dễ dàng tận dụng các bộ chọn thuộc tính CSS

   Dấu gạch nối hiện là một tiêu chuẩn ngành đến mức thông số kỹ thuật CSS có các mẫu nhất định để chọn các thuộc tính được phân tách bằng dấu gạch nối. Xem và mẫu CSS3 “star” [class*="col-"]

   Hiện tại, thông thường bạn nên tránh các bộ chọn thuộc tính do tốc độ của bộ chọn. Mặc dù đôi khi chúng có thể cực kỳ hữu ích, chẳng hạn như đối với các phần tử biểu mẫu. input[type="text"] hoặc input[disabled]

   Một nơi khác chúng có thể được sử dụng là trong lưới của chúng tôi. css. Mỗi cột lưới hiện phải có 2 lớp. ancCol để biến nó thành một cột và khai báo chiều rộng như w50. Thay vì phải đặt 2 lớp vào phần tử cột, chúng ta có thể chỉ cần đặt một lớp (chẳng hạn như margin-left0) và sau đó sử dụng bộ chọn thuộc tính [class*="col-"] để áp dụng các kiểu cần thiết. Đây là cách Chris Coyier đề xuất trên lưới của anh ấy

4. Mọi người đang làm điều đó

   Chế giễu nếu bạn muốn. cả hai đều tự sử dụng dấu gạch nối cũng như khuyên người khác làm như vậy. Đúng là bạn không nên luôn “theo đám đông” trong mọi khía cạnh của cuộc sống, nhưng hãy đoán xem - đó chính xác là cách ngành công nghiệp web hoạt động. Đủ người bắt đầu làm điều gì đó, cuối cùng nó sẽ trở thành một tiêu chuẩn

5. Cuối cùng, quá trình chuyển đổi là có thể

   Hiện tại, phần lớn Ancestry sử dụng tên và ID của lớp camelCase với một số dấu gạch dưới và dấu gạch ngang được trộn lẫn một cách rời rạc và sẽ là một nhiệm vụ khó khăn khi cố gắng chuyển tất cả các trang hiện tại của chúng tôi từ camelCase thành dấu gạch nối hạnh phúc trong tương lai trong một lần chạy nước rút. Tuy nhiên, may mắn thay, chúng tôi đã thiết lập sẵn một hệ thống tạo phiên bản nên chúng tôi không phải thực hiện tất cả việc này cùng một lúc

   Chúng tôi sẽ thiết lập các phiên bản mới của từng tệp toàn cầu (dù sao chúng tôi cũng đang thực hiện một phần với những thay đổi mới nhất đối với tiêu chuẩn). Các trang mới sẽ trỏ đến các phong cách mới. Các trang cũ sẽ trỏ đến các tệp cũ cho đến khi cần cập nhật trên trang đó. Vào thời điểm đó, chúng tôi sẽ chuyển đổi các kiểu cũ giống như chúng tôi hiện đang làm với các tệp không dùng nữa. Trong vòng 6-12 tháng, 90% các trang cũ được chuyển đổi và quan trọng hơn, tất cả các trang mới đều sử dụng một cú pháp chuẩn

Phần kết luận

Sử dụng dấu gạch nối trong tên lớp và ID của bạn để cải thiện khả năng đọc, tận dụng bộ chọn thuộc tính CSS và giúp đỡ các nhà phát triển Ancestry trong tương lai

Dấu gạch dưới không được phép trong tên lớp hoặc ID trong các trình duyệt kiểu NS4 rất cũ. Đó là lý do tại sao dấu gạch nối đã trở thành một tiêu chuẩn công nghiệp hơn so với dấu gạch dưới. Ngoài ra, undescores khó gõ và đọc hơn

Chúng tôi tạo các lớp bằng cách sử dụng thuộc tính lớp trong HTML. Thuộc tính lớp chỉ định một hoặc nhiều tên lớp cho một phần tử. Tên lớp được CSS & JavaScript sử dụng để truy cập và tạo kiểu cho các phần tử cụ thể. Chúng ta cần tuân theo quy ước đặt tên tiêu chuẩn cho các lớp HTML/CSS để viết tên lớp. Một số ký tự không hợp lệ trong tên/bộ chọn lớp CSS. Trong bài viết này, chúng ta sẽ thấy cả các ký tự hợp lệ và không hợp lệ trong tên lớp CSS

quy ước đặt tên

1. Tên lớp phải bao gồm bất kỳ sự kết hợp nào của các ký tự chữ thường (a-z), ký tự viết hoa (A-Z), dấu gạch nối (-), dấu gạch dưới (_) và chữ số (0-9)
2. Tên lớp không được bắt đầu bằng một chữ số
3. The following characters are invalid in CSS: ~, @, #, $, %, ^, &, *, (,), {}, |, \, [],?, /,<,>, ",',+, =

Ghi chú. Tất cả các ký tự đều được HTML chấp nhận. Để tạo kiểu bằng CSS, bạn phải tuân theo quy ước đặt tên

Ví dụ

   
      
      
      
       Characters valid in CSS
   
   
   
   
   
      

         class name starting with uppercase character is valid
      
      

         class name starting with a lowercase character is valid
      
      

         class name starting with an underscore is valid
      




      

         class name starting with a number is not valid
      
      

         class name starting with a dash is valid
      
      

         class name staring with a colon(:) is not valid
      

đầu ra

Như bạn có thể thấy, các tên lớp tuân theo các quy ước đặt tên được CSS truy cập và vì vậy các phần tử của các lớp này được tạo kiểu. Các lớp có tên "1stclass" và ". bao gồm trợ giúp" không tuân theo các quy ước đặt tên, vì vậy chúng không được CSS truy cập

Các lớp CSS có thể có dấu gạch dưới không?

Trong CSS, người ta có thể sử dụng dấu gạch dưới (_) thay vì dấu gạch ngang (-) cho bộ chọn CSS (class, id, span, … . Dấu gạch dưới yêu cầu nhấn phím Shift và do đó khó gõ hơn.

Tên lớp có quan trọng trong CSS không?

Không, không phải .

Biểu tượng nào được sử dụng khi tạo CSS bằng tên lớp?

Tìm hiểu cách chọn phần tử có tên lớp bắt đầu bằng số. HTML5 hỗ trợ các số dưới dạng id và tên lớp, nhưng bộ chọn css có một số quy tắc, Tên hợp lệ phải bắt đầu bằng một chữ cái (a-z)[A-Z], dấu gạch dưới (_) hoặc dấu gạch nối (-), theo sau là bất kỳ số nào,

Tên lớp có nên viết hoa CSS không?

Điều này có nghĩa là với CSS Tiêu đề, bạn viết hoa bất kỳ tên lớp nào sẽ được tham chiếu trong biểu định kiểu mà không có lớp cha . Điều này có nghĩa là ngay cả các đối tượng trong OOCSS cũng được viết hoa. Sự khác biệt rất đơn giản; .