Lý do để có dấu ngoặc vuông (vuông) trong tên lớp của phần tử là gì?

Question

tôi đã thực sự ngạc nhiên bởi tuyên bố này class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]" trong một mẫu bootstrap 3 và tôi không chắc chắn sự khác biệt giữa

class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]" 

và

class="col-xs-12 col-sm-offset-1 col-sm-5" 

bạn có thể vui lòng cho tôi biết thêm chi tiết về ý nghĩa là gì của khung này và một số trường hợp khi chúng được sử dụng?

Answer 1

Đây không phải là điều gì khác ngoài các lớp tách trực quan với mục đích nhóm chúng lại.

Ví dụ bạn đã cung cấp cả hai đều thực hiện chính xác điều tương tự.

Dấu ngoặc được cho phép trong thuộc tính lớp và về mặt kỹ thuật hợp lệ, miễn là chúng có dấu cách giữa khung và chính lớp đó.

Thông tin thêm về kỹ thuật này có thể được tìm thấy trên csswizardy, và cho hậu thế, đây là một đoạn trích giải thích cách ông sử dụng nó:

Làm thế nào nó hoạt động

Không có khó khăn và nhanh chóng quy tắc về cách thức và thời điểm bắt đầu nhóm các lớp học của bạn, nhưng nguyên tắc tôi đã đặt cho bản thân mình là:

Phải có nhiều hơn một bộ 'lớp'. Một ‘bộ’ phải chứa nhiều hơn một lớp. Này về cơ bản chỉ ringfences bất kỳ nhóm nào đó cần nó, ví dụ:

<!-- Only one set. Nothing needs grouping. --> 
<div class="foo foo--bar"> 

<!-- Two sets, but only one class in each. Nothing needs grouping. --> 
<div class="foo bar"> 

<!-- Two sets, one of which contains more than one class. This set needs grouping. --> 
<div class="[ foo foo--bar ] baz"> 

<!-- Two sets, both of which contain more than one class. These sets needs grouping. --> 
<div class="[ foo foo--bar ] [ baz baz--foo ]"> 

Làm thế nào bạn nhóm chúng có thể được hoàn toàn sự lựa chọn của bạn, khái niệm ở đây chỉ giao dịch với thực tế rằng chúng tôi đang nhóm mọi thứ.

Answer 2

Về cơ bản nó chỉ ở đó để làm cho đoạn code bằng cách nào đó tốt hơn có thể đọc được.

Theo: Which characters are valid in CSS class names/selectors?

~ ! @ $ %^& * () + = , ./' ; : " ? > < [ ] \ { } | ` # 

không hợp lệ chỉ như lớp chọn nhưng chỉ để sử dụng nó trong các thuộc tính lớp đó là hợp lệ. Nếu bạn vẫn muốn thêm một trong các ký tự ở trên cho bộ chọn lớp của bạn, bạn cần phải thoát khỏi nó bằng cách sử dụng \ mà sẽ trông giống như sau: \[ cho ký tự [.

Tôi thực sự thích câu trả lời từ xengravity cũng nhiều hơn tôi - vẫn là ý tưởng tương tự về khả năng đọc nhưng với nhiều chi tiết hơn tại sao và cũng có tham chiếu về cách sử dụng.