Các quy ước đặt tên cho CSS là gì?

Chúng tôi đặt tên lớp cho CSS. Mỗi người có cách đặt tên Class khác nhau, có thể gây nhầm lẫn cho người đọc

Chúng ta cần đặt tên class một cách thống nhất để tăng khả năng đọc code

CSS có nhiều phương pháp. Trong số đó, chúng ta sẽ xem xét cách đặt tên Class theo BEM

https. //2020. trạng thái. com/en-US/công nghệ/phương pháp/

BEM được chia thành ba loại

1. Chặn
2. Thành phần
3. bổ nghĩa

1. Chặn

Một thành phần trang độc lập về chức năng có thể được sử dụng lại

Nói cách khác, chúng ta nói về các thành phần

https. //www. đập phá tạp chí. com/2012/04/a-new-front-end-methodology-bem/

Đặc trưng

- Lớp được đặt tên theo mục đích chứ không đặt theo hình thức

làm tổ

• Các khối có thể được lồng vào nhau
• Bạn có thể có bất kỳ số lượng cấp độ lồng nhau

Quy tắc

• Sử dụng '-' để kết nối các tên với nhau
• Đối với khối ngoài cùng, hãy khớp tên thành phần

.└──── components           └── edit-text.svelte

2. Thành phần

Một phần tổng hợp của một khối không thể được sử dụng riêng biệt với nó

element là một phần của khối thực hiện một chức năng nhất định

https. //www. đập phá tạp chí. com/2012/04/a-new-front-end-methodology-bem/

Đặc trưng

• Tên phần tử được tách khỏi tên khối bằng dấu gạch dưới kép (__)

làm tổ

Các phần tử có thể được lồng vào nhau

Tên khối xác định không gian tên, đảm bảo rằng các phần tử phụ thuộc vào khối (block__elem)

3. bổ nghĩa

Một thực thể xác định diện mạo, trạng thái hoặc hành vi của một khối hoặc phần tử

https. //www. đập phá tạp chí. com/2012/04/a-new-front-end-methodology-bem/

Đặc trưng

• Cờ trên các khối hoặc phần tử. Sử dụng chúng để thay đổi diện mạo, hành vi hoặc trạng thái
• Tên công cụ sửa đổi được phân tách khỏi tên khối hoặc thành phần bằng hai dấu gạch ngang ( — )
• Một công cụ sửa đổi không thể được sử dụng một mình

Ưu và nhược điểm

ưu

• Cấu trúc phong cách có thể được nắm bắt trong nháy mắt
• Phạm vi chỉ có thể được suy ra bởi tên lớp
• Thật dễ dàng để cộng tác

Nhược điểm

• Khi làm việc với Javascript, mã trở nên dài dòng

document.getElementsByClassName("block-name__element-name — modifier")

• Thật khó để chọn một cú nhấp đúp

Dấu gạch ngang và gạch dưới lẫn lộn nên có vấn đề là bạn không thể chọn tên lớp cùng một lúc bằng cách nhấp đúp

Luôn ưu tiên chữ thường cho các phần tử, cho các thuộc tính và giá trị của chúng, cho các lớp và id. Tên nhiều từ cho các lớp và id phải là 1. , nối các từ bằng chữ thường mà không có bất kỳ ký tự nào ở giữa hoặc 2. , tách từng từ bằng dấu "-" (không phải "_") và duy trì cách viết thường trong suốt. Bất kể bạn có thích quy ước 1 hay không. hoặc quy ước 2. , bạn không nên chuyển đổi giữa hai quy ước (hãy nhớ rằng tính nhất quán là chìa khóa trong lập trình web). Không được sử dụng các ký tự đặc biệt khác để phân tách các từ và không được viết hoa từ tiếp theo

Đầu ra sẽ trông như thế này. Một số tiếp theo. Và sau đó bạn (hoặc ai đó khác) quyết định đổi màu sang thứ khác, ví dụ như màu xanh lam

.red { color: blue; }

Bạn sẽ kết thúc với mã HTML có nội dung class="red" trong khi đầu ra như thế này. Một số văn bản, đó là vô nghĩa, tất nhiên. Chẳng hạn, sẽ tốt hơn nếu có nhiều tên chung hơn cho các lớp như vậy. nhấn mạnh, nhấn mạnh, nổi bật

.emphasis { color: red; } .. Some text

Và không có vấn đề gì nếu bạn thay đổi màu thành đỏ, xanh hoặc bất cứ thứ gì. bạn sẽ không bao giờ có mã HTML và đầu ra vô nghĩa như đã giải thích ở trên

Tên bộ chọn phổ biến

Sử dụng ID. đầu trang, chân trang, nội dung, trình bao bọc, bên trong, bên ngoài, vùng chứa. tên như. html, head, bottom, top, left, right, không được dùng cho bố cục tài liệu

Sử dụng thẻ HTML

Cố gắng sử dụng càng nhiều thẻ HTML càng tốt. Thay vì

div.maintitle { font-size:2em; color:orange; } ...

Some text

Bạn nên luôn cân nhắc việc sử dụng thẻ tiêu đề. H1, H2. H6

________số 8

Nếu bạn muốn có phong cách khác nhau trong các bộ chọn khác nhau, bạn có thể làm như thế này

H1 { font-size:2em; color:orange; } #header H1 { font-size:1.2em; border-bottom:1px solid #e0e0e0; } ...

Header title

...Some text

Cài lại

Bạn có thể đặt lại một số thẻ HTML như thế này

document.getElementsByClassName("block-name__element-name — modifier")

0

Nhưng tránh đặt lại các thuộc tính phổ biến như lề cho P, H1, H2,. Nếu bạn cần

không có lề, tốt hơn là xác định lớp mới

document.getElementsByClassName("block-name__element-name — modifier")

1

Thay vào đó, hãy đặt lại tất cả các thẻ đoạn văn (

) rồi thêm dấu cách trước và sau theo cách thủ công bằng
hoặc kiểu nội tuyến

document.getElementsByClassName("block-name__element-name — modifier")

2

Kiểu nội tuyến

Tránh sử dụng quảng cáo kiểu nội tuyến càng nhiều càng tốt

document.getElementsByClassName("block-name__element-name — modifier")

30

Sử dụng các lớp thay thế

document.getElementsByClassName("block-name__element-name — modifier")

31

Tại sao? . Ý tưởng đằng sau CSS là có tất cả các kiểu được xác định ở một nơi, trong khi mã HTML của bạn không có định dạng. Trong ví dụ trên, nếu bạn thay đổi kiểu cho P trong. css, điều này sẽ không ảnh hưởng đến đoạn văn có thẻ nội tuyến, nó sẽ luôn có lề trên 2em và văn bản màu xanh bất kể bạn định dạng tệp css của mình như thế nào

tốc ký

Tốc ký thuận tiện nhưng đôi khi khó đọc

document.getElementsByClassName("block-name__element-name — modifier")

32

giống như

document.getElementsByClassName("block-name__element-name — modifier")

33

Nhưng ví dụ thứ hai dễ đọc hơn. Chỉ sử dụng tốc ký cho những trường hợp rõ ràng nhất, như thế này

document.getElementsByClassName("block-name__element-name — modifier")

34

Bởi vì nó rất dễ đọc, giống như

document.getElementsByClassName("block-name__element-name — modifier")

35

Lớp so với Bộ chọn ID

Nếu bạn không phải tham chiếu đối tượng cụ thể, bạn nên sử dụng lớp thay vì bộ chọn id, đặc biệt nếu chúng có cùng định dạng

Thay vì

document.getElementsByClassName("block-name__element-name — modifier")

36

Sử dụng

document.getElementsByClassName("block-name__element-name — modifier")

37

Chỉ sử dụng bộ chọn nếu

1. Sẽ chỉ có một đối tượng trong tài liệu
2. Bạn phải tham chiếu đối tượng đó bằng CSS hoặc JavaScript

Trong tất cả các trường hợp khác, hãy sử dụng các lớp

Các đơn vị

Cỡ chữ

Luôn sử dụng em thay vì pt, px, cm,

1

Điều này sẽ giữ cho trang web của bạn dễ truy cập hơn và bạn có thể dễ dàng thay đổi kích thước cỡ chữ của toàn bộ trang web nếu bạn cần nó lớn hơn hoặc nhỏ hơn

1

phong cách mã hóa

Cách trình bày

Đối với các kiểu ngắn hơn, bạn có thể sử dụng một dòng

.red { color: blue; }0

Nhưng nếu bạn có nhiều thuộc tính, sẽ tốt hơn và dễ đọc hơn nếu bạn tách nó ra trên mỗi dòng

.red { color: blue; }1

Cố gắng thụt lề và chặn css của bạn. Nếu bạn có nhiều bộ chọn có cùng thuộc tính, hãy phân tách chúng bằng dấu phẩy (,) và thụt lề

1

Nhóm các bộ chọn của bạn lại với nhau, nếu bạn có các bộ chọn mà bạn sử dụng trong tiêu đề, hãy đặt chúng cạnh nhau, thậm chí tốt hơn, hãy thêm nhận xét

.red { color: blue; }3

Nó sẽ dễ đọc hơn nếu bạn định dạng nó một chút như thế này

.red { color: blue; }4

Thực hành tốt nhất

Chức vụ

Sử dụng các tệp CSS bên ngoài. Giai đoạn = Stage

Đặt bảng định kiểu của bạn ở đầu tài liệu. Đặc tả HTML nêu rõ rằng các biểu định kiểu sẽ được đưa vào ĐẦU của trang

.red { color: blue; }5

Nhiều tệp CSS

Tốt hơn là nên có một tệp css lớn thay vì nhiều tệp nhỏ vì cách đó giúp bạn giảm yêu cầu http và vì trình duyệt lưu vào bộ đệm css, bạn sẽ thấy các lợi ích về hiệu suất ngay sau khi tải trang đầu tiên

@nhập khẩu

Đó là tính năng hay nhưng hiệu suất kém. Nó có tác dụng tương tự như cách sử dụng ở cuối trang

Biểu thức

Không bao giờ sử dụng các biểu thức trừ khi bạn thực sự phải. Sẽ tốt hơn và tương thích hơn khi sử dụng javascript nếu bạn cần tính năng như vậy

.red { color: blue; }6

Sử dụng lại phong cách

Bạn nên sử dụng lại các phong cách bạn đã có nhưng đôi khi tốt hơn là bỏ qua nó. Nếu bạn có các kiểu phổ biến của mình (ví dụ: định dạng MẪU) và bạn đưa nó vào một dự án mới mà bạn không có biểu mẫu (hoặc biểu mẫu rất đơn giản), thì điều đó chỉ lãng phí băng thông vì bạn không chỉ tải nhiều hơn mức cần thiết,

Hiệu suất

Thu nhỏ tệp css của bạn. Toán học rất đơn giản, nếu bạn có 5.000 lượt truy cập mỗi ngày (hãy tính css trong bộ đệm của trình duyệt đó để nó không tải mỗi lần) và bạn có tệp CSS là 25KB thay vì 50KB, đó là mức tiết kiệm băng thông là 125. 000 KB hoặc 122 MB. Hằng ngày. Đó là 3GB mỗi tháng cho một tệp CSS. Không khó để tưởng tượng bạn tiết kiệm được bao nhiêu cho tất cả các tệp CSS và JS, cộng với hình ảnh. nó có thể giảm băng thông hơn 10GB mỗi tháng trên một tên miền và việc này rất dễ dàng và đơn giản để thực hiện

Giảm số lượng phần tử DOM

Tối ưu hóa hình ảnh và nếu bạn sử dụng nhiều biểu tượng, hãy tạo một hình ảnh lớn với tất cả các biểu tượng và tạo kiểu css bằng cách sử dụng các họa tiết

Tôi nên đặt tên cho tệp CSS của mình như thế nào?

Quy ước đặt tên thích hợp để chọn tên lớp CSS là gì?

Các quy ước đặt tên khác nhau là gì?

Cái nào là thực hành quy ước tốt nhất liên quan đến CSS?