Hướng dẫn is css very difficult? - css có khó lắm không?

CSS là ngôn ngữ chúng tôi sử dụng để tạo kiểu cho một tài liệu HTML.

CSS mô tả cách hiển thị các phần tử HTML.

Hướng dẫn này sẽ dạy bạn CSS từ cơ bản đến nâng cao.

Bắt đầu học CSS ngay bây giờ »

---

Ví dụ trong mỗi chương

Hướng dẫn CSS này chứa hàng trăm ví dụ CSS.

Với trình soạn thảo trực tuyến của chúng tôi, bạn có thể chỉnh sửa CSS và nhấp vào nút để xem kết quả.

Ví dụ CSS

Body {& nbsp; & nbsp; màu nền: lightBlue;}
  background-color: lightblue;
}

H2 {& nbsp; & nbsp; màu: màu trắng; & nbsp; & nbsp; văn bản-align: trung tâm; }
  color: white;
  text-align: center;
}

p {& nbsp; Phông chữ-gia đình: Verdana; & nbsp; & nbsp; kích thước phông chữ: 20px; }
  font-family: verdana;
  font-size: 20px;
}

Hãy tự mình thử »

Nhấp vào nút "Hãy tự mình thử" để xem nó hoạt động như thế nào.

---

Ví dụ CSS

Tìm hiểu từ hơn 300 ví dụ! Với trình chỉnh sửa của chúng tôi, bạn có thể chỉnh sửa CSS và nhấp vào nút để xem kết quả.

Đi đến ví dụ CSS!

---

Sử dụng menu

Chúng tôi khuyên bạn nên đọc hướng dẫn này, trong chuỗi được liệt kê trong menu.

Nếu bạn có một màn hình lớn, menu sẽ luôn có mặt ở bên trái.

Nếu bạn có một màn hình nhỏ, hãy mở menu bằng cách nhấp vào dấu hiệu Menu trên cùng.☰.

---

Mẫu CSS

Chúng tôi đã tạo một số mẫu W3.CSS đáp ứng để bạn sử dụng.

Bạn có thể tự do sửa đổi, lưu, chia sẻ và sử dụng chúng trong tất cả các dự án của bạn.

Mẫu CSS miễn phí!

---

---

Bài tập CSS

---

Câu đố CSS

Kiểm tra kỹ năng CSS của bạn với một bài kiểm tra.

Bắt đầu câu đố CSS!

---

Việc học của tôi

Theo dõi tiến trình của bạn với chương trình "Học tập" miễn phí tại đây tại W3Schools.

Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm!

Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng học tập của tôi.

---

Tài liệu tham khảo CSS

Tại W3Schools, bạn sẽ tìm thấy các tài liệu tham khảo CSS hoàn chỉnh của tất cả các thuộc tính và bộ chọn với cú pháp, ví dụ, hỗ trợ trình duyệt, v.v.

Khởi động sự nghiệp của bạn

Được chứng nhận bằng cách hoàn thành khóa họcthe course

Được chứng nhận

W3SchoolScertified.2022

Lời khuyên và hướng dẫn cấp cao để viết CSS lành mạnh, có thể quản lý, có thể mở rộng

Hướng dẫn CSS là một tài liệu của tôi, Harry Roberts. Tôi là một kiến ​​trúc sư đầu tư tư vấn từ Vương quốc Anh và tôi giúp các công ty trên toàn thế giới viết và quản lý UI chất lượng tốt hơn cho các sản phẩm và nhóm của họ. Tôi có sẵn để thuê.

Theo dõi tôi trên Twitter hoặc thuê tôiTwitter or Hire Me

---

Hỗ trợ các hướng dẫn

Hướng dẫn CSS được cung cấp thông qua mô hình thanh toán giống như bạn từ 0 đô la trở lên. Nếu hướng dẫn CSS hữu ích cho bạn hoặc nhóm của bạn, vui lòng xem xét hỗ trợ nó.

Hỗ trợ các hướng dẫn

Nhận thông tin cập nhật về các thay đổi, bổ sung và các phần mới và sắp tới bằng cách theo dõi @CSSSguidelines trên Twitter.

---

Nội dung

• Giới thiệu
  • Tầm quan trọng của một kiểu dáng
  • Từ chối trách nhiệm
• Cú pháp và định dạng
  • Nhiều tập tin
  • Mục lục
  • Rộng 80 ký tự
  • Tiêu đề
  • Giải phẫu của một quy tắc
  • CSS đa dòng
  • Thụt lề
    • Thụt lề sass
    • Liên kết
  • Khoảng trắng có ý nghĩa
  • HTML
• Bình luận
  • High-level
    • Con trỏ mở rộng đối tượng
  • Low-level
  • Nhận xét tiền xử lý
  • Loại bỏ ý kiến
• Đặt tên quy ước
  • Dấu gạch nối được phân định
  • Đặt tên giống như BEM
    • Bối cảnh bắt đầu
    • Nhiều lớp hơn
    • Sửa đổi các yếu tố
  • Đặt tên quy ước trong HTML
  • Móc JavaScript

    • .foo, .foo--bar, .baz
      {
      	display:block;
      	background-color:green;
      	color:red }
      

      4 thuộc tính
  • Đưa nó đi xa hơn
• Bộ chọn CSS
  • Mục đích chọn
  • Khả năng tái sử dụng
  • Vị trí độc lập
  • Tính di động
    • Bộ chọn bán đủ điều kiện
  • Đặt tên
    • Đặt tên cho các thành phần UI
  • Hiệu suất chọn
    • Bộ chọn chính
  • Quy tắc chung
• Tính đặc hiệu
  • ID trong CSS
  • Làm tổ

  • .foo, .foo--bar, .baz
    {
    	display:block;
    	background-color:green;
    	color:red }
    

    5
  • Hack tính đặc hiệu
• Nguyên tắc kiến ​​trúc
  • Tổng quan cấp cao
  • Object-orientation
  • Nguyên tắc trách nhiệm duy nhất
  • Nguyên tắc mở/đóng
  • KHÔ
  • Thành phần trên kế thừa
  • Sự tách biệt của các mối quan tâm
    • Quan niệm sai lầm

Tiếp theo

• Tiền xử lý
• Cách trình bày
• Màn biểu diễn
• Sự tỉnh táo, đơn giản
• Mã có mùi
• Di sản, hack và nợ kỹ thuật

---

Giới thiệu

Tầm quan trọng của một kiểu dáng

Từ chối trách nhiệm

• Cú pháp và định dạng
• Nhiều tập tin
• Mục lục

Rộng 80 ký tự

Tầm quan trọng của một kiểu dáng

Từ chối trách nhiệm

• Cú pháp và định dạng
• Nhiều tập tin
• Mục lục
• Rộng 80 ký tự
• Tiêu đề

Giải phẫu của một quy tắc

CSS đa dòng

• Thụt lề
• Thụt lề sass
• Liên kết
• Khoảng trắng có ý nghĩa

HTML

Từ chối trách nhiệm

Cú pháp và định dạng

Nhiều tập tin

---

Cú pháp và định dạng

Nhiều tập tin

Mục lục

Ở cấp độ rất cao, chúng tôi muốn

• Hai (2) không gian indents, không có tab;
• 80 cột rộng ký tự;
• CSS đa dòng;
• Sử dụng có ý nghĩa của khoảng trắng.

Nhưng, như với bất cứ điều gì, các chi tiết cụ thể có phần không liên quan đến sự thống nhất là chìa khóa.

Nhiều tập tin

Với sự gia tăng thiên thạch của các tiền xử lý muộn, thường là trường hợp các nhà phát triển đang chia CSS trên nhiều tệp.

Ngay cả khi không sử dụng bộ xử lý tiền xử lý, nên chia các đoạn mã riêng biệt vào các tệp của riêng họ, được nối trong bước xây dựng.

Nếu, vì bất kỳ lý do gì, bạn không làm việc trên nhiều tệp, các phần tiếp theo có thể yêu cầu một số uốn cong để phù hợp với thiết lập của bạn.

Mục lục

Một bảng nội dung là một chi phí bảo trì khá đáng kể, nhưng những lợi ích mà nó mang lại vượt xa mọi chi phí. Phải mất một nhà phát triển siêng năng để giữ một bảng nội dung được cập nhật, nhưng nó rất đáng để gắn bó. Một bảng nội dung cập nhật cung cấp cho một nhóm một danh mục chính thống về những gì trong dự án CSS, những gì nó làm và theo thứ tự nào.

Một bảng nội dung đơn giản sẽ theo thứ tự, một cách tự nhiên, chỉ đơn giản là cung cấp tên của phần và một bản tóm tắt ngắn gọn về những gì nó là và làm, ví dụ::

/**
 * CONTENTS
 *
 * SETTINGS
 * Global...............Globally-available variables and config.
 *
 * TOOLS
 * Mixins...............Useful mixins.
 *
 * GENERIC
 * Normalize.css........A level playing field.
 * Box-sizing...........Better default `box-sizing`.
 *
 * BASE
 * Headings.............H1–H6 styles.
 *
 * OBJECTS
 * Wrappers.............Wrapping and constraining elements.
 *
 * COMPONENTS
 * Page-head............The main page header.
 * Page-foot............The main page footer.
 * Buttons..............Button elements.
 *
 * TRUMPS
 * Text.................Text helpers.
 */

Mỗi mục ánh xạ vào một phần và/hoặc bao gồm.

Đương nhiên, phần này sẽ lớn hơn đáng kể đối với phần lớn các dự án, nhưng hy vọng chúng ta có thể thấy phần này trong phần này trong các nhà phát triển cung cấp cho các nhà phát triển với một cái nhìn toàn diện về những gì đang được sử dụng ở đâu và tại sao.

Rộng 80 ký tự

Nếu có thể, giới hạn các tệp CSS có chiều rộng đến 80 ký tự. Lý do cho điều này bao gồm

• khả năng có nhiều tập tin mở cạnh nhau;
• Xem CSS trên các trang web như GitHub, hoặc trong các cửa sổ cuối cùng;
• Cung cấp một chiều dài dòng thoải mái cho bình luận.

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

Sẽ có những ngoại lệ không thể tránh khỏi đối với quy tắc này, chẳng hạn như các URL, hoặc cú pháp gradient, điều mà không nên lo lắng.

Tiêu đề

Bắt đầu mọi phần chính mới của dự án CSS với tiêu đề:

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

Tiêu đề của phần này được đặt trước với biểu tượng băm (

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

6) để cho phép chúng tôi thực hiện các tìm kiếm được nhắm mục tiêu nhiều hơn (ví dụ:

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

7, v.v.): Thay vì tìm kiếm chỉ mục tiêu. #Phần tiêu đề chỉ nên trả lại phần trong câu hỏi.

Để lại một cỗ xe trở lại giữa tiêu đề này và dòng mã tiếp theo (có thể là một bình luận, một số sass hoặc một số CSS).

Nếu bạn đang làm việc trên một dự án trong đó mỗi phần là tệp riêng của nó, tiêu đề này sẽ xuất hiện ở đầu mỗi phần. Nếu bạn đang làm việc trên một dự án với nhiều phần cho mỗi tệp, mỗi tiêu đề sẽ được đi trước bởi năm (5) lợi nhuận vận chuyển. Điều này có thêm khoảng trắng kết hợp với một tiêu đề giúp các phần mới dễ dàng phát hiện hơn nhiều khi cuộn qua các tệp lớn:

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

Giải phẫu của một quy tắc

Trước khi chúng ta thảo luận về cách chúng ta viết ra các quy tắc của mình, trước tiên hãy để bản thân làm quen với thuật ngữ có liên quan:

[selector] {
  [property]: [value];
  [<--declaration--->]
}

Ví dụ:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

Ở đây bạn có thể thấy chúng tôi có

• bộ chọn liên quan trên cùng một dòng; Bộ chọn không liên quan trên các dòng mới;
• một không gian trước nẹp mở của chúng tôi (

  .foo, .foo--bar, .baz
  {
  	display:block;
  	background-color:green;
  	color:red }
  

  8);
• thuộc tính và giá trị trên cùng một dòng;
• một không gian sau khi tài sản của chúng tôi có giá trị phân định đại tràng (

  .foo, .foo--bar, .baz
  {
  	display:block;
  	background-color:green;
  	color:red }
  

  9);
• mỗi tuyên bố trên dòng mới của riêng mình;
• Nẹp mở (

  .foo, .foo--bar, .baz
  {
  	display:block;
  	background-color:green;
  	color:red }
  

  8) trên cùng một dòng với bộ chọn cuối cùng của chúng tôi;
• Tuyên bố đầu tiên của chúng tôi trên một dòng mới sau khi chúng tôi mở nẹp (

  .foo, .foo--bar, .baz
  {
  	display:block;
  	background-color:green;
  	color:red }
  

  8);
• Nẹp đóng của chúng tôi (

  .icon {
    display: inline-block;
    width:  16px;
    height: 16px;
    background-image: url(/img/sprite.svg);
  }
  
  .icon--home     { background-position:   0     0  ; }
  .icon--person   { background-position: -16px   0  ; }
  .icon--files    { background-position:   0   -16px; }
  .icon--settings { background-position: -16px -16px; }
  

  2) trên dòng mới của riêng nó;
• mỗi tuyên bố được thụt vào bởi hai (2) không gian;
• Một đại tá bán hàng kéo dài (

  .icon {
    display: inline-block;
    width:  16px;
    height: 16px;
    background-image: url(/img/sprite.svg);
  }
  
  .icon--home     { background-position:   0     0  ; }
  .icon--person   { background-position: -16px   0  ; }
  .icon--files    { background-position:   0   -16px; }
  .icon--settings { background-position: -16px -16px; }
  

  3) trên tuyên bố cuối cùng của chúng tôi.

Định dạng này dường như là tiêu chuẩn phần lớn phổ biến (ngoại trừ các biến thể về số lượng không gian, với rất nhiều nhà phát triển thích hai (2)).

Như vậy, điều sau đây sẽ không chính xác:

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

Các vấn đề ở đây bao gồm

• tab thay vì không gian;
• Bộ chọn không liên quan trên cùng một dòng;
• Nẹp mở (

  .foo, .foo--bar, .baz
  {
  	display:block;
  	background-color:green;
  	color:red }
  

  8) trên dòng riêng của nó;
• Nẹp đóng (

  .icon {
    display: inline-block;
    width:  16px;
    height: 16px;
    background-image: url(/img/sprite.svg);
  }
  
  .icon--home     { background-position:   0     0  ; }
  .icon--person   { background-position: -16px   0  ; }
  .icon--files    { background-position:   0   -16px; }
  .icon--settings { background-position: -16px -16px; }
  

  2) không ngồi trên đường riêng của nó;
• Trailing (và, được thừa nhận, tùy chọn) Semi-Colon (

  .icon {
    display: inline-block;
    width:  16px;
    height: 16px;
    background-image: url(/img/sprite.svg);
  }
  
  .icon--home     { background-position:   0     0  ; }
  .icon--person   { background-position: -16px   0  ; }
  .icon--files    { background-position:   0   -16px; }
  .icon--settings { background-position: -16px -16px; }
  

  3) bị thiếu;
• Không có không gian sau đại phân (

  .foo, .foo--bar, .baz
  {
  	display:block;
  	background-color:green;
  	color:red }
  

  9).

CSS đa dòng

CSS nên được viết trên nhiều dòng, ngoại trừ trong các trường hợp rất cụ thể. Có một số lợi ích cho việc này:

• Giảm cơ hội hợp nhất xung đột, bởi vì mỗi phần chức năng tồn tại trên dòng riêng của nó.
• Nhiều hơn và đáng tin cậy

  .icon {
    display: inline-block;
    width:  16px;
    height: 16px;
    background-image: url(/img/sprite.svg);
  }
  
  .icon--home     { background-position:   0     0  ; }
  .icon--person   { background-position: -16px   0  ; }
  .icon--files    { background-position:   0   -16px; }
  .icon--settings { background-position: -16px -16px; }
  

  8s, bởi vì một dòng chỉ có một thay đổi.

Các ngoại lệ cho quy tắc này nên khá rõ ràng, chẳng hạn như các quy tắc tương tự chỉ mang theo một tuyên bố, ví dụ:

.icon {
  display: inline-block;
  width:  16px;
  height: 16px;
  background-image: url(/img/sprite.svg);
}

.icon--home     { background-position:   0     0  ; }
.icon--person   { background-position: -16px   0  ; }
.icon--files    { background-position:   0   -16px; }
.icon--settings { background-position: -16px -16px; }

Những loại quy tắc này được hưởng lợi từ việc xếp hàng vì

• Họ vẫn phù hợp với quy tắc một lý do cho mỗi dòng;
• Họ chia sẻ đủ những điểm tương đồng mà họ không cần phải đọc kỹ như các quy tắc khác, có nhiều lợi ích hơn trong việc có thể quét các bộ chọn của họ, điều này được chúng tôi quan tâm nhiều hơn trong những trường hợp này.

Thụt lề

Cũng như thụt lề các khai báo riêng lẻ, ví dụ như toàn bộ các quy tắc liên quan để báo hiệu mối quan hệ của chúng với nhau, ví dụ:

.foo { }

  .foo__bar { }

    .foo__baz { }

Bằng cách này, một nhà phát triển có thể nhìn thấy trong nháy mắt rằng ____79 sống bên trong

.foo { }

  .foo__bar { }

    .foo__baz { }

0 sống bên trong

.foo { }

  .foo__bar { }

    .foo__baz { }

1.

Sự lặp lại gần như của DOM cho các nhà phát triển nói rất nhiều về nơi các lớp dự kiến ​​sẽ được sử dụng mà không cần phải đề cập đến một đoạn HTML.

Thụt lề sass

SASS cung cấp chức năng làm tổ. Điều đó có nghĩa là, bằng cách viết điều này:

.foo {
  color: red;

  .bar {
    color: blue;
  }

}

Chúng tôi sẽ bị bỏ lại với CSS đã biên dịch này:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

0

Khi thụt vào sass, chúng tôi dính vào cùng hai (2) không gian, và chúng tôi cũng để lại một đường trống trước và sau các quy tắc lồng nhau.

N.B. Nên tránh làm tổ trong Sass bất cứ nơi nào có thể. Xem phần đặc hiệu để biết thêm chi tiết. Nesting in Sass should be avoided wherever possible. See the Specificity section for more details.

Liên kết

Cố gắng sắp xếp các chuỗi giống hệt nhau và liên quan trong các khai báo, ví dụ:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

1

Điều này làm cho cuộc sống dễ dàng hơn một chút đối với các nhà phát triển có trình chỉnh sửa văn bản hỗ trợ chỉnh sửa cột, cho phép họ thay đổi một số dòng giống hệt nhau và căn chỉnh trong một lần.

Khoảng trắng có ý nghĩa

Cũng như thụt lề, chúng tôi có thể cung cấp rất nhiều thông tin thông qua việc sử dụng khoảng trắng tự do và hợp lý giữa các quy tắc. Chúng tôi sử dụng:

• Một (1) dòng trống giữa các quy tắc liên quan chặt chẽ.
• Hai (2) dòng trống giữa các quy tắc liên quan lỏng lẻo.
• Năm (5) dòng trống giữa các phần hoàn toàn mới.

Ví dụ:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

2

Không bao giờ nên có một kịch bản trong đó hai quy tắc không có một ranh giới trống giữa chúng. Điều này sẽ không chính xác:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

3

HTML

Với HTML và CSS, bản chất được kết nối với nhau, sẽ không có gì để tôi không bao gồm một số cú pháp và hướng dẫn định dạng cho đánh dấu.

Luôn luôn trích dẫn các thuộc tính, ngay cả khi chúng sẽ làm việc mà không có. Điều này làm giảm cơ hội tai nạn, và là một định dạng quen thuộc hơn cho phần lớn các nhà phát triển. Đối với tất cả điều này sẽ hoạt động (và là hợp lệ):

Định dạng này được ưa thích:

Các trích dẫn không được yêu cầu ở đây, nhưng ERR về phía an toàn và bao gồm chúng.

Khi viết nhiều giá trị trong một thuộc tính lớp, hãy tách chúng bằng hai không gian, do đó:

Khi nhiều lớp có liên quan với nhau, hãy xem xét nhóm chúng trong ngoặc vuông (

.foo { }

  .foo__bar { }

    .foo__baz { }

2 và

.foo { }

  .foo__bar { }

    .foo__baz { }

3), như vậy:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

4

Đây không phải là một khuyến nghị chắc chắn, và là thứ tôi vẫn đang thử nghiệm bản thân mình, nhưng nó mang lại một số lợi ích. Đọc thêm trong nhóm các lớp liên quan trong đánh dấu của bạn.

Như với các quy tắc của chúng tôi, có thể sử dụng khoảng trắng có ý nghĩa trong HTML của bạn. Bạn có thể biểu thị các lần phá vỡ theo chủ đề trong nội dung với năm (5) dòng trống, ví dụ:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

5

Ví dụ, tách biệt các đoạn đánh dấu độc lập nhưng liên quan đến lỏng lẻo với một dòng trống duy nhất:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

6

Điều này cho phép các nhà phát triển phát hiện ra các phần riêng biệt của DOM trong nháy mắt, và cũng cho phép một số trình chỉnh sửa văn bản nhất định như VIM, ví dụ như để thao tác các khối đánh dấu được loại bỏ trống.

Đọc thêm

• Nhóm các lớp liên quan trong đánh dấu của bạn

---

Chi phí nhận thức của việc làm việc với CSS là rất lớn. Với rất nhiều điều đáng chú ý, và rất nhiều sắc thái dành riêng cho dự án, tình huống tồi tệ nhất mà hầu hết các nhà phát triển thấy mình đang trở thành người mà-write-write-code. Ghi nhớ các lớp, quy tắc, đối tượng và người trợ giúp của riêng bạn có thể quản lý được ở một mức độ, nhưng bất kỳ ai thừa hưởng CSS hầu như không có cơ hội.

CSS cần thêm ý kiến.

Vì CSS là một thứ gì đó có ngôn ngữ tuyên bố mà không thực sự để lại nhiều đường mòn giấy, nên thường rất khó để nhận ra từ khi nhìn vào CSS một mình

• Liệu một số CSS có dựa vào mã khác ở nơi khác hay không;
• Hiệu ứng thay đổi một số mã sẽ có ở nơi khác;
• nơi nào khác có thể sử dụng một số CSS;
• phong cách nào một cái gì đó có thể kế thừa (cố ý hoặc cách khác);
• phong cách nào có thể truyền lại (cố ý hoặc cách khác);
• nơi tác giả dự định một phần CSS sẽ được sử dụng.

Điều này thậm chí còn có tính đến một số CSS, nhiều điều kỳ quặc như nhiều loại khác nhau của

.foo { }

  .foo__bar { }

    .foo__baz { }

4 kích hoạt bối cảnh định dạng khối, hoặc các thuộc tính biến đổi nhất định kích hoạt tăng tốc phần cứng mà làm cho nó trở nên khó khăn hơn đối với các nhà phát triển kế thừa các dự án.

Kết quả của CSS không kể câu chuyện của riêng mình, đó là một ngôn ngữ thực sự được hưởng lợi từ việc được bình luận rất nhiều.

Theo quy định, bạn nên bình luận bất cứ điều gì không rõ ràng ngay lập tức từ mã. Điều đó có nghĩa là, không cần phải nói với ai đó rằng

.foo { }

  .foo__bar { }

    .foo__baz { }

5 sẽ tạo ra thứ gì đó màu đỏ, nhưng nếu bạn sử dụng

.foo { }

  .foo__bar { }

    .foo__baz { }

6 để xóa phao, trái ngược với việc cắt một yếu tố tràn ra, thì điều này có lẽ là điều đáng ghi lại.

High-level

Đối với các nhận xét lớn tài liệu toàn bộ các phần hoặc thành phần, chúng tôi sử dụng nhận xét đa dòng docblock-esque tuân thủ chiều rộng 80 cột của chúng tôi.

Dưới đây là một ví dụ thực tế từ CSS tạo kiểu tiêu đề trang trên Wizardry CSS:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

7

Mức độ chi tiết này phải là tiêu chuẩn cho tất cả các mô tả mã không tầm thường về các trạng thái, hoán vị, điều kiện và phương pháp điều trị.

Con trỏ mở rộng đối tượng

Khi làm việc trên nhiều phần hoặc theo cách thức OOCSS, bạn sẽ thường thấy rằng các quy tắc có thể hoạt động cùng nhau không phải lúc nào cũng ở cùng một tệp hoặc vị trí. Ví dụ: bạn có thể có một đối tượng nút chung, cung cấp các kiểu cấu trúc thuần túy, được mở rộng trong một phần cấp độ thành phần sẽ thêm mỹ phẩm. Chúng tôi ghi lại mối quan hệ này trên các tệp với các con trỏ mở rộng đối tượng đơn giản. Trong tệp đối tượng:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

8

Và trong tập tin chủ đề của bạn:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

9

Nhận xét đơn giản, nỗ lực thấp này có thể tạo ra nhiều sự khác biệt cho các nhà phát triển không biết về các mối quan hệ giữa các dự án hoặc những người muốn biết làm thế nào, tại sao và nơi các phong cách khác có thể được kế thừa.

Low-level

Thông thường, chúng tôi muốn bình luận về các tuyên bố cụ thể (nghĩa là các dòng) trong một quy tắc. Để làm điều này, chúng tôi sử dụng một loại chú thích ngược. Dưới đây là một nhận xét phức tạp hơn chi tiết các tiêu đề trang web lớn hơn được đề cập ở trên:

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

0

Những loại bình luận này cho phép chúng tôi giữ tất cả các tài liệu của chúng tôi ở một nơi trong khi đề cập đến các phần của quy tắc mà chúng thuộc về.

Với hầu hết các bộ xử lý nếu không phải tất cả các bộ xử lý, chúng tôi có tùy chọn để viết các bình luận sẽ không được biên dịch vào tệp CSS kết quả của chúng tôi. Theo quy định, hãy sử dụng các bình luận này để tài liệu mã không được ghi vào tệp CSS đó. Nếu bạn đang ghi lại mã sẽ được biên dịch, hãy sử dụng các nhận xét cũng sẽ biên dịch. Ví dụ, điều này là chính xác:

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

1

Chúng tôi đã ghi lại các biến mã hóa mã sẽ không được biên dịch vào tệp CSS của chúng tôi với các nhận xét tiền xử lý, trong khi mã CSS của chúng tôi sẽ được biên dịch vào tệp CSS của chúng tôi là được ghi lại bằng cách sử dụng các nhận xét CSS. Điều này có nghĩa là chúng tôi chỉ có các thông tin chính xác và liên quan có sẵn cho chúng tôi khi gỡ lỗi các kiểu dáng được biên dịch của chúng tôi.

Không nên nói rằng không có ý kiến ​​nào nên đi vào môi trường sản xuất, tất cả các CSS nên được thu nhỏ, dẫn đến mất bình luận, trước khi được triển khai.

---

Đặt tên quy ước

Các quy ước đặt tên trong CSS rất hữu ích trong việc làm cho mã của bạn nghiêm ngặt hơn, minh bạch hơn và nhiều thông tin hơn.

Một hội nghị đặt tên tốt sẽ cho bạn biết và nhóm của bạn

• Loại điều gì mà một lớp học làm;
• nơi một lớp có thể được sử dụng;
• Những gì (khác) một lớp có thể liên quan đến.

Công ước đặt tên mà tôi tuân theo rất đơn giản: dấu gạch nối (

.foo { }

  .foo__bar { }

    .foo__baz { }

7), với việc đặt tên giống như BEM cho các đoạn mã phức tạp hơn.

Nó đáng chú ý rằng một quy ước đặt tên thường không hữu ích cho sự phát triển của CSS; Họ thực sự trở thành của riêng họ khi được xem trong HTML.

Dấu gạch nối được phân định

Tất cả các chuỗi trong các lớp được phân định bằng dấu gạch nối (

.foo { }

  .foo__bar { }

    .foo__baz { }

7), như vậy:

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

2

Trường hợp lạc đà và gạch dưới không được sử dụng cho các lớp học thông thường; sau đây không chính xác:

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

3

Đặt tên giống như BEM

Đối với các phần UI lớn hơn, có liên quan hơn đến một số lớp, chúng tôi sử dụng quy ước đặt tên giống như BEM.

BEM, có nghĩa là khối, phần tử, công cụ sửa đổi, là một phương pháp trước được đặt ra bởi các nhà phát triển làm việc tại Yandex. Trong khi Bem là một phương pháp hoàn chỉnh, ở đây chúng tôi chỉ quan tâm đến quy ước đặt tên của nó. Hơn nữa, quy ước đặt tên ở đây chỉ giống BEM; Các nguyên tắc chính xác giống nhau, nhưng cú pháp thực tế khác nhau một chút.

BEM chia các thành phần của các lớp học thành ba nhóm:

• Khối: gốc duy nhất của thành phần.
• Phần tử: Một phần thành phần của khối.
• Modifier: Một biến thể hoặc phần mở rộng của khối.

Để có một sự tương tự (lưu ý, không phải là một ví dụ):

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

4

Các yếu tố được phân định với hai (2) dấu gạch dưới (

.foo { }

  .foo__bar { }

    .foo__baz { }

9) và các công cụ sửa đổi được phân định bởi hai (2) dấu gạch nối (

.foo {
  color: red;

  .bar {
    color: blue;
  }

}

0).

Ở đây chúng ta có thể thấy rằng

.foo {
  color: red;

  .bar {
    color: blue;
  }

}

1 là khối; Đó là gốc duy nhất của một thực thể rời rạc.

.foo {
  color: red;

  .bar {
    color: blue;
  }

}

2 là một yếu tố; Nó là một phần nhỏ hơn của khối

.foo {
  color: red;

  .bar {
    color: blue;
  }

}

1. Cuối cùng,

.foo {
  color: red;

  .bar {
    color: blue;
  }

}

4 là một công cụ sửa đổi; Nó là một biến thể cụ thể của khối

.foo {
  color: red;

  .bar {
    color: blue;
  }

}

1.

Bối cảnh bắt đầu

Bối cảnh khối của bạn bắt đầu ở vị trí hợp lý nhất, khép kín, riêng biệt. Để tiếp tục với sự tương tự dựa trên con người của chúng tôi, chúng tôi không có một lớp như

.foo {
  color: red;

  .bar {
    color: blue;
  }

}

6, vì căn phòng là một bối cảnh khác, cao hơn nhiều. Chúng tôi có thể có các khối riêng biệt, như vậy:

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

5

Nếu chúng ta muốn biểu thị một

.foo {
  color: red;

  .bar {
    color: blue;
  }

}

1 bên trong

.foo {
  color: red;

  .bar {
    color: blue;
  }

}

8, việc sử dụng bộ chọn như

.foo {
  color: red;

  .bar {
    color: blue;
  }

}

9 sẽ chính xác hơn, kết nối hai khối so với việc tăng phạm vi của các khối và phần tử hiện có.

Một ví dụ thực tế hơn về các khối được phạm vi đúng có thể trông giống như thế này, trong đó mỗi đoạn mã đại diện cho khối riêng của nó:

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

6

Ký hiệu không chính xác cho điều này sẽ là:

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

7

Điều quan trọng là phải biết khi nào phạm vi BEM bắt đầu và dừng lại. Theo quy định, BEM áp dụng cho các bộ phận độc lập, riêng biệt của UI.

Nhiều lớp hơn

Nếu chúng ta thêm một phần tử khác được gọi là, hãy nói, ____ 100 100 vào thành phần ____991 này, chúng ta sẽ không cần phải bước qua từng lớp của DOM. Điều đó có nghĩa là, ký hiệu chính xác sẽ là

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

00, chứ không phải

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

03. Các lớp học của bạn không phản ánh toàn bộ đường mòn giấy của DOM.

Sửa đổi các yếu tố

Bạn có thể có các biến thể của các yếu tố, và chúng có thể được biểu thị theo một số cách tùy thuộc vào cách thức và lý do chúng được sửa đổi. Tiếp tục với ví dụ về con người của chúng tôi, một con mắt xanh có thể trông như thế này:

Ở đây chúng ta có thể thấy chúng ta trực tiếp sửa đổi phần tử mắt.

Mọi thứ có thể trở nên phức tạp hơn, tuy nhiên. Xin thứ lỗi cho sự tương tự thô thiển, và hãy để Lôi tưởng tượng chúng ta có một yếu tố khuôn mặt đẹp trai. Bản thân người đó không đẹp trai, vì vậy chúng tôi sửa đổi phần tử khuôn mặt trực tiếp, một khuôn mặt đẹp trai trên một người bình thường:

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

8

Nhưng điều gì sẽ xảy ra nếu người đó đẹp trai, và chúng ta muốn tạo kiểu cho khuôn mặt của họ vì thực tế đó? Một khuôn mặt thường xuyên trên một người đẹp trai:

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

9

Đây là một trong một vài lần chúng tôi sử dụng bộ chọn hậu duệ để sửa đổi một phần tử dựa trên một công cụ sửa đổi trên khối.

Nếu sử dụng SASS, chúng ta có thể sẽ viết điều này như vậy:

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

0

Lưu ý rằng chúng tôi không làm tổ một ví dụ mới của

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

04 bên trong

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

05; Thay vào đó, chúng tôi sử dụng các bộ chọn phụ huynh SASS, để chuẩn bị cho

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

06 vào bộ chọn

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

04 hiện có. Điều này có nghĩa là tất cả các quy tắc liên quan đến ____ 104 của chúng tôi tồn tại ở một nơi và aren lan truyền trong toàn bộ tệp. Đây là thực tiễn tốt chung khi xử lý mã lồng nhau: Giữ tất cả bối cảnh của bạn (ví dụ: tất cả mã

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

04) được đóng gói ở một vị trí.

Đặt tên quy ước trong HTML

Như trước đây tôi đã gợi ý, các quy ước đặt tên không nhất thiết phải là tất cả những gì hữu ích trong CSS của bạn. Trường hợp các quy ước đặt tên cho sức mạnh của bạn thực sự nằm trong sự đánh dấu của bạn. Lấy những điều sau đây, không đặt tên HTML:

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

1

Làm thế nào các lớp

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

10 và

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

11 liên quan đến nhau? Làm thế nào các lớp

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

11 và

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

13 liên quan đến nhau? Chúng có liên quan gì không? Bạn có nên sử dụng

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

14 cùng với

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

15 không? Các lớp

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

16 và

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

11 sẽ sống trong cùng một phần của CSS? Bạn có thể sử dụng

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

13 bất cứ nơi nào khác không?

Từ việc đánh dấu đó, rất khó để trả lời bất kỳ câu hỏi nào. Tuy nhiên, sử dụng quy ước đặt tên thay đổi tất cả:

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

2

Bây giờ chúng ta có thể thấy rõ các lớp nào và không liên quan đến nhau và làm thế nào; Chúng tôi biết những lớp chúng tôi có thể sử dụng ngoài phạm vi của thành phần này; Và chúng tôi biết những lớp nào chúng tôi có thể được tự do sử dụng lại ở nơi khác.

Móc JavaScript

Theo quy định, việc liên kết CSS và JS của bạn vào cùng một lớp là không khôn ngoan trong cùng một lớp trong HTML của bạn. Điều này là do làm như vậy có nghĩa là bạn có thể có (hoặc loại bỏ) cái này mà không (loại bỏ) cái kia. Nó sạch hơn nhiều, minh bạch hơn nhiều và có thể duy trì hơn nhiều để liên kết JS của bạn vào các lớp cụ thể.

Tôi đã biết những dịp trước đây khi cố gắng tái cấu trúc một số CSS đã vô tình xóa chức năng JS vì hai người được gắn với nhau, không thể có cái này mà không có cái khác.

Thông thường, đây là các lớp được chuẩn bị với

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

19, ví dụ:

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

3

Điều này có nghĩa là chúng ta có thể có một yếu tố ở nơi khác có thể mang theo kiểu

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

20, nhưng không có hành vi của

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

21.

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

4 thuộc tính

Một thực tế phổ biến là sử dụng các thuộc tính

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

4 như móc JS, nhưng điều này không chính xác. Các thuộc tính

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

4, theo thông số kỹ thuật, được sử dụng để lưu trữ dữ liệu tùy chỉnh riêng tư cho trang hoặc ứng dụng (nhấn mạnh của tôi). Các thuộc tính

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

4 được thiết kế để lưu trữ dữ liệu, không bị ràng buộc.to store custom data private to the page or application (emphasis mine).

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

4 attributes are designed to store data, not be bound to.

Đưa nó đi xa hơn

Như đã đề cập trước đây, đây là những quy ước đặt tên rất đơn giản và những quy ước mà don không làm nhiều hơn là biểu thị ba nhóm lớp riêng biệt.

Tôi sẽ khuyến khích bạn đọc tiếp và xem xét thêm về quy ước đặt tên của bạn để cung cấp nhiều chức năng hơn, tôi biết đó là một thứ gì đó mà tôi muốn nghiên cứu và điều tra thêm.

Đọc thêm

• Mindbemding - Nhận cú pháp BEM tròn của bạn

---

Bộ chọn CSS

Có lẽ hơi đáng ngạc nhiên, một trong những khía cạnh cơ bản nhất, quan trọng nhất của việc viết CSS có thể duy trì và có thể mở rộng là các bộ chọn. Tính đặc thù của chúng, tính di động của chúng và khả năng tái sử dụng của chúng đều có tác động trực tiếp đến số dặm mà chúng ta sẽ thoát khỏi CSS của mình và những cơn đau đầu có thể mang lại cho chúng ta.

Mục đích chọn

Điều quan trọng là khi viết CSS là chúng tôi phạm vi chính xác các bộ chọn của mình và chúng tôi chọn những điều đúng đắn vì những lý do đúng đắn. Mục đích chọn chọn là quá trình quyết định và xác định những gì bạn muốn tạo kiểu và cách bạn sẽ chọn nó. Ví dụ: nếu bạn muốn tạo kiểu cho trang web của bạn menu điều hướng chính, một bộ chọn như thế này sẽ vô cùng không khôn ngoan:

Mục đích của bộ chọn này là tạo kiểu cho bất kỳ

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

26 nào bên trong bất kỳ yếu tố

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

27 nào, trong khi ý định của chúng tôi là tạo kiểu điều hướng chính của trang web. Đây là mục đích chọn lọc kém: Bạn có thể có bất kỳ số yếu tố

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

27 nào trên một trang và lần lượt họ có thể chứa bất kỳ số lượng

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

26 nào, do đó, một bộ chọn như thế này có nguy cơ áp dụng kiểu dáng rất cụ thể cho một số lượng lớn các yếu tố. Điều này sẽ dẫn đến việc phải viết thêm CSS để hoàn tác bản chất tham lam của một bộ chọn như vậy.

Một cách tiếp cận tốt hơn sẽ là một bộ chọn như:

Một bộ chọn rõ ràng, rõ ràng với mục đích chọn tốt. Chúng tôi đang lựa chọn rõ ràng điều đúng đắn vì lý do chính xác.

Mục đích chọn lọc kém là một trong những lý do lớn nhất cho đau đầu trong các dự án CSS. Các quy tắc viết quá tham lam và áp dụng các phương pháp điều trị rất cụ thể thông qua các bộ chọn tiếp cận rất xa, các tác dụng phụ bất ngờ và dẫn đến các bảng tạo kiểu rất rối, với các bộ chọn vượt qua ý định của chúng và tác động và can thiệp vào các quy tắc không liên quan.

CSS không thể được gói gọn, nó vốn đã bị rò rỉ, nhưng chúng tôi có thể giảm thiểu một số hiệu ứng này bằng cách không viết các bộ chọn hoạt động toàn cầu như vậy: Bộ chọn của bạn nên rõ ràng và lý do tốt như lý do của bạn muốn chọn một cái gì đó.your selectors should be as explicit and well reasoned as your reason for wanting to select something.

Khả năng tái sử dụng

Với một động thái hướng tới một cách tiếp cận dựa trên thành phần hơn để xây dựng UI, ý tưởng về khả năng tái sử dụng là tối quan trọng. Chúng tôi muốn tùy chọn có thể di chuyển, tái chế, sao chép và các thành phần cung cấp trong các dự án của chúng tôi.

Để kết thúc này, chúng tôi sử dụng nhiều lớp học. ID, cũng như quá cụ thể, không thể được sử dụng nhiều lần trên bất kỳ trang nào, trong khi các lớp có thể được sử dụng lại một số lần vô hạn. Tất cả mọi thứ bạn chọn, từ loại chọn đến tên của nó, nên cho vay để được sử dụng lại.

Vị trí độc lập

Với tính chất luôn thay đổi của hầu hết các dự án UI và chuyển sang các kiến ​​trúc dựa trên thành phần nhiều hơn, đó là lợi ích của chúng tôi không phải là phong cách dựa trên nơi chúng đang ở, mà là về những gì chúng đang ở. Điều đó có nghĩa là, các thành phần của chúng tôi, kiểu dáng của chúng tôi không nên phụ thuộc vào nơi chúng tôi đặt chúng, chúng nên duy trì vị trí độc lập.

Hãy để lấy một ví dụ về nút gọi hành động mà chúng tôi đã chọn để tạo kiểu thông qua bộ chọn sau:

Điều này không chỉ có ý định chọn chọn kém mà còn tham lam tạo kiểu cho bất kỳ và mọi liên kết bên trong

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

30 để trông giống như một nút Kiểu dáng chính xác bên ngoài

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

30 vì nó được gắn rõ ràng với vị trí đó. Một bộ chọn tốt hơn nhiều sẽ là:

Lớp đơn này có thể được tái sử dụng ở bất cứ đâu ngoài

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

30 và sẽ luôn mang theo kiểu dáng chính xác. Do kết quả của một bộ chọn tốt hơn, phần UI này có khả năng di động hơn, có thể tái chế hơn, không có bất kỳ sự phụ thuộc nào và có ý định chọn tốt hơn nhiều. Một thành phần không nên sống ở một nơi nhất định để nhìn theo một cách nhất định.A component shouldn’t have to live in a certain place to look a certain way.

Tính di động

Giảm, hoặc, lý tưởng, loại bỏ, sự phụ thuộc vị trí có nghĩa là chúng ta có thể di chuyển các thành phần xung quanh đánh dấu của mình một cách tự do hơn, nhưng làm thế nào về việc cải thiện khả năng di chuyển các lớp xung quanh các thành phần? Ở cấp độ thấp hơn nhiều, có những thay đổi chúng ta có thể thực hiện đối với các bộ chọn của chúng ta tự tạo ra các bộ chọn, trái ngược với các thành phần mà chúng tạo ra di động hơn. Lấy ví dụ sau:

Đây là một bộ chọn đủ điều kiện; Các

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

33 hàng đầu liên kết quy tắc này chỉ có thể làm việc trên các yếu tố

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

33. Bằng cách bỏ qua trình độ này, chúng tôi cho phép bản thân sử dụng lại lớp

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

35 về bất kỳ yếu tố nào chúng tôi chọn, như

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

36, hoặc

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

37.

Các bộ chọn đủ điều kiện không cho vay tốt để được tái sử dụng, và mọi bộ chọn chúng tôi viết nên được tác giả với việc tái sử dụng trong tâm trí.

Tất nhiên, có những lúc bạn có thể muốn đủ điều kiện hợp pháp một bộ chọn, bạn có thể cần phải áp dụng một số kiểu dáng rất cụ thể cho một yếu tố cụ thể khi nó mang một lớp nhất định, ví dụ: ví dụ:

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

4

Đây là một ví dụ trong đó một bộ chọn đủ điều kiện có thể chính đáng, nhưng tôi vẫn sẽ đề xuất một cách tiếp cận giống như:

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

5

Điều này có nghĩa là chúng ta có thể áp dụng

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

38 cho bất kỳ yếu tố nào, và không chỉ là ____ 139, nó có thể tái sử dụng hơn một bộ chọn đủ điều kiện.

Bộ chọn bán đủ điều kiện

Một điều mà bộ chọn đủ điều kiện có thể hữu ích là báo hiệu khi một lớp có thể được mong đợi hoặc dự định sẽ được sử dụng, ví dụ:

Ở đây chúng ta có thể thấy rằng lớp

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

40 có nghĩa là được sử dụng trên phần tử

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

26 và không phải trên

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

42. Bằng cách sử dụng các bộ chọn bán đủ điều kiện, chúng tôi vẫn có thể cung cấp thông tin đó mà không thực sự đủ điều kiện cho bộ chọn:

Bằng cách nhận xét yếu tố hàng đầu, chúng ta vẫn có thể để nó được đọc, nhưng tránh đủ điều kiện và tăng tính đặc hiệu của bộ chọn.

Đặt tên

Như Phil Karlton đã từng nói, chỉ có hai điều khó khăn trong khoa học máy tính: vô hiệu hóa bộ đệm và đặt tên.

Tôi đã giành được bình luận về yêu cầu trước đây ở đây, nhưng sau này đã làm tôi khó chịu trong nhiều năm. Lời khuyên của tôi liên quan đến việc đặt tên mọi thứ trong CSS là chọn một cái tên hợp lý, nhưng hơi mơ hồ: nhắm đến khả năng tái sử dụng cao. Ví dụ: thay vì một lớp như

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

43, chọn một cái gì đó như

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

44; Thay vì

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

45, hãy ưu tiên một lớp như

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

46.

Sự khác biệt trong các tên này là lần đầu tiên trong mỗi hai ví dụ được gắn với một trường hợp sử dụng rất cụ thể: chúng chỉ có thể được sử dụng làm điều hướng trang web hoặc các liên kết chân trang tương ứng. Bằng cách sử dụng những cái tên mơ hồ hơn một chút, chúng ta có thể tăng khả năng sử dụng lại các thành phần này trong các trường hợp khác nhau.

Để trích dẫn Nicolas Gallagher:

Tying tên lớp của bạn ngữ nghĩa chặt chẽ với bản chất của nội dung đã làm giảm khả năng kiến ​​trúc của bạn mở rộng hoặc dễ dàng đưa vào sử dụng bởi các nhà phát triển khác.

Điều đó có nghĩa là, chúng ta nên sử dụng các tên hợp lý của các lớp như

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

47 hoặc

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

48 không bao giờ được khuyến khích nhưng chúng ta nên tránh sử dụng các lớp mô tả bản chất chính xác của nội dung và/hoặc các trường hợp sử dụng của nó. Sử dụng tên lớp để mô tả nội dung là dự phòng vì nội dung mô tả chính nó.Using a class name to describe content is redundant because content describes itself.

Cuộc tranh luận xung quanh ngữ nghĩa đã nổ ra trong nhiều năm, nhưng điều quan trọng là chúng tôi phải áp dụng một cách tiếp cận thực dụng hơn, hợp lý hơn để đặt tên cho mọi thứ để làm việc hiệu quả và hiệu quả hơn. Thay vì tập trung vào ‘ngữ nghĩa, hãy xem xét kỹ hơn về sự nhạy cảm và tuổi thọ, các tên chọn dựa trên dễ bảo trì, không phải vì ý nghĩa nhận thức của chúng.

Kể tên những thứ cho mọi người; Họ là những điều duy nhất thực sự đọc các lớp học của bạn (mọi thứ khác chỉ phù hợp với chúng). Một lần nữa, tốt hơn là phấn đấu cho các lớp tái sử dụng, có thể tái chế thay vì viết cho các trường hợp sử dụng cụ thể. Hãy lấy một ví dụ:

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

6

Điều quan trọng là phải đạt được sự cân bằng giữa các tên không mô tả theo nghĩa đen là phong cách mà lớp mang lại, nhưng cũng không mô tả rõ ràng các trường hợp sử dụng cụ thể. Thay vì

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

49, chọn

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

50; thay vì

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

43, ưu tiên

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

44; Thay vì

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

53, hãy chọn cho

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

54.

Đặt tên cho các thành phần UI

Đặt tên các thành phần với thuyết bất khả tri và khả năng tái sử dụng trong tâm trí thực sự giúp các nhà phát triển xây dựng và sửa đổi UI nhanh hơn nhiều, và với ít chất thải hơn. Tuy nhiên, đôi khi có thể có lợi khi cung cấp việc đặt tên cụ thể hơn hoặc có ý nghĩa hơn cùng với lớp mơ hồ hơn, đặc biệt là khi một số lớp bất khả tri kết hợp với nhau để tạo thành một thành phần cụ thể và phức tạp hơn có thể được hưởng lợi từ việc có một cái tên có ý nghĩa hơn. Trong kịch bản này, chúng tôi tăng cường các lớp với thuộc tính

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

55 chứa một tên cụ thể hơn, ví dụ:

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

7

Ở đây, chúng tôi có những lợi ích của một tên lớp có thể tái sử dụng cao mà không mô tả về vấn đề này và do đó, tự gắn với một trường hợp sử dụng cụ thể và thêm ý nghĩa thông qua thuộc tính

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

55 của chúng tôi. Giá trị ____ 155 có thể lấy bất kỳ định dạng nào bạn muốn, như trường hợp tiêu đề:

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

7

Hoặc giống như lớp học:

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

9

Hoặc theo tên:

[selector] {
  [property]: [value];
  [<--declaration--->]
}

0

Việc thực hiện phần lớn là sở thích cá nhân, nhưng khái niệm này vẫn còn: thêm bất kỳ ý nghĩa hữu ích hoặc cụ thể nào thông qua một cơ chế sẽ không ức chế khả năng của bạn và nhóm của bạn để tái chế và tái sử dụng CSS.Add any useful or specific meaning via a mechanism that will not inhibit your and your team’s ability to recycle and reuse CSS.

Hiệu suất chọn

Một chủ đề được đặt ra với chất lượng của các trình duyệt ngày nay, thú vị hơn nó là quan trọng, là hiệu suất của bộ chọn. Điều đó có nghĩa là, việc trình duyệt có thể phù hợp với các bộ chọn của bạn trong CSS nhanh như thế nào với các nút mà nó tìm thấy trong DOM.

Nói chung, bộ chọn càng dài (tức là càng nhiều phần thành phần) thì nó càng chậm, ví dụ::

[selector] {
  [property]: [value];
  [<--declaration--->]
}

1

… Là một bộ chọn kém hiệu quả hơn nhiều so với:

Điều này là do các trình duyệt đọc bộ chọn CSS từ phải sang trái. Một trình duyệt sẽ đọc bộ chọn đầu tiên làright-to-left. A browser will read the first selector as

• Tìm tất cả các yếu tố

  /**
   * I am a long-form comment. I describe, in detail, the CSS that follows. I am
   * such a long comment that I easily break the 80 character limit, so I am
   * broken across several lines.
   */

  26 trong DOM;
• Bây giờ hãy kiểm tra xem họ có sống ở bất cứ đâu bên trong một yếu tố có lớp

  /**
   * I am a long-form comment. I describe, in detail, the CSS that follows. I am
   * such a long comment that I easily break the 80 character limit, so I am
   * broken across several lines.
   */

  59 không;
• Tiếp theo kiểm tra xem lớp

  /**
   * I am a long-form comment. I describe, in detail, the CSS that follows. I am
   * such a long comment that I easily break the 80 character limit, so I am
   * broken across several lines.
   */

  59 có tồn tại trên phần tử

  /**
   * I am a long-form comment. I describe, in detail, the CSS that follows. I am
   * such a long comment that I easily break the 80 character limit, so I am
   * broken across several lines.
   */

  39;
• Bây giờ hãy kiểm tra rằng tất cả sống ở bất cứ nơi nào bên trong bất kỳ yếu tố nào với một lớp

  /**
   * I am a long-form comment. I describe, in detail, the CSS that follows. I am
   * such a long comment that I easily break the 80 character limit, so I am
   * broken across several lines.
   */

  62;
• Cuối cùng, hãy kiểm tra xem

  /**
   * I am a long-form comment. I describe, in detail, the CSS that follows. I am
   * such a long comment that I easily break the 80 character limit, so I am
   * broken across several lines.
   */

  62 có tồn tại trên phần tử

  /**
   * I am a long-form comment. I describe, in detail, the CSS that follows. I am
   * such a long comment that I easily break the 80 character limit, so I am
   * broken across several lines.
   */

  64 không.

Ngược lại, thứ hai chỉ đơn giản là một trường hợp đọc trình duyệt

• Tìm tất cả các yếu tố với một lớp

  /**
   * I am a long-form comment. I describe, in detail, the CSS that follows. I am
   * such a long comment that I easily break the 80 character limit, so I am
   * broken across several lines.
   */

  44.

Để tiếp tục kết hợp vấn đề, chúng tôi đang sử dụng các bộ chọn hậu duệ (ví dụ:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

66). Kết quả của điều này là một trình duyệt được yêu cầu bắt đầu với phần ngoài cùng bên phải của bộ chọn (tức là

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

67) và tiếp tục tìm kiếm DOM vô thời hạn cho đến khi tìm thấy phần tiếp theo (tức là

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

68). Điều này có thể có nghĩa là đẩy mạnh hàng tá lần dom cho đến khi một trận đấu được tìm thấy.

Đây chỉ là một lý do tại sao làm tổ với các tiền xử lý thường là một nền kinh tế sai lầm; Cũng như làm cho các bộ chọn chọn cụ thể hơn một cách không cần thiết và tạo sự phụ thuộc vị trí, nó cũng tạo ra nhiều công việc hơn cho trình duyệt.nesting with preprocessors is often a false economy; as well as making selectors unnecessarily more specific, and creating location dependency, it also creates more work for the browser.

Bằng cách sử dụng bộ chọn trẻ em (ví dụ:

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

69), chúng tôi có thể làm cho quá trình này hiệu quả hơn nhiều, bởi vì điều này chỉ yêu cầu trình duyệt nhìn một cấp cao hơn trong DOM và nó sẽ dừng bất kể nó có tìm thấy khớp hay không.

Bộ chọn chính

Bởi vì các trình duyệt đọc các bộ chọn từ phải sang trái, bộ chọn ngoài cùng bên phải thường rất quan trọng trong việc xác định hiệu suất của bộ chọn: Đây được gọi là bộ chọn chính.

Bộ chọn sau đây có thể có hiệu suất cao ngay từ cái nhìn đầu tiên. Nó sử dụng một ID rất đẹp và nhanh, và chỉ có thể có một trên một trang, vì vậy chắc chắn đây sẽ là một bộ tra cứu đẹp và nhanh chóng chỉ thấy một ID và sau đó tạo kiểu cho mọi thứ bên trong nó:

Vấn đề với bộ chọn này là bộ chọn chính (

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

70) rất, rất xa. Những gì bộ chọn này thực sự làm là tìm mọi nút duy nhất trong DOM (thậm chí

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

71,

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

72 và

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

73; Đây là một bộ chọn rất, rất tốn kém, và rất có thể nên tránh hoặc viết lại.

Rất may, bằng cách viết các bộ chọn với mục đích chọn tốt, có lẽ chúng tôi đang tránh các bộ chọn không hiệu quả theo mặc định; Chúng tôi rất khó có các bộ chọn chính tham lam nếu chúng tôi nhắm mục tiêu đúng những điều vì lý do đúng đắn.

Tuy nhiên, điều đó nói rằng hiệu suất chọn CSS phải khá thấp trong danh sách những thứ của bạn để tối ưu hóa; Các trình duyệt nhanh và chỉ ngày càng nhanh hơn và chỉ có các trường hợp cạnh đáng chú ý, các bộ chọn không hiệu quả sẽ có khả năng gây ra vấn đề.

Cũng như các vấn đề cụ thể của riêng họ, làm tổ, đủ điều kiện và bộ chọn kém đều đóng góp cho các bộ chọn kém hiệu quả hơn.

Quy tắc chung

Bộ chọn của bạn là cơ bản để viết CSS tốt. Để tổng hợp ngắn gọn các phần trên:

• Chọn những gì bạn muốn rõ ràng, thay vì dựa vào hoàn cảnh hoặc sự trùng hợp. Mục đích chọn tốt sẽ kiềm chế tầm với và rò rỉ phong cách của bạn., rather than relying on circumstance or coincidence. Good Selector Intent will rein in the reach and leak of your styles.
• Viết các bộ chọn cho khả năng tái sử dụng, để bạn có thể làm việc hiệu quả hơn và giảm chất thải và sự lặp lại., so that you can work more efficiently and reduce waste and repetition.
• Không làm tổ bộ chọn không cần thiết, vì điều này sẽ làm tăng tính đặc hiệu và ảnh hưởng đến nơi bạn có thể sử dụng kiểu của mình., because this will increase specificity and affect where else you can use your styles.
• Không đủ điều kiện cho các bộ chọn không cần thiết, vì điều này sẽ tác động đến số lượng các yếu tố khác nhau mà bạn có thể áp dụng các kiểu., as this will impact the number of different elements you can apply styles to.
• Giữ các bộ chọn càng ngắn càng tốt, để giữ cho tính đặc hiệu xuống và hiệu suất tăng lên., in order to keep specificity down and performance up.

Tập trung vào các điểm này sẽ giữ cho các bộ chọn của bạn hơn rất nhiều và dễ làm việc với các dự án thay đổi và chạy dài.

Đọc thêm

• Bắn để giết; Ý định chọn CSS
• Phạm vi phạm vi trong CSS
• Giữ cho bộ chọn CSS của bạn ngắn
• Về ngữ nghĩa HTML và kiến ​​trúc mặt trước
• Đặt tên các thành phần UI trong OOCSS
• Viết các bộ chọn CSS hiệu quả

---

Tính đặc hiệu

Như chúng tôi đã thấy, CSS không phải là ngôn ngữ thân thiện nhất: hoạt động trên toàn cầu, rất rò rỉ, phụ thuộc vào vị trí, khó gói gọn, dựa trên kế thừa, nhưng! Không ai trong số đó thậm chí đến gần với sự khủng khiếp của sự đặc biệt.

Cho dù việc đặt tên của bạn được xem xét tốt như thế nào, bất kể thứ tự nguồn và tầng của bạn được quản lý hoàn hảo đến mức nào, và bạn đã xử lý các quy tắc của mình tốt như thế nào, chỉ một bộ chọn quá cụ thể có thể hoàn tác mọi thứ. Đó là một đường cong khổng lồ, và làm suy yếu bản chất của CSS, của dòng thác, kế thừa và trật tự nguồn.

Vấn đề với tính đặc hiệu là nó đặt ra các tiền lệ và những chiếc Trump không thể hoàn tác đơn giản. Nếu chúng tôi lấy một ví dụ thực tế rằng tôi đã chịu trách nhiệm cho một số năm trước:

Điều này không chỉ thể hiện ý định chọn lọc kém. Điều này trở nên rõ ràng một số tuần sau đó, khi tôi cần một loại

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

75 thứ hai:

[selector] {
  [property]: [value];
  [<--declaration--->]
}

2

Bộ chọn đầu tiên là vượt qua tính đặc thù của cái được xác định theo nó, làm việc chống lại ứng dụng theo thứ tự dựa trên nguồn của CSS. Để khắc phục điều này, tôi đã có hai lựa chọn chính. Tôi có thể

1. tái cấu trúc CSS và HTML của tôi để xóa ID đó;
2. Viết một bộ chọn cụ thể hơn để ghi đè nó.

Thật không may, việc tái cấu trúc sẽ mất một thời gian dài; Đó là một sản phẩm trưởng thành và các hiệu ứng gõ của việc loại bỏ ID này sẽ là một chi phí kinh doanh đáng kể hơn so với tùy chọn thứ hai: chỉ cần viết một bộ chọn cụ thể hơn.

[selector] {
  [property]: [value];
  [<--declaration--->]
}

3

Bây giờ tôi có một bộ chọn thậm chí còn cụ thể hơn! Và nếu tôi muốn ghi đè lên cái này, tôi sẽ cần một bộ chọn khác ít nhất cùng một tính đặc hiệu được xác định theo nó. Tôi đã bắt đầu trên một vòng xoáy đi xuống.

Tính đặc hiệu có thể, trong số những thứ khác,

• Giới hạn khả năng của bạn để mở rộng và thao túng một cơ sở mã;
• làm gián đoạn và hoàn tác CSS, xếp tầng, kế thừa thiên nhiên;
• Nguyên nhân có thể tránh được sự xác định trong dự án của bạn;
• Ngăn chặn mọi thứ làm việc như mong đợi khi được chuyển vào các môi trường khác nhau;
• dẫn đến sự thất vọng nghiêm trọng của nhà phát triển.

Tất cả các vấn đề này được phóng to rất nhiều khi làm việc trong một dự án lớn hơn với một số nhà phát triển đóng góp mã.

Giữ nó thấp mọi lúc

Vấn đề với tính đặc hiệu là không nhất thiết là nó cao hay thấp; Nó thực tế là nó rất nhiều biến thể và nó không thể từ chối: cách duy nhất để đối phó với nó là dần dần có được sự cụ thể hơn về sự cụ thể hơn về các cuộc chiến cụ thể khét tiếng mà chúng ta đã xem xét ở trên.

Một trong những mẹo đơn, đơn giản nhất cho một cuộc sống dễ dàng hơn khi viết CSS, đặc biệt là ở bất kỳ quy mô hợp lý nào để luôn luôn cố gắng và giữ tính đặc hiệu càng thấp càng tốt. Cố gắng đảm bảo rằng có rất nhiều phương sai giữa các bộ chọn trong cơ sở mã của bạn và tất cả các bộ chọn đều cố gắng với mức độ đặc hiệu thấp nhất có thể.

Làm như vậy sẽ ngay lập tức giúp bạn chế ngự và quản lý dự án của bạn, nghĩa là không có bộ chọn quá cụ thể nào có khả năng ảnh hưởng hoặc ảnh hưởng đến bất cứ điều gì đặc biệt thấp hơn ở nơi khác. Điều đó cũng có nghĩa là bạn ít có khả năng cần phải chiến đấu với các góc đặc hiệu của bạn, và bạn có thể cũng sẽ viết các bảng tạo kiểu nhỏ hơn nhiều.

Những thay đổi đơn giản đối với cách chúng ta làm việc bao gồm, nhưng không giới hạn,

• không sử dụng ID trong CSS của bạn;
• không phải là bộ chọn làm tổ;
• không phải là các lớp học đủ điều kiện;
• Không chuỗi chọn.

Tính đặc hiệu có thể được đánh giá và hiểu, nhưng nó an toàn hơn chỉ để tránh nó hoàn toàn.

ID trong CSS

Nếu chúng tôi muốn giữ tính đặc hiệu thấp, điều mà chúng tôi làm, chúng tôi có một quy tắc thực sự nhanh chóng, đơn giản, dễ thực hiện mà chúng tôi có thể sử dụng để giúp chúng tôi: Tránh sử dụng ID trong CSS.

ID không chỉ là không thể tin được, chúng còn cụ thể hơn rất nhiều so với bất kỳ bộ chọn nào khác, và do đó trở thành dị thường tính đặc hiệu. Trong trường hợp phần còn lại của bộ chọn của bạn là độ đặc hiệu tương đối thấp, các bộ chọn dựa trên ID của bạn, tương đối, cao hơn nhiều, cao hơn nhiều.

Trên thực tế, để làm nổi bật mức độ nghiêm trọng của sự khác biệt này, hãy xem làm thế nào một nghìn lớp chuỗi có thể ghi đè lên tính đặc hiệu của một ID duy nhất: jsfiddle.net/0yb7rque. .

N.B. Vẫn hoàn toàn ổn khi sử dụng ID trong HTML và JavaScript; Chỉ có trong CSS mà họ chứng minh rắc rối. It is still perfectly okay to use IDs in HTML and JavaScript; it is only in CSS that they prove troublesome.

Người ta thường đề nghị rằng các nhà phát triển chọn không sử dụng ID trong CSS chỉ đơn thuần là không hiểu cách thức hoạt động của tính đặc hiệu. Điều này không chính xác như nó là xúc phạm: cho dù bạn có kinh nghiệm đến mức nào, hành vi này không thể bị phá vỡ; Không có lượng kiến ​​thức sẽ làm cho một ID ít cụ thể hơn.

Lựa chọn vào cách làm việc này chỉ giới thiệu cơ hội các vấn đề xảy ra ở xa hơn, và đặc biệt là khi làm việc ở quy mô, tất cả các nỗ lực nên được thực hiện để tránh khả năng phát sinh các vấn đề. Trong một câu:

Nó chỉ là không đáng để giới thiệu rủi ro.

Làm tổ

Chúng tôi đã xem xét làm thế nào việc làm tổ có thể dẫn đến mã phụ thuộc vào vị trí và có khả năng không hiệu quả, nhưng bây giờ, thời gian để xem xét một cái cạm bẫy khác của nó: nó làm cho các bộ chọn cụ thể hơn.

Khi chúng ta nói về việc làm tổ, chúng ta không nhất thiết có nghĩa là người tiền xử lý, như vậy:

Chúng tôi thực sự nói về hậu duệ hoặc người chọn trẻ em; Các nhà chọn dựa vào một điều trong một điều. Điều đó có thể trông giống như bất kỳ một trong những điều sau đây:

[selector] {
  [property]: [value];
  [<--declaration--->]
}

4

Cho dù bạn đến CSS này thông qua bộ tiền xử lý hay không đặc biệt quan trọng, nhưng điều đáng chú ý là các tiền xử lý sẽ chào hàng đây là một tính năng, nơi thực sự cần tránh bất cứ khi nào có thể.preprocessors tout this as a feature, where is actually to be avoided wherever possible.

Nói chung, mỗi phần trong một bộ chọn hợp chất thêm tính đặc hiệu. Ergo, càng ít bộ phận cho bộ chọn hợp chất thì tính đặc hiệu tổng thể của nó càng thấp và chúng tôi luôn muốn giữ độ đặc hiệu thấp. Để trích dẫn Jonathan Snook:

Bất cứ khi nào khai báo kiểu của bạn, hãy sử dụng số lượng bộ chọn ít nhất cần thiết để tạo kiểu cho một yếu tố.use the least number of selectors required to style an element.

Hãy nhìn vào một ví dụ:

[selector] {
  [property]: [value];
  [<--declaration--->]
}

5

Để tạo kiểu cho một yếu tố với một lớp

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

79, chúng tôi có một bộ chọn cụ thể gấp đôi so với nó cần. Điều đó có nghĩa là nếu chúng ta muốn thực hiện bất kỳ sửa đổi nào thành

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

79, chúng ta sẽ cần một bộ chọn cụ thể khác nhau khác nhau:

[selector] {
  [property]: [value];
  [<--declaration--->]
}

6

Điều này không chỉ là hoàn toàn có thể tránh được, chúng tôi đã gây ra vấn đề này, chúng tôi có một bộ chọn theo nghĩa đen gấp đôi tính đặc hiệu của nó. Chúng tôi đã sử dụng 200% tính đặc hiệu thực sự cần thiết. Và không chỉ vậy, nhưng điều này cũng dẫn đến sự tinh thần không cần thiết trong mã của chúng tôi để gửi qua dây.

Theo quy định, nếu một bộ chọn sẽ hoạt động mà không bị lồng thì không làm tổ.if a selector will work without it being nested then do not nest it.

Phạm vi

Một lợi thế có thể của việc làm tổ, điều không may, không may không vượt xa những bất lợi của tính đặc hiệu tăng lên là nó cung cấp cho chúng ta một không gian tên của các loại. Một bộ chọn như

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

81 phạm vi kiểu dáng của

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

82 đối với một yếu tố chỉ tồn tại bên trong một phần tử mang một lớp

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

83.

Điều này đi một số cách để cung cấp cho CSS của chúng tôi phạm vi và đóng gói, nhưng vẫn có nghĩa là các bộ chọn của chúng tôi cụ thể gấp đôi so với chúng cần. Một cách tốt hơn để cung cấp phạm vi này sẽ là thông qua một không gian tên mà chúng ta đã có dưới dạng đặt tên giống như BEM mà không dẫn đến sự gia tăng không cần thiết về tính đặc hiệu.

Bây giờ chúng ta có CSS ​​phạm vi tốt hơn với tính đặc hiệu tối thiểu là tốt nhất của cả hai thế giới.

Đọc thêm

• Phạm vi phạm vi trong CSS

.foo, .foo--bar, .baz { display:block; background-color:green; color:red } 5

Từ

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 gửi rùng mình xuống gai của hầu hết các nhà phát triển mặt trước.

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 là một biểu hiện trực tiếp của các vấn đề với tính đặc hiệu; Đó là một cách để gian lận theo cách của bạn khỏi các cuộc chiến tranh cụ thể, nhưng thường có giá cao. Nó thường được xem là một phương sách cuối cùng, một người tuyệt vọng, bị đánh bại khi vá lại các triệu chứng của một vấn đề lớn hơn nhiều với mã của bạn.

Nguyên tắc chung là

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 luôn là một điều xấu, nhưng, để trích dẫn Jamie Mason:

Quy tắc là con của các nguyên tắc.

Điều đó có nghĩa là, một quy tắc duy nhất là một cách đơn giản, đen trắng tuân thủ một nguyên tắc lớn hơn nhiều. Khi bạn bắt đầu, quy tắc không bao giờ sử dụng

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 là một quy tắc tốt.

Tuy nhiên, một khi bạn bắt đầu phát triển và trưởng thành với tư cách là một nhà phát triển, bạn bắt đầu hiểu rằng nguyên tắc đằng sau quy tắc đó chỉ đơn giản là giữ tính đặc hiệu thấp. Bạn cũng sẽ học được khi nào và ở đâu các quy tắc có thể được uốn cong

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 có một vị trí trong các dự án CSS, nhưng chỉ khi được sử dụng một cách tiết kiệm và chủ động.

Chủ động sử dụng

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 là khi nó được sử dụng trước khi bạn gặp phải bất kỳ vấn đề đặc hiệu nào; Khi nó được sử dụng như một bảo đảm chứ không phải là một sửa chữa. Ví dụ:

[selector] {
  [property]: [value];
  [<--declaration--->]
}

7

Hai người trợ giúp, hoặc tiện ích này, các lớp rất cụ thể trong ý định của chúng: bạn sẽ chỉ sử dụng chúng nếu bạn muốn một cái gì đó được hiển thị ở chiều rộng 50% hoặc hoàn toàn không được hiển thị. Nếu bạn không muốn hành vi này, bạn sẽ không sử dụng các lớp này, do đó, bất cứ khi nào bạn sử dụng chúng, bạn chắc chắn sẽ muốn chúng giành chiến thắng.

Ở đây chúng tôi chủ động áp dụng

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 để đảm bảo rằng các phong cách này luôn giành chiến thắng. Đây là cách sử dụng chính xác của

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 để đảm bảo rằng những Trump này luôn hoạt động và don vô tình bị ghi đè bởi một thứ khác cụ thể hơn.

Việc sử dụng không chính xác, phản ứng của

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 là khi nó được sử dụng để chống lại các vấn đề về tính đặc hiệu sau khi thực tế: áp dụng

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 vào khai báo vì CSS được kiến ​​trúc kém. Ví dụ, hãy để tưởng tượng chúng ta có HTML này:

[selector] {
  [property]: [value];
  [<--declaration--->]
}

8

CSS và CSS này:

[selector] {
  [property]: [value];
  [<--declaration--->]
}

9

Ở đây chúng ta có thể thấy cách chúng ta đã sử dụng

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 để buộc các kiểu

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

96 của chúng ta phải phản ứng chính xác là bộ chọn

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

97 của chúng ta. Điều này có thể đã bị phá vỡ bởi bất kỳ số lượng thứ nào, bao gồm cả việc sử dụng ý định chọn tốt hơn hoặc tránh làm tổ.

Trong những tình huống này, tốt hơn là bạn nên điều tra và tái cấu trúc bất kỳ quy tắc xúc phạm nào để thử và đưa tính đặc hiệu xuống trên bảng, trái ngược với việc giới thiệu các đối thủ nặng ký đặc hiệu như vậy.

Chỉ sử dụng

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

5 chủ động, không phản ứng.

Hack tính đặc hiệu

Với tất cả những gì đã nói về chủ đề đặc biệt, và giữ nó thấp, không thể tránh khỏi việc chúng ta sẽ gặp phải vấn đề. Cho dù chúng ta có cố gắng thế nào, và chúng ta có lương tâm đến mức nào, sẽ luôn có những lúc chúng ta cần phải hack và gây ra tính đặc hiệu.

Khi những tình huống này phát sinh, điều quan trọng là chúng tôi phải xử lý các vụ hack an toàn và thanh lịch nhất có thể.

Trong trường hợp bạn cần tăng tính đặc hiệu của bộ chọn lớp, có một số tùy chọn. Chúng ta có thể làm tổ lớp bên trong một thứ khác để đưa tính đặc hiệu của nó lên. Ví dụ: chúng ta có thể sử dụng

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

99 để đưa ra tính đặc hiệu của bộ chọn

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

00 đơn giản.

Vấn đề với điều này, như chúng tôi đã thảo luận, là nó giới thiệu sự phụ thuộc vị trí: các phong cách này sẽ chỉ hoạt động khi thành phần

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

43 nằm trong thành phần

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

59.

Thay vào đó, chúng ta có thể sử dụng một bản hack an toàn hơn nhiều sẽ không ảnh hưởng đến tính di động của thành phần này: chúng ta có thể tự xâu chuỗi lớp đó:

Việc chuỗi này tăng gấp đôi tính đặc hiệu của bộ chọn, nhưng không đưa ra bất kỳ sự phụ thuộc nào vào vị trí.

Trong trường hợp chúng tôi làm, vì bất kỳ lý do gì, có ID trong đánh dấu của chúng tôi rằng chúng tôi không thể thay thế bằng một lớp, chọn nó thông qua một bộ chọn thuộc tính trái ngược với bộ chọn ID. Ví dụ, hãy để tưởng tượng chúng tôi đã nhúng một tiện ích của bên thứ ba trên trang của chúng tôi. Chúng ta có thể tạo kiểu cho tiện ích thông qua đánh dấu mà nó xuất ra, nhưng chúng ta không có khả năng chỉnh sửa bản đánh dấu đó:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

0

Mặc dù chúng tôi biết không sử dụng ID trong CSS, nhưng chúng tôi có tùy chọn nào khác? Chúng tôi muốn tạo kiểu HTML này nhưng không có quyền truy cập vào nó, và tất cả những gì nó có trên đó là một ID.

Chúng tôi làm điều này:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

1

Ở đây chúng tôi đang chọn dựa trên một thuộc tính thay vì ID và các bộ chọn thuộc tính có độ đặc hiệu giống như một lớp. Điều này cho phép chúng tôi tạo kiểu dựa trên ID, nhưng không giới thiệu tính đặc hiệu của nó.

Hãy nhớ rằng đây là những hack và không nên được sử dụng trừ khi bạn không có sự thay thế tốt hơn.

Đọc thêm

• Hack để xử lý tính đặc hiệu

---

Nguyên tắc kiến ​​trúc

Bạn sẽ được tha thứ vì nghĩ rằng một kiến ​​trúc cho CSS là một khái niệm hơi lớn và không cần thiết: Tại sao một cái gì đó đơn giản, đơn giản như vậy, cần một thứ gì đó phức tạp hoặc được coi là một kiến ​​trúc ?!

Vâng, như chúng tôi đã thấy, sự đơn giản của CSS, sự lỏng lẻo và bản chất ngang bướng của nó có nghĩa là cách quản lý (đọc, thuần hóa) ở bất kỳ quy mô hợp lý nào là thông qua một kiến ​​trúc nghiêm ngặt và cụ thể. Một kiến ​​trúc vững chắc có thể giúp chúng tôi kiểm soát tính đặc thù của mình, thực thi các quy ước đặt tên, quản lý thứ tự nguồn của chúng tôi, tạo ra một môi trường phát triển lành mạnh và thường làm cho việc quản lý các dự án CSS của chúng tôi phù hợp và thoải mái hơn rất nhiều.

Không có công cụ, không có tiền xử lý, không có viên đạn ma thuật, điều đó sẽ làm cho CSS của bạn tốt hơn: Công cụ tốt nhất của nhà phát triển khi làm việc với một cú pháp lỏng lẻo như vậy là kỷ luật tự giác, có lương tâm và sự siêng năng, và một kiến ​​trúc được xác định rõ ràng sẽ Giúp thực thi và tạo điều kiện cho những đặc điểm này.

Các kiến ​​trúc là các bộ sưu tập lớn, bao trùm, do các quy ước nhỏ hơn kết hợp với nhau để cung cấp một môi trường được quản lý trong đó mã được viết và duy trì. Các kiến ​​trúc thường là cấp độ khá cao, và để lại các chi tiết thực hiện, ví dụ như các quy ước đặt tên hoặc cú pháp và định dạng, ví dụ như là nhóm thực hiện nó.

Hầu hết các kiến ​​trúc thường dựa trên các mô hình thiết kế và mô hình hiện có, và thường xuyên hơn không, các mô hình này được sinh ra từ các nhà khoa học máy tính và kỹ sư phần mềm. Đối với tất cả các CSS không phải là mã, và không thể hiện nhiều đặc điểm mà ngôn ngữ lập trình làm, chúng tôi thấy rằng chúng tôi có thể áp dụng một số nguyên tắc tương tự cho công việc của chúng tôi.

Trong phần này, chúng tôi sẽ xem xét một số mẫu thiết kế và mô hình thiết kế này và cách chúng tôi có thể sử dụng chúng để giảm mã và tăng cường tái sử dụng mã trong các dự án CSS của chúng tôi.

Tổng quan cấp cao

Ở cấp độ rất cao, kiến ​​trúc của bạn sẽ giúp bạn

• cung cấp một môi trường nhất quán và lành mạnh;
• chứa thay đổi;
• phát triển và mở rộng cơ sở mã của bạn;
• thúc đẩy tái sử dụng và hiệu quả;
• tăng năng suất.

Thông thường, điều này sẽ có nghĩa là một kiến ​​trúc dựa trên lớp và thành phần, chia thành các mô-đun có thể quản lý được, có thể sử dụng bộ tiền xử lý. Tất nhiên, có nhiều kiến ​​trúc hơn thế, vì vậy hãy để Lôi nhìn vào một số nguyên tắc

Object-orientation

Định hướng đối tượng là một mô hình lập trình phá vỡ các chương trình lớn hơn thành các đối tượng phụ thuộc nhỏ hơn, trong (TER) mà tất cả đều có vai trò và trách nhiệm riêng. Từ Wikipedia:

Lập trình hướng đối tượng (OOP) là một mô hình lập trình đại diện cho khái niệm ‘đối tượng [[]] thường là các trường hợp của các lớp, [và] được sử dụng để tương tác với nhau để thiết kế các ứng dụng và chương trình máy tính.

Khi được áp dụng cho CSS, chúng tôi gọi nó là CSS hướng đối tượng hoặc OOCSS. OOCSS được đặt ra và phổ biến bởi Nicole Sullivan, người có đối tượng truyền thông đã trở thành đứa con áp phích của phương pháp luận.

OOCSS liên quan đến việc tách UI thành cấu trúc và da: phá vỡ các thành phần UI thành các dạng cấu trúc cơ bản của chúng và xếp các dạng mỹ phẩm của chúng trên riêng. Điều này có nghĩa là chúng ta có thể tái chế các mẫu thiết kế phổ biến và tái phát rất rẻ mà không cần phải tái chế các chi tiết triển khai cụ thể của chúng cùng một lúc. OOCSS thúc đẩy tái sử dụng mã, giúp chúng tôi nhanh hơn, cũng như giữ kích thước của cơ sở mã của chúng tôi.

Các khía cạnh cấu trúc có thể được nghĩ là giống như bộ xương; Các khung thông thường, định kỳ cung cấp các cấu trúc không thiết kế được gọi là đối tượng và trừu tượng. Đối tượng và trừu tượng là các mẫu thiết kế đơn giản không có bất kỳ mỹ phẩm nào; Chúng tôi trừu tượng hóa các đặc điểm cấu trúc được chia sẻ từ một loạt các thành phần thành một đối tượng chung.

Da là một lớp mà chúng tôi (tùy chọn) thêm vào cấu trúc của chúng tôi để cung cấp cho các đối tượng và trừu tượng hóa một cái nhìn cụ thể. Hãy nhìn vào một ví dụ:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

2

Ở trên, chúng ta có thể thấy lớp

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

20 chỉ đơn giản là cung cấp kiểu dáng cấu trúc cho một yếu tố và không quan tâm đến bất kỳ mỹ phẩm nào. Chúng tôi bổ sung đối tượng

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

20 bằng lớp thứ hai, chẳng hạn như

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

05 để cung cấp cho các mỹ phẩm cụ thể của nút DOM đó:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

3

Hãy ưu tiên cách tiếp cận nhiều lớp hơn bằng cách sử dụng một cái gì đó như

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

06: Sử dụng nhiều lớp trong đánh dấu của bạn, trái ngược với việc kết thúc các lớp thành một lớp bằng cách sử dụng bộ tiền xử lý

• Cung cấp cho bạn một đường mòn giấy tốt hơn trong đánh dấu của bạn và cho phép bạn nhìn thấy nhanh chóng và rõ ràng các lớp nào đang hành động trên một phần của HTML;
• Cho phép thành phần lớn hơn trong đó các lớp không bị ràng buộc chặt chẽ với các kiểu khác trong CSS của bạn.

Bất cứ khi nào bạn đang xây dựng một thành phần UI, hãy thử và xem liệu bạn có thể chia nó thành hai phần không: một cho các kiểu cấu trúc (đệm, bố cục, v.v.) và một phần khác cho da (màu sắc, kiểu chữ, v.v.).

Đọc thêm

• Đối tượng phương tiện tiết kiệm hàng trăm dòng mã
• Đối tượng cờ
• Đặt tên các thành phần UI trong OOCSS

Nguyên tắc trách nhiệm duy nhất

Nguyên tắc trách nhiệm duy nhất là một mô hình, rất lỏng lẻo, nói rằng tất cả các đoạn mã (trong trường hợp của chúng tôi, các lớp) nên tập trung vào việc làm một việc và một điều duy nhất. Chính thức hơn:

Nguyên tắc trách nhiệm duy nhất nói rằng mọi bối cảnh (lớp, chức năng, biến, v.v.) nên có một trách nhiệm duy nhất và trách nhiệm đó phải được gói gọn hoàn toàn bởi bối cảnh.

Điều này có nghĩa là đối với chúng tôi là CSS của chúng tôi nên bao gồm một loạt các lớp nhỏ hơn nhiều tập trung vào việc cung cấp chức năng rất cụ thể và hạn chế. Điều này có nghĩa là chúng ta cần phân tách UI thành các phần thành phần nhỏ nhất của họ mà mỗi người phục vụ một trách nhiệm duy nhất; Tất cả đều chỉ làm một công việc, nhưng có thể rất dễ dàng kết hợp và sáng tác để tạo ra các cấu trúc linh hoạt và phức tạp hơn nhiều. Hãy cùng lấy một số ví dụ CSS không tuân thủ nguyên tắc trách nhiệm duy nhất:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

4

Ở đây, chúng ta có thể thấy rằng, mặc dù được đặt tên theo một trường hợp sử dụng rất cụ thể, các lớp này đang xử lý khá nhiều: bố cục, cấu trúc và mỹ phẩm. Chúng tôi cũng có rất nhiều sự lặp lại. Chúng ta cần phải tái cấu trúc điều này để trừu tượng hóa một số đối tượng được chia sẻ (OOCSS) và mang lại nhiều hơn với nguyên tắc trách nhiệm duy nhất. Chúng ta có thể chia hai lớp này thành bốn trách nhiệm nhỏ hơn nhiều:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

5

Bây giờ chúng tôi có một sự trừu tượng chung cho các hộp có thể sống và được sử dụng, hoàn toàn tách biệt với thành phần tin nhắn của chúng tôi và chúng tôi có một thành phần tin nhắn cơ sở có thể được mở rộng bởi một số lớp trách nhiệm nhỏ hơn. Số lượng lặp lại đã được giảm đi rất nhiều, và khả năng của chúng tôi để mở rộng và soạn thảo CSS của chúng tôi đã được tăng lên rất nhiều. Đây là một ví dụ tuyệt vời về OOCSS và nguyên tắc trách nhiệm duy nhất hoạt động song song.

Bằng cách tập trung vào các trách nhiệm đơn lẻ, chúng tôi có thể cung cấp cho mã của mình linh hoạt hơn nhiều và việc mở rộng các thành phần Các chức năng của Google trở nên rất đơn giản khi tuân thủ nguyên tắc mở/đóng, mà chúng tôi sẽ xem xét tiếp theo.

Đọc thêm

• Đối tượng phương tiện tiết kiệm hàng trăm dòng mã

Đối tượng cờ

Đặt tên các thành phần UI trong OOCSS

Nguyên tắc trách nhiệm duy nhất

Nguyên tắc trách nhiệm duy nhất là một mô hình, rất lỏng lẻo, nói rằng tất cả các đoạn mã (trong trường hợp của chúng tôi, các lớp) nên tập trung vào việc làm một việc và một điều duy nhất. Chính thức hơn:

Nguyên tắc trách nhiệm duy nhất nói rằng mọi bối cảnh (lớp, chức năng, biến, v.v.) nên có một trách nhiệm duy nhất và trách nhiệm đó phải được gói gọn hoàn toàn bởi bối cảnh.

Hãy lấy một ví dụ:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

6

Ở đây chúng ta có thể thấy rằng đối tượng

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

07 rất đơn giản: chúng tôi đã lột nó trở lại một trách nhiệm rất nhỏ và rất tập trung. Để sửa đổi hộp đó, chúng tôi mở rộng nó với một lớp khác;

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

08. Ở đây, lớp

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

07 được đóng lại để sửa đổi, nhưng mở để được mở rộng.

Một cách không chính xác để đạt được điều tương tự có thể trông như thế này:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

7

Điều này không chỉ là quá cụ thể, phụ thuộc vào vị trí và có khả năng hiển thị mục đích chọn lọc kém, chúng tôi đang sửa đổi trực tiếp

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

07. Chúng ta hiếm khi nên, nếu không bao giờ tìm thấy một đối tượng hoặc lớp trừu tượng như một bộ chọn chính trong một bộ chọn ghép.

Một bộ chọn như

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

11 có khả năng gây rắc rối vì

• Nó buộc tất cả các thành phần

  /*------------------------------------*\
    #SECTION-TITLE
  \*------------------------------------*/
  
  .selector { }
  

  12 vào kiểu đó khi được đặt bên trong

  /*------------------------------------*\
    #SECTION-TITLE
  \*------------------------------------*/
  
  .selector { }
  

  13, điều đó có nghĩa là sửa đổi được quyết định cho các nhà phát triển, trong khi các nhà phát triển nên được phép chọn thay đổi một cách rõ ràng;
• Phong cách

  /*------------------------------------*\
    #SECTION-TITLE
  \*------------------------------------*/
  
  .selector { }
  

  12 hiện không thể đoán trước được đối với các nhà phát triển; Trách nhiệm duy nhất không còn tồn tại vì làm tổ bộ chọn tạo ra một cảnh báo cưỡng bức.

Tất cả các sửa đổi, bổ sung và thay đổi phải luôn luôn là lựa chọn, không bắt buộc. Nếu bạn nghĩ rằng một cái gì đó có thể cần một sự điều chỉnh nhỏ để lấy nó ra khỏi định mức, hãy cung cấp một lớp khác để thêm chức năng này.

Khi làm việc trong môi trường nhóm, hãy chắc chắn viết CSS giống như API; Luôn đảm bảo rằng các lớp hiện tại vẫn tương thích ngược (nghĩa là không có thay đổi nào ở gốc của chúng) và cung cấp các móc mới để mang lại các tính năng mới. Thay đổi đối tượng gốc, sự trừu tượng hoặc thành phần có thể có các hiệu ứng gõ khổng lồ cho các nhà phát triển sử dụng mã đó ở nơi khác, do đó, không bao giờ sửa đổi mã hiện có trực tiếp.

Các trường hợp ngoại lệ có thể tự trình bày khi nó diễn ra rằng một đối tượng gốc không cần viết lại hoặc tái cấu trúc, nhưng chỉ trong các trường hợp cụ thể này, bạn nên sửa đổi mã. Hãy nhớ: Mở để mở rộng; đóng cửa để sửa đổi.open for extension; closed for modification.

Đọc thêm

• Nguyên tắc mở/đóng được áp dụng cho CSS

KHÔ

Dry, viết tắt của don don lặp lại lặp lại, là một nguyên tắc vi mô được sử dụng trong phát triển phần mềm nhằm mục đích giữ cho sự lặp lại của thông tin chính ở mức tối thiểu. Định nghĩa chính thức của nó là

[E] Rất kiến ​​thức phải có một đại diện duy nhất, rõ ràng, có thẩm quyền trong một hệ thống.

Mặc dù một nguyên tắc rất đơn giản, theo nguyên tắc, DRTY thường bị hiểu sai vì sự cần thiết phải không bao giờ lặp lại chính xác điều tương tự hai lần trong một dự án. Điều này là không thực tế và thường phản tác dụng, và có thể dẫn đến sự trừu tượng bắt buộc, mã suy nghĩ quá mức và được xử lý, và các phụ thuộc bất thường.

Điều quan trọng là để tránh tất cả sự lặp lại, nhưng để bình thường hóa và trừu tượng sự lặp lại có ý nghĩa. Nếu hai điều xảy ra để chia sẻ cùng một tuyên bố ngẫu nhiên, thì chúng ta cần phải làm khô bất cứ thứ gì; Sự lặp lại đó hoàn toàn là hoàn cảnh và không thể được chia sẻ hoặc trừu tượng hóa. Ví dụ:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

8

Từ mã trên, chúng tôi có thể suy luận một cách hợp lý rằng tuyên bố

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

15 xuất hiện ba lần hoàn toàn trùng hợp. Để thử và tạo ra một chỉ thị trừu tượng, Mixin hoặc

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

06 để phục vụ cho sự lặp lại này sẽ là quá mức cần thiết, và sẽ kết hợp ba quy tắc này với nhau hoàn toàn dựa trên hoàn cảnh.

Tuy nhiên, hãy tưởng tượng chúng tôi sử dụng một mặt hàng web yêu cầu

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

15 phải được khai báo mỗi khi

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

18 là:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

9

Ở đây, chúng tôi lặp lại một đoạn CSS có ý nghĩa hơn; Hai tuyên bố này phải luôn được tuyên bố cùng nhau. Trong trường hợp này, có lẽ chúng tôi sẽ làm khô CSS của chúng tôi.

Tôi khuyên bạn nên sử dụng mixin trên

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

06 ở đây bởi vì, mặc dù hai tuyên bố được nhóm theo chủ đề, bản thân các quy tắc vẫn là các thực thể không liên quan, không liên quan: sử dụng

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

06 sẽ là nhóm các quy tắc không liên quan đến nhau trong CSS của chúng tôi có liên quan.

Mixin của chúng tôi:

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

0

Bây giờ hai tuyên bố chỉ tồn tại một lần, có nghĩa là chúng ta không lặp lại chính mình. Nếu chúng ta chuyển sang đầu trang web của mình hoặc chuyển sang phiên bản

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

21, chúng ta chỉ cần thực hiện thay đổi đó ở một nơi.

Nói tóm lại, chỉ có mã khô thực sự, liên quan theo chủ đề. Đừng cố gắng giảm sự lặp lại hoàn toàn trùng hợp: trùng lặp tốt hơn so với sự trừu tượng sai.duplication is better than the wrong abstraction.

Đọc thêm

• Nguyên tắc mở/đóng được áp dụng cho CSS

KHÔ

Dry, viết tắt của don don lặp lại lặp lại, là một nguyên tắc vi mô được sử dụng trong phát triển phần mềm nhằm mục đích giữ cho sự lặp lại của thông tin chính ở mức tối thiểu. Định nghĩa chính thức của nó là

Ý tưởng xây dựng thông qua bố cục không phải là một ý tưởng mới, và thường được gọi là thành phần so với kế thừa. Nguyên tắc này cho thấy rằng các hệ thống lớn hơn nên được sáng tác từ các bộ phận nhỏ hơn nhiều, thay vì kế thừa hành vi từ một đối tượng nguyên khối lớn hơn nhiều. Điều này sẽ giữ cho mã của bạn tách rời, không có gì dựa vào bất cứ điều gì khác.

Thành phần là một nguyên tắc rất có giá trị cho một kiến ​​trúc để sử dụng, đặc biệt là xem xét việc di chuyển hướng tới UI dựa trên thành phần. Điều đó có nghĩa là bạn có thể dễ dàng tái chế và tái sử dụng chức năng, cũng như xây dựng nhanh các phần lớn hơn của UI từ một tập hợp các đối tượng có thể kết hợp. Nghĩ lại ví dụ thông báo lỗi của chúng tôi trong phần Nguyên tắc Trách nhiệm duy nhất; Chúng tôi đã tạo ra một thành phần UI hoàn chỉnh bằng cách soạn một số đối tượng nhỏ hơn và không liên quan.

Sự tách biệt của các mối quan tâm

Việc tách các mối quan tâm là một nguyên tắc, lúc đầu, nghe rất giống với nguyên tắc trách nhiệm duy nhất. Việc tách các mối quan tâm nói rằng mã nên bị phá vỡ

thành các phần riêng biệt, sao cho mỗi phần giải quyết một mối quan tâm riêng biệt. Một mối quan tâm là một tập hợp thông tin ảnh hưởng đến mã của một chương trình máy tính. [V]] Một chương trình thể hiện tốt SOC được gọi là một chương trình mô -đun.

Mô -đun là một từ mà chúng tôi có thể đã sử dụng; Ý tưởng phá vỡ UIS và CSS thành các mảnh nhỏ hơn, có thể so sánh được. Việc tách các mối quan tâm chỉ là một định nghĩa chính thức bao gồm các khái niệm về tính mô -đun và đóng gói trong mã. Trong CSS, điều này có nghĩa là xây dựng các thành phần riêng lẻ và viết mã chỉ tập trung vào một nhiệm vụ tại một thời điểm.

Thuật ngữ này được đặt ra bởi Edsger W. Dijkstra, người đã nói một cách thanh lịch:

Hãy để tôi cố gắng giải thích cho bạn, những gì với sở thích của tôi là đặc trưng cho tất cả những suy nghĩ thông minh. Đó là, một người sẵn sàng nghiên cứu chuyên sâu về một khía cạnh của một vấn đề của một người khác trong sự cô lập vì sự nhất quán của chính nó, tất cả thời gian khi biết rằng một người chỉ chiếm giữ chính mình với một trong những khía cạnh. Chúng tôi biết rằng một chương trình phải đúng và chúng tôi chỉ có thể nghiên cứu nó từ quan điểm đó; Chúng tôi cũng biết rằng nó nên hiệu quả và chúng tôi có thể nghiên cứu hiệu quả của nó vào một ngày khác, có thể nói. Trong một tâm trạng khác, chúng ta có thể tự hỏi liệu, và nếu vậy: tại sao, chương trình là mong muốn. Nhưng không có gì có được, ngược lại! Đó là những gì tôi đôi khi tôi gọi là sự tách biệt của các mối quan tâm, mà, ngay cả khi không hoàn toàn có thể, vẫn là kỹ thuật duy nhất có sẵn để đặt hàng hiệu quả một suy nghĩ mà tôi biết. Đây là những gì tôi muốn nói bằng cách tập trung sự chú ý của một người vào một số khía cạnh: điều đó không có nghĩa là bỏ qua các khía cạnh khác, nó chỉ là công lý cho thực tế là từ quan điểm của khía cạnh này, thì điều còn lại không liên quan. Nó là đồng thời là một và nhiều bài hát.

Xinh đẹp. Ý tưởng ở đây là tập trung đầy đủ vào một điều cùng một lúc; Xây dựng một điều để thực hiện công việc của mình rất tốt trong khi chú ý ít nhất có thể cho các khía cạnh khác của mã của bạn. Một khi bạn đã giải quyết và xây dựng tất cả các mối quan tâm riêng biệt này trong sự cô lập, có nghĩa là họ có thể rất mô -đun, tách rời và đóng gói, bạn có thể bắt đầu đưa chúng lại với nhau vào một dự án lớn hơn.

Một ví dụ tuyệt vời là bố cục. Nếu bạn đang sử dụng một hệ thống lưới, tất cả các mã liên quan đến bố cục nên tự tồn tại mà không bao gồm bất cứ điều gì khác. Bạn đã viết mã xử lý bố cục và đó là nó:

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

1

Bây giờ bạn sẽ cần phải viết mã mới, riêng biệt để xử lý những gì cuộc sống bên trong bố cục đó:

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

2

Việc tách các mối quan tâm cho phép bạn giữ mã tự túc, không biết gì và cuối cùng có thể duy trì hơn rất nhiều. Mã tuân thủ việc tách các mối quan tâm có thể được sửa đổi, chỉnh sửa, mở rộng và duy trì một cách tự tin hơn nhiều vì chúng tôi biết trách nhiệm của nó đạt được bao xa. Ví dụ, chúng tôi biết rằng việc sửa đổi bố cục sẽ chỉ sửa đổi bố cục không có gì khác.

Việc tách các mối quan tâm làm tăng khả năng tái sử dụng và sự tự tin trong khi giảm sự phụ thuộc.

Quan niệm sai lầm

Tôi cảm thấy, có một số quan niệm sai lầm đáng tiếc xung quanh việc tách các mối quan tâm khi áp dụng cho HTML và CSS. Tất cả họ dường như xoay quanh một số định dạng của:

Sử dụng các lớp cho CSS trong đánh dấu của bạn phá vỡ sự tách biệt của các mối quan tâm.

Thật không may, điều này đơn giản là không đúng. Việc tách các mối quan tâm tồn tại trong bối cảnh HTML và CSS (và JS), nhưng không phải theo cách mà nhiều người dường như tin.

Việc tách các mối quan tâm khi được áp dụng cho mã phía trước không phải là về các lớp-trong-HTML-cực nhất-for-hooks-hooks-blurring-the-lines-between-offers; Đó là về thực tế là chúng tôi đang sử dụng các ngôn ngữ khác nhau để đánh dấu và tạo kiểu.

Quay trở lại trước khi CSS được áp dụng rộng rãi, chúng tôi đã sử dụng

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

75S để đặt nội dung và các yếu tố

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

23 với các thuộc tính

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

24 để cung cấp kiểu dáng mỹ phẩm. Vấn đề ở đây là HTML đã được sử dụng để tạo nội dung và cũng để tạo kiểu cho nó; Không có cách nào để có cái này mà không có cái kia. Đây là một thiếu hoàn toàn sự tách biệt các mối quan tâm, đó là một vấn đề. Công việc của CSS, là cung cấp một cú pháp hoàn toàn mới để áp dụng kiểu dáng này, cho phép chúng tôi phân tách nội dung và mối quan tâm về phong cách của chúng tôi trên hai công nghệ.

Một lập luận phổ biến khác là việc đặt các lớp vào HTML của bạn đặt thông tin kiểu trong đánh dấu của bạn.

Vì vậy, trong một nỗ lực để phá vỡ điều này, mọi người áp dụng các bộ chọn có thể trông hơi giống sau:

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

3

CSS này có thể thực hiện để tạo kiểu cho trang web chính của chúng tôi có các vấn đề thông thường về sự phụ thuộc vị trí, ý định chọn người kém và tính đặc hiệu cao, nhưng nó cũng quản lý để thực hiện chính xác những gì các nhà phát triển đang cố gắng tránh, chỉ theo hướng ngược lại: nó đặt DOM thông tin trong CSS của bạn. Những nỗ lực tích cực để tránh đặt bất kỳ gợi ý hoặc móc kiểu nào vào đánh dấu chỉ dẫn đến việc quá tải các kiểu dáng với thông tin DOM.it puts DOM information in your CSS. Aggressive attempts to avoid putting any style hints or hooks in markup only lead to overloading stylesheets with DOM information.

Nói tóm lại: Có các lớp học trong đánh dấu của bạn không vi phạm việc tách các mối quan tâm. Các lớp chỉ hoạt động như một API để liên kết hai mối quan tâm riêng biệt với nhau. Cách đơn giản nhất để tách biệt các mối quan tâm là viết HTML hình thành tốt và CSS hình thành tốt, và liên kết với hai cùng với việc sử dụng các lớp học hợp lý, hợp lý.