Css xóa ký tự

Tài liệu này xác định các quy tắc định dạng và kiểu cho HTML và CSS. Nó nhằm mục đích cải thiện sự hợp tác, chất lượng mã và cho phép cơ sở hạ tầng hỗ trợ. Nó áp dụng cho các tệp thô, đang hoạt động sử dụng HTML và CSS, bao gồm các tệp GSS. Các công cụ được tự do làm xáo trộn, thu nhỏ và biên dịch miễn là chất lượng mã chung được duy trì

Chung

Quy tắc phong cách chung

giao thức

Sử dụng HTTPS cho các tài nguyên được nhúng nếu có thể

Luôn sử dụng HTTPS (

3) cho hình ảnh và các tệp phương tiện khác, biểu định kiểu và tập lệnh, trừ khi các tệp tương ứng không khả dụng qua HTTPS

______3

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

Quy tắc định dạng chung

thụt đầu dòng

Thụt lề 2 dấu cách cùng một lúc

Không sử dụng các tab hoặc trộn các tab và dấu cách để thụt đầu dòng

  
Fantastic
  
Great

.example {
  color: blue;
}

viết hoa

Chỉ sử dụng chữ thường

Tất cả mã phải là chữ thường. Điều này áp dụng cho tên phần tử HTML, thuộc tính, giá trị thuộc tính (trừ khi

4), bộ chọn CSS, thuộc tính và giá trị thuộc tính (ngoại trừ chuỗi)

Home

0

1

Dấu cách

Xóa khoảng trắng ở cuối

Các khoảng trắng ở cuối là không cần thiết và có thể làm phức tạp sự khác biệt

0

1

mã hóa

Sử dụng UTF-8 (không có BOM)

Đảm bảo trình chỉnh sửa của bạn sử dụng UTF-8 làm mã hóa ký tự, không có dấu thứ tự byte

Chỉ định mã hóa trong các mẫu và tài liệu HTML qua

5. Không chỉ định mã hóa của biểu định kiểu vì chúng giả sử UTF-8

(Thông tin thêm về mã hóa cũng như thời điểm và cách chỉ định chúng có thể được tìm thấy trong Xử lý mã hóa ký tự trong HTML và CSS. )

Giải thích mã khi cần, nếu có thể

Sử dụng nhận xét để giải thích mã. Nó bao gồm những gì, nó phục vụ mục đích gì, tại sao giải pháp tương ứng được sử dụng hoặc ưu tiên?

(Mục này là tùy chọn vì nó không được coi là kỳ vọng thực tế khi luôn yêu cầu mã được lập thành văn bản đầy đủ. Số dặm có thể thay đổi nhiều đối với mã HTML và CSS và phụ thuộc vào độ phức tạp của dự án. )

Mục hành động

Đánh dấu todo và các mục hành động với

6

Làm nổi bật todo bằng cách chỉ sử dụng từ khóa

6, không phải các định dạng phổ biến khác như

8

Nối một số liên lạc (tên người dùng hoặc danh sách gửi thư) trong ngoặc đơn như với định dạng

9

Nối các mục hành động sau dấu hai chấm như trong

00

2____23

Quy tắc kiểu HTML

loại tài liệu

Sử dụng HTML5

HTML5 (cú pháp HTML) được ưu tiên cho tất cả các tài liệu HTML.

(Bạn nên sử dụng HTML, vì

01. Không sử dụng XHTML. XHTML, như

02, thiếu hỗ trợ cả trình duyệt và cơ sở hạ tầng và cung cấp ít chỗ để tối ưu hóa hơn HTML. )

Mặc dù tốt với HTML, nhưng đừng đóng các phần tử void, tôi. e. viết

03, không phải

03

Hiệu lực HTML

Sử dụng HTML hợp lệ nếu có thể

Sử dụng mã HTML hợp lệ trừ khi điều đó là không thể do các mục tiêu hiệu suất không thể đạt được liên quan đến kích thước tệp

Sử dụng các công cụ như trình xác thực HTML W3C để kiểm tra

Sử dụng HTML hợp lệ là một thuộc tính chất lượng cơ sở có thể đo lường được, góp phần tìm hiểu về các yêu cầu và ràng buộc kỹ thuật, đồng thời đảm bảo việc sử dụng HTML phù hợp

4

5

ngữ nghĩa

Sử dụng HTML theo mục đích của nó

Sử dụng các phần tử (đôi khi được gọi không chính xác là “thẻ”) cho mục đích mà chúng được tạo ra. Ví dụ: sử dụng phần tử tiêu đề cho tiêu đề, phần tử

05 cho đoạn văn, phần tử

06 cho phần neo, v.v.

Sử dụng HTML theo mục đích của nó rất quan trọng vì các lý do về khả năng truy cập, tái sử dụng và hiệu quả của mã

6

7

Cung cấp nội dung thay thế cho đa phương tiện

Đối với đa phương tiện, chẳng hạn như hình ảnh, video, đối tượng hoạt hình qua

07, hãy đảm bảo cung cấp quyền truy cập thay thế. Đối với hình ảnh có nghĩa là sử dụng văn bản thay thế có ý nghĩa (

08) và đối với bản ghi và chú thích video và âm thanh, nếu có

Cung cấp nội dung thay thế rất quan trọng vì lý do tiếp cận. Người dùng khiếm thị có ít dấu hiệu để biết hình ảnh nói về cái gì mà không có

09 và những người dùng khác có thể không có cách nào hiểu được nội dung video hoặc âm thanh nói về điều gì.

(Đối với những hình ảnh có thuộc tính

08 sẽ tạo ra sự dư thừa và đối với những hình ảnh có mục đích hoàn toàn là trang trí mà bạn không thể sử dụng CSS ngay lập tức, không sử dụng văn bản thay thế nào, như trong

11. )

8

9

Tách mối quan tâm

Tách cấu trúc khỏi trình bày khỏi hành vi

Giữ nguyên cấu trúc (đánh dấu), trình bày (kiểu dáng) và hành vi (kịch bản) và cố gắng giữ sự tương tác giữa ba yếu tố này ở mức tối thiểu

Nghĩa là, đảm bảo các tài liệu và mẫu chỉ chứa HTML và HTML chỉ phục vụ mục đích cấu trúc. Di chuyển mọi thứ mang tính trình bày vào biểu định kiểu và mọi thứ hành vi thành tập lệnh

Ngoài ra, hãy giữ cho khu vực liên hệ càng nhỏ càng tốt bằng cách liên kết càng ít biểu định kiểu và tập lệnh càng tốt từ các tài liệu và mẫu

Việc tách cấu trúc khỏi cách trình bày khỏi hành vi là rất quan trọng vì lý do bảo trì. Việc thay đổi các tài liệu và mẫu HTML luôn tốn kém hơn so với việc cập nhật biểu định kiểu và tập lệnh

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

0

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

1

Tham chiếu thực thể

Không sử dụng tham chiếu thực thể

Không cần sử dụng tham chiếu thực thể như

12,

13 hoặc

14, giả sử mã hóa giống nhau (UTF-8) được sử dụng cho các tệp và trình chỉnh sửa cũng như giữa các nhóm

Các ngoại lệ duy nhất áp dụng cho các ký tự có ý nghĩa đặc biệt trong HTML (như

15 và

16) cũng như các ký tự điều khiển hoặc “ẩn” (như dấu cách không ngắt)

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

2____33

Thẻ tùy chọn

Bỏ qua các thẻ tùy chọn (không bắt buộc)

Đối với các mục đích tối ưu hóa kích thước tệp và khả năng quét, hãy cân nhắc bỏ qua các thẻ tùy chọn. Đặc tả HTML5 xác định những thẻ nào có thể được bỏ qua

(Cách tiếp cận này có thể yêu cầu thời gian gia hạn để được thiết lập như một hướng dẫn rộng hơn vì nó khác biệt đáng kể so với những gì các nhà phát triển web thường được dạy. Vì lý do nhất quán và đơn giản, tốt nhất nên bỏ qua tất cả các thẻ tùy chọn, không chỉ một lựa chọn. )

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

4

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

5

Thuộc tính

17

Bỏ qua thuộc tính

17 cho biểu định kiểu và tập lệnh

Không sử dụng thuộc tính

17 cho biểu định kiểu (trừ khi không sử dụng CSS) và tập lệnh (trừ khi không sử dụng JavaScript)

Việc chỉ định các thuộc tính

17 trong các ngữ cảnh này là không cần thiết vì HTML5 ngụ ý mặc định là

01 và

02. Điều này có thể được thực hiện một cách an toàn ngay cả đối với các trình duyệt cũ hơn

______2

Thuộc tính

03

Tránh các thuộc tính

03 không cần thiết

Ưu tiên thuộc tính

05 để tạo kiểu và thuộc tính

06 để tạo tập lệnh

Khi các thuộc tính

03 được yêu cầu nghiêm ngặt, hãy luôn bao gồm dấu gạch nối trong giá trị để đảm bảo nó không khớp với cú pháp mã định danh JavaScript, e. g. sử dụng

08 thay vì chỉ

09 hoặc

10

Khi một phần tử có thuộc tính

03, các trình duyệt sẽ cung cấp thuộc tính đó dưới dạng thuộc tính được đặt tên trên nguyên mẫu

12 toàn cầu, điều này có thể gây ra hành vi không mong muốn. Mặc dù các giá trị thuộc tính

03 chứa dấu gạch nối vẫn có sẵn dưới dạng tên thuộc tính, nhưng chúng không thể được tham chiếu dưới dạng biến JavaScript toàn cầu

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

1

Quy tắc định dạng HTML

Định dạng chung

Sử dụng một dòng mới cho mọi thành phần khối, danh sách hoặc bảng và thụt lề cho mọi thành phần con như vậy

Không phụ thuộc vào kiểu dáng của một phần tử (vì CSS cho phép các phần tử đảm nhận một vai trò khác nhau cho mỗi thuộc tính

14), hãy đặt mọi phần tử khối, danh sách hoặc bảng trên một dòng mới

Ngoài ra, hãy thụt lề nếu chúng là phần tử con của phần tử khối, danh sách hoặc bảng

(Nếu bạn gặp vấn đề xung quanh khoảng trắng giữa các mục trong danh sách, bạn có thể đặt tất cả các phần tử

15 vào một dòng. Kẻ nói dối được khuyến khích đưa ra cảnh báo thay vì báo lỗi. )

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

2

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

3

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

4

Gói dòng HTML

Ngắt dòng dài (tùy chọn)

Mặc dù không có đề xuất giới hạn cột cho HTML, nhưng bạn có thể xem xét việc ngắt dòng dài nếu nó cải thiện đáng kể khả năng đọc

Khi ngắt dòng, mỗi dòng tiếp theo phải được thụt vào ít nhất 4 khoảng trắng bổ sung từ dòng gốc để phân biệt các thuộc tính được bao bọc với các phần tử con

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

5

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

5

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

5

Dấu ngoặc kép HTML

Khi trích dẫn các giá trị thuộc tính, hãy sử dụng dấu ngoặc kép

Sử dụng dấu ngoặc kép (

16) thay vì dấu ngoặc đơn (

17) xung quanh các giá trị thuộc tính

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

8

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

8

Quy tắc kiểu CSS

Hiệu lực CSS

Sử dụng CSS hợp lệ nếu có thể

Trừ khi xử lý các lỗi trình xác thực CSS hoặc yêu cầu cú pháp độc quyền, hãy sử dụng mã CSS hợp lệ

Sử dụng các công cụ như trình xác thực W3C CSS để kiểm tra

Sử dụng CSS hợp lệ là một thuộc tính chất lượng cơ sở có thể đo lường được, cho phép phát hiện mã CSS có thể không có bất kỳ ảnh hưởng nào và có thể bị xóa, đồng thời đảm bảo việc sử dụng CSS phù hợp

Đặt tên lớp

Sử dụng tên lớp có ý nghĩa hoặc chung chung

Thay vì tên trình bày hoặc tên khó hiểu, hãy luôn sử dụng tên lớp phản ánh mục đích của thành phần được đề cập hoặc tên khác chung chung

Các tên cụ thể và phản ánh mục đích của phần tử nên được ưu tiên vì những tên này dễ hiểu nhất và ít có khả năng thay đổi nhất

Tên chung chỉ đơn giản là dự phòng cho các phần tử không có ý nghĩa cụ thể hoặc không có ý nghĩa khác với anh chị em của chúng. Họ thường được cần đến với tư cách là “người trợ giúp. ”

Sử dụng tên chức năng hoặc tên chung làm giảm khả năng thay đổi mẫu hoặc tài liệu không cần thiết

  
Fantastic
  
Great

0

  
Fantastic
  
Great

1

Tên lớp Phong cách

Sử dụng tên lớp càng ngắn càng tốt nhưng miễn là cần thiết

Cố gắng truyền đạt nội dung của lớp học càng ngắn gọn càng tốt

Sử dụng tên lớp theo cách này góp phần vào mức độ dễ hiểu và hiệu quả mã có thể chấp nhận được

  
Fantastic
  
Great

2____53

Dấu phân cách tên lớp

Tách các từ trong tên lớp bằng dấu gạch nối

Không nối các từ và chữ viết tắt trong bộ chọn bởi bất kỳ ký tự nào (không bao gồm ký tự nào cả) ngoài dấu gạch nối, để cải thiện khả năng hiểu và quét

  
Fantastic
  
Great

4

  
Fantastic
  
Great

5

tiền tố

Bộ chọn tiền tố có tiền tố dành riêng cho ứng dụng (tùy chọn)

Trong các dự án lớn cũng như đối với mã được nhúng trong các dự án khác hoặc trên các trang web bên ngoài, hãy sử dụng tiền tố (dưới dạng không gian tên) cho tên lớp. Sử dụng số nhận dạng ngắn, duy nhất theo sau là dấu gạch ngang

Sử dụng không gian tên giúp ngăn xung đột đặt tên và có thể giúp bảo trì dễ dàng hơn, chẳng hạn như trong các hoạt động tìm kiếm và thay thế

  
Fantastic
  
Great

6

Bộ chọn loại

Tránh các tên lớp đủ điều kiện với bộ chọn loại

Trừ khi cần thiết (ví dụ với các lớp trợ giúp), không sử dụng tên phần tử kết hợp với các lớp

Tránh các bộ chọn tổ tiên không cần thiết là hữu ích vì lý do hiệu suất

  
Fantastic
  
Great

7

  
Fantastic
  
Great

8

Bộ chọn ID

Tránh bộ chọn ID

Các thuộc tính ID dự kiến ​​sẽ là duy nhất trên toàn bộ trang, điều này khó đảm bảo khi một trang chứa nhiều thành phần do nhiều kỹ sư khác nhau làm việc. Bộ chọn lớp nên được ưu tiên trong mọi tình huống

  
Fantastic
  
Great

9

.example {
  color: blue;
}

0

Thuộc tính tốc ký

Sử dụng các thuộc tính tốc ký nếu có thể

CSS cung cấp nhiều thuộc tính tốc ký (như

18) nên được sử dụng bất cứ khi nào có thể, ngay cả trong trường hợp chỉ có một giá trị được đặt rõ ràng

Sử dụng các thuộc tính tốc ký rất hữu ích cho hiệu quả và tính dễ hiểu của mã

.example {
  color: blue;
}

1

.example {
  color: blue;
}

2

0 và Đơn vị

Bỏ qua thông số kỹ thuật của đơn vị sau các giá trị “0”, trừ khi được yêu cầu

Không sử dụng các đơn vị sau giá trị

19 trừ khi chúng được yêu cầu

.example {
  color: blue;
}

3

Số 0 dẫn đầu

Luôn bao gồm các số “0” đứng đầu trong các giá trị

Đặt

19 trước các giá trị hoặc độ dài từ -1 đến 1

.example {
  color: blue;
}

4

Ký hiệu thập lục phân

Sử dụng ký hiệu thập lục phân 3 ký tự nếu có thể

Đối với các giá trị màu cho phép, ký hiệu thập lục phân 3 ký tự ngắn hơn và cô đọng hơn

.example {
  color: blue;
}

5

.example {
  color: blue;
}

6

Tuyên bố quan trọng

Tránh sử dụng khai báo

21

Các khai báo này phá vỡ chuỗi CSS tự nhiên và gây khó khăn cho việc suy luận và soạn các kiểu. Thay vào đó, hãy sử dụng tính đặc hiệu của bộ chọn để ghi đè các thuộc tính

.example {
  color: blue;
}

7

.example {
  color: blue;
}

8

hack

Tránh bị phát hiện tác nhân người dùng cũng như "hack" CSS—trước tiên hãy thử một cách tiếp cận khác

Thật hấp dẫn khi giải quyết sự khác biệt về kiểu dáng đối với phát hiện tác nhân người dùng hoặc các bộ lọc CSS đặc biệt, cách giải quyết và hack. Cả hai cách tiếp cận nên được coi là phương sách cuối cùng để đạt được và duy trì một cơ sở mã hiệu quả và dễ quản lý. Nói cách khác, việc cho phép phát hiện và hack miễn phí sẽ ảnh hưởng đến các dự án về lâu dài vì các dự án có xu hướng chọn cách ít bị kháng cự nhất. Nghĩa là, cho phép và làm cho việc sử dụng tính năng phát hiện và hack trở nên dễ dàng có nghĩa là sử dụng tính năng phát hiện và hack thường xuyên hơn—và thường xuyên hơn là quá thường xuyên

Quy tắc định dạng CSS

Lệnh khai báo

Bảng chữ cái khai báo (tùy chọn)

Sắp xếp các khai báo một cách nhất quán trong một dự án. Trong trường hợp không có công cụ để tự động hóa và thực thi thứ tự sắp xếp nhất quán, hãy xem xét đặt các khai báo theo thứ tự bảng chữ cái để đạt được mã nhất quán theo cách dễ học, dễ nhớ và duy trì theo cách thủ công

Bỏ qua các tiền tố dành riêng cho nhà cung cấp cho mục đích sắp xếp. Tuy nhiên, nhiều tiền tố dành riêng cho nhà cung cấp cho một thuộc tính CSS nhất định phải được sắp xếp (e. g. tiền tố -moz xuất hiện trước -webkit)

.example {
  color: blue;
}

9

Chặn thụt lề nội dung

Thụt lề tất cả nội dung khối

Thụt lề tất cả nội dung khối, đó là quy tắc trong quy tắc cũng như khai báo, do đó, để phản ánh hệ thống phân cấp và nâng cao hiểu biết

Home

0

Tuyên bố dừng

Sử dụng dấu chấm phẩy sau mỗi khai báo

Kết thúc mọi khai báo bằng dấu chấm phẩy vì lý do nhất quán và khả năng mở rộng

Home

1

Home

2

Tên tài sản Dừng lại

Sử dụng khoảng trắng sau dấu hai chấm của tên thuộc tính

Luôn sử dụng một khoảng trắng giữa thuộc tính và giá trị (nhưng không có khoảng trắng giữa thuộc tính và dấu hai chấm) vì lý do nhất quán

Home

3

Home

4

Tách khối khai báo

Sử dụng khoảng cách giữa bộ chọn cuối cùng và khối khai báo

Luôn sử dụng một khoảng trắng giữa bộ chọn cuối cùng và dấu ngoặc mở bắt đầu khối khai báo

Dấu ngoặc mở phải nằm trên cùng một dòng với bộ chọn cuối cùng trong một quy tắc nhất định

Home

5

Home

6

Bộ chọn và Tách Tuyên bố

Tách các bộ chọn và khai báo bằng các dòng mới

Luôn bắt đầu một dòng mới cho mỗi bộ chọn và khai báo

Home

7

Home

8

Tách quy tắc

Tách các quy tắc bằng các dòng mới

Luôn đặt một dòng trống (ngắt hai dòng) giữa các quy tắc

Home

9

Dấu ngoặc kép CSS

Sử dụng dấu ngoặc đơn (

17) thay vì dấu ngoặc kép (

16) cho bộ chọn thuộc tính và giá trị thuộc tính

Không sử dụng dấu ngoặc kép trong giá trị URI (

24)

Ngoại lệ. Nếu bạn cần sử dụng quy tắc

25, hãy sử dụng dấu ngoặc kép—không được phép sử dụng dấu ngoặc kép

0

1

Nhóm các phần theo nhận xét phần (tùy chọn)

Nếu có thể, hãy nhóm các phần biểu định kiểu lại với nhau bằng cách sử dụng nhận xét. Các phần riêng biệt với các dòng mới

2

lời chia tay

Hãy nhất quán

Nếu bạn đang chỉnh sửa mã, hãy dành vài phút để xem mã xung quanh bạn và xác định phong cách của nó. Nếu họ sử dụng khoảng trắng xung quanh tất cả các toán tử số học của họ, thì bạn cũng nên. Nếu nhận xét của họ có các hộp dấu thăng nhỏ xung quanh, hãy làm cho nhận xét của bạn cũng có các hộp dấu thăng nhỏ xung quanh chúng

Mục đích của việc có các hướng dẫn về phong cách là có một vốn từ vựng chung về viết mã để mọi người có thể tập trung vào những gì bạn đang nói hơn là vào cách bạn nói. Chúng tôi trình bày các quy tắc phong cách toàn cầu ở đây để mọi người biết từ vựng, nhưng phong cách địa phương cũng rất quan trọng. Nếu mã bạn thêm vào một tệp trông khác hẳn so với mã hiện có xung quanh nó, nó sẽ khiến người đọc mất nhịp khi họ đọc nó. Tránh điều này