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
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ánNó 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 { .. }
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ặcinput[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-left
0] 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 ấyMọ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
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
- 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]
- Tên lớp không được bắt đầu bằng một chữ số
- 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 CSSclass 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