Kế thừa CSS

Heydon Pickering (@heydonworks) đã làm việc với The Paciello Group, The BBC, Smashing Magazine và Bulb Energy với tư cách là nhà thiết kế, kỹ sư, nhà văn, biên tập viên và … Thông tin thêm về Heydon ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

• 
  Danh sách kiểm tra thiết kế giao diện thông minh

• 
  Giao diện người dùng SmashingConf 2023

• 
  Xem trực tiếp vào tháng 12. thứ 8

• 
  Nắm vững quy trình thiết kế với Paul Boag

• 
  Lớp học tổng thể về nguyên tắc phổ quát của kiểu chữ với Elliot Jay Stocks

Tôi quan tâm đến thiết kế mô-đun. Từ lâu, tôi đã bị thuyết phục về việc chia các trang web thành các thành phần chứ không phải các trang và kết hợp các thành phần đó một cách linh hoạt thành các giao diện. Tính linh hoạt, hiệu quả và khả năng bảo trì rất nhiều

Nhưng tôi không muốn thiết kế của mình trông giống như nó được tạo ra từ những thứ không liên quan. Tôi đang tạo một giao diện, không phải một bức ảnh ghép siêu thực. May mắn thay, đã có một công nghệ, được gọi là CSS, được thiết kế đặc biệt để giải quyết vấn đề này. Sử dụng CSS, tôi có thể truyền các kiểu vượt qua biên giới của các thành phần HTML của mình, đảm bảo một thiết kế nhất quán với nỗ lực tối thiểu

• di sản,
• tầng (chữ “C” trong CSS)

Mặc dù các tính năng này cho phép một cách DRY, hiệu quả để tạo kiểu cho các tài liệu web và mặc dù chúng là lý do CSS tồn tại, nhưng chúng đã không còn được ưa chuộng. Từ các phương pháp CSS như BEM và CSS nguyên tử cho đến các mô-đun CSS được đóng gói theo chương trình, nhiều người đang cố gắng hết sức để tránh hoặc loại bỏ các tính năng này. Điều này cho phép các nhà phát triển kiểm soát nhiều hơn đối với CSS của họ, nhưng chỉ là một loại kiểm soát chuyên quyền dựa trên sự can thiệp thường xuyên

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

Chuyển đến hội thảo ↬

Tôi sẽ xem xét lại tính kế thừa, tầng và phạm vi ở đây liên quan đến thiết kế giao diện mô-đun. Mục đích của tôi là chỉ cho bạn cách tận dụng các tính năng này để mã CSS của bạn trở nên ngắn gọn và tự điều chỉnh hơn, đồng thời giao diện của bạn dễ dàng mở rộng hơn

Thừa Kế Và .sans-serif { font-family: sans-serif; } 5

Bất chấp sự phản đối của nhiều người, CSS không chỉ cung cấp phạm vi toàn cầu. Nếu nó đã làm, mọi thứ sẽ trông giống hệt nhau. Thay vào đó, CSS có phạm vi toàn cầu và phạm vi cục bộ. Giống như trong JavaScript, phạm vi cục bộ có quyền truy cập vào phạm vi cha và toàn cầu. Trong CSS, điều này tạo điều kiện thuận lợi cho việc kế thừa

Chẳng hạn, nếu tôi áp dụng khai báo

.sans-serif {
  font-family: sans-serif;
}

5 cho thư mục gốc (đọc. global)

.sans-serif {
  font-family: sans-serif;
}

7, tôi có thể đảm bảo rằng quy tắc này áp dụng cho tất cả các phần tử tổ tiên trong tài liệu (với một vài ngoại lệ, sẽ được giải quyết trong phần tiếp theo)

html {
  font-family: sans-serif;
}

/*
This rule is not needed ↷
p {
  font-family: sans-serif;
}
*/

Giống như trong JavaScript, nếu tôi khai báo một cái gì đó trong phạm vi cục bộ, thì nó không có sẵn cho phạm vi toàn cầu — hoặc thực sự là bất kỳ phạm vi tổ tiên nào — nhưng nó có sẵn cho phạm vi con (các phần tử trong

.sans-serif {
  font-family: sans-serif;
}

8). Trong ví dụ tiếp theo, phần tử

.sans-serif {
  font-family: sans-serif;
}

9 của

Lorem ipsum.

0 không được chấp nhận bởi phần tử

.sans-serif {
  font-family: sans-serif;
}

7. Tuy nhiên, phần tử

Lorem ipsum.

2 bên trong

.sans-serif {
  font-family: sans-serif;
}

8 không tôn trọng giá trị

.sans-serif {
  font-family: sans-serif;
}

9

.sans-serif {
  font-family: sans-serif;
}

1

Điều tuyệt vời về tính kế thừa là bạn có thể thiết lập cơ sở cho một thiết kế trực quan nhất quán với rất ít mã. Và những phong cách này thậm chí sẽ áp dụng cho HTML mà bạn chưa viết. Nói về bằng chứng trong tương lai

Thay thế

Tất nhiên, có nhiều cách khác để áp dụng các kiểu phổ biến. Ví dụ, tôi có thể tạo một lớp

Lorem ipsum.

5…

.sans-serif {
  font-family: sans-serif;
}

… và áp dụng nó cho bất kỳ yếu tố nào mà tôi cảm thấy nên có phong cách đó

Lorem ipsum.

Điều này mang lại cho tôi một số kiểm soát. Tôi có thể chọn và chọn chính xác yếu tố nào mang phong cách này và yếu tố nào không

Bất kỳ cơ hội nào để kiểm soát đều hấp dẫn, nhưng có những vấn đề rõ ràng. Tôi không chỉ phải áp dụng lớp theo cách thủ công cho bất kỳ phần tử nào sẽ sử dụng nó (có nghĩa là phải biết bắt đầu với lớp đó là gì), mà trong trường hợp này, tôi đã thực sự bỏ qua khả năng hỗ trợ nội dung động. Cả trình soạn thảo WYSIWYG lẫn trình phân tích cú pháp Markdown đều không cung cấp các lớp

Lorem ipsum.

6 cho các phần tử

.sans-serif {
  font-family: sans-serif;
}

8 tùy ý theo mặc định

Lorem ipsum.

8 đó không phải là họ hàng xa của

Lorem ipsum.

9 - ngoại trừ việc trước đây có nghĩa là thêm mã vào cả biểu định kiểu và HTML. Sử dụng tính kế thừa, chúng ta có thể làm ít hơn cái này và không cái nào khác. Thay vì viết ra các lớp cho từng kiểu phông chữ, chúng ta có thể áp dụng bất kỳ kiểu nào chúng ta muốn cho phần tử

.sans-serif {
  font-family: sans-serif;
}

7 trong một khai báo

.sans-serif {
  font-family: sans-serif;
}

0

Từ khóa .sans-serif { font-family: sans-serif; } 01

Một số loại thuộc tính không được kế thừa theo mặc định và một số phần tử không kế thừa một số thuộc tính. Nhưng bạn có thể sử dụng

.sans-serif {
  font-family: sans-serif;
}

02 để buộc thừa kế trong một số trường hợp

Ví dụ: phần tử

.sans-serif {
  font-family: sans-serif;
}

03 không kế thừa bất kỳ thuộc tính phông chữ nào trong ví dụ trước. Cũng không

.sans-serif {
  font-family: sans-serif;
}

04. Để đảm bảo rằng tất cả các phần tử kế thừa các thuộc tính này từ phạm vi toàn cầu, tôi có thể sử dụng bộ chọn chung và từ khóa

.sans-serif {
  font-family: sans-serif;
}

01. Bằng cách này, tôi nhận được nhiều lợi ích nhất từ ​​việc thừa kế

.sans-serif {
  font-family: sans-serif;
}

6

Lưu ý rằng tôi đã bỏ qua

.sans-serif {
  font-family: sans-serif;
}

06. Tôi không muốn kế thừa trực tiếp

.sans-serif {
  font-family: sans-serif;
}

06 vì nó sẽ ghi đè kiểu tác nhân người dùng cho các phần tử tiêu đề, phần tử

.sans-serif {
  font-family: sans-serif;
}

08 và các phần tử khác. Bằng cách này, tôi lưu một dòng mã và có thể chuyển sang kiểu tác nhân người dùng nếu tôi muốn

Một tài sản khác mà tôi không muốn thừa kế là

.sans-serif {
  font-family: sans-serif;
}

09. Tôi không muốn bỏ đặt in nghiêng của

.sans-serif {
  font-family: sans-serif;
}

60 chỉ để viết mã lại. Đó sẽ là công việc lãng phí và dẫn đến nhiều mã hơn tôi cần

Bây giờ, mọi thứ hoặc kế thừa hoặc buộc phải kế thừa các kiểu phông chữ mà tôi muốn chúng. Chúng tôi đã đi một chặng đường dài để tuyên truyền một thương hiệu nhất quán, trên toàn dự án, chỉ với hai khối khai báo. Từ thời điểm này trở đi, không nhà phát triển nào phải nghĩ về

.sans-serif {
  font-family: sans-serif;
}

5,

.sans-serif {
  font-family: sans-serif;
}

9 hoặc

.sans-serif {
  font-family: sans-serif;
}

63 trong khi xây dựng các thành phần, trừ khi họ đang tạo ra các ngoại lệ. Đây là nơi dòng thác đến

Kiểu dáng dựa trên ngoại lệ

Tôi có thể muốn tiêu đề chính của mình áp dụng cùng một

.sans-serif {
  font-family: sans-serif;
}

5,

.sans-serif {
  font-family: sans-serif;
}

63 và có thể là

.sans-serif {
  font-family: sans-serif;
}

9. Điều đó quan tâm đến việc sử dụng thừa kế. Nhưng tôi muốn

.sans-serif {
  font-family: sans-serif;
}

06 của nó khác đi. Vì tác nhân người dùng đã cung cấp một

.sans-serif {
  font-family: sans-serif;
}

06 mở rộng cho các phần tử

.sans-serif {
  font-family: sans-serif;
}

69 (và nó sẽ liên quan đến kích thước phông chữ cơ sở

.sans-serif {
  font-family: sans-serif;
}

10 mà tôi đã đặt), nên có thể tôi không cần phải làm gì ở đây

Tuy nhiên, nếu tôi muốn điều chỉnh kích thước phông chữ của bất kỳ phần tử nào, tôi có thể. Tôi tận dụng phạm vi toàn cầu và chỉ chỉnh sửa những gì tôi cần trong phạm vi cục bộ

.sans-serif {
  font-family: sans-serif;
}

1

Nếu phong cách của các thành phần CSS được đóng gói theo mặc định, điều này sẽ không thể thực hiện được. Tôi phải thêm tất cả các kiểu phông chữ vào

.sans-serif {
  font-family: sans-serif;
}

69 một cách rõ ràng. Ngoài ra, tôi có thể chia các kiểu của mình thành các lớp riêng biệt và áp dụng từng kiểu cho

.sans-serif {
  font-family: sans-serif;
}

69 dưới dạng giá trị được phân tách bằng dấu cách

.sans-serif {
  font-family: sans-serif;
}

5

Dù bằng cách nào, nó sẽ hiệu quả hơn và một

.sans-serif {
  font-family: sans-serif;
}

69 theo phong cách sẽ là kết quả duy nhất. Sử dụng cascade, tôi đã tạo kiểu cho hầu hết các phần tử theo cách tôi muốn, với

.sans-serif {
  font-family: sans-serif;
}

69 chỉ là trường hợp đặc biệt, chỉ ở một khía cạnh. Cascade hoạt động như một bộ lọc, nghĩa là các kiểu chỉ được nêu khi chúng thêm một cái gì đó mới

kiểu phần tử

Chúng tôi đã có một khởi đầu tốt, nhưng để thực sự tận dụng dòng thác, chúng tôi nên tạo kiểu càng nhiều yếu tố phổ biến càng tốt. Tại sao?

Nói cách khác, kiểu “nguyên tử” tạo nên “phân tử” giao diện của bạn (để sử dụng thuật ngữ thiết kế nguyên tử) phần lớn phải được xử lý bằng cách sử dụng bộ chọn thành phần. Bộ chọn phần tử có độ đặc hiệu thấp, vì vậy chúng sẽ không ghi đè lên bất kỳ kiểu dựa trên lớp nào mà bạn có thể kết hợp sau này

Điều đầu tiên bạn nên làm là tạo kiểu cho tất cả các yếu tố mà bạn biết mình sẽ cần

.sans-serif {
  font-family: sans-serif;
}

8

Phần tiếp theo rất quan trọng nếu bạn muốn có một giao diện nhất quán không dư thừa. Mỗi khi bạn tạo một thành phần mới, nếu nó giới thiệu các thành phần mới, hãy tạo kiểu cho các thành phần mới đó bằng bộ chọn thành phần. Bây giờ không phải là lúc để giới thiệu các bộ chọn hạn chế, độ đặc hiệu cao. Cũng không cần phải soạn một lớp. Các yếu tố ngữ nghĩa là những gì chúng là

Ví dụ: nếu tôi chưa tạo kiểu cho các phần tử

.sans-serif {
  font-family: sans-serif;
}

15 (như trong ví dụ trước) và thành phần mới của tôi kết hợp một phần tử nút, thì đây là cơ hội để tôi tạo kiểu cho các phần tử nút cho toàn bộ giao diện

.sans-serif {
  font-family: sans-serif;
}

0

Bây giờ, khi bạn bắt đầu viết một thành phần mới cũng sẽ kết hợp các nút, đó là một điều ít phải lo lắng hơn. Bạn không viết lại cùng một CSS dưới một không gian tên khác và cũng không có tên lớp để ghi nhớ hoặc viết. CSS phải luôn hướng tới mục tiêu trở nên dễ dàng và hiệu quả — CSS được thiết kế cho điều đó

Sử dụng bộ chọn phần tử có ba ưu điểm chính

• HTML kết quả ít dài dòng hơn (không có lớp thừa)
• Biểu định kiểu kết quả ít dài dòng hơn (các kiểu được chia sẻ giữa các thành phần, không được viết lại cho mỗi thành phần)
• Giao diện theo kiểu kết quả dựa trên HTML ngữ nghĩa

Việc sử dụng các lớp để cung cấp các phong cách độc quyền thường được bảo vệ như là một sự tách biệt giữa các mối quan tâm. ” Điều này là hiểu sai nguyên tắc phân tách mối quan tâm của W3C. Mục tiêu là mô tả cấu trúc bằng HTML và tạo kiểu bằng CSS. Bởi vì các lớp được chỉ định riêng cho mục đích tạo kiểu và chúng xuất hiện trong phần đánh dấu, nên về mặt kỹ thuật, bạn đang phá vỡ sự phân tách ở bất cứ nơi nào chúng được sử dụng. Bạn phải thay đổi bản chất của cấu trúc để gợi ra phong cách

Bất cứ nơi nào bạn không dựa vào đánh dấu trình bày (lớp, kiểu nội tuyến), CSS của bạn tương thích với các quy ước cấu trúc và ngữ nghĩa chung. Điều này làm cho việc mở rộng nội dung và chức năng trở nên tầm thường mà không cần nó cũng trở thành một tác vụ tạo kiểu. Nó cũng làm cho CSS của bạn có thể tái sử dụng nhiều hơn trong các dự án khác nhau, nơi các cấu trúc ngữ nghĩa thông thường được sử dụng (nhưng khi 'phương pháp' CSS có thể khác nhau)

Trường hợp đặc biệt

Trước khi bất kỳ ai buộc tội tôi quá đơn giản, tôi biết rằng không phải tất cả các nút trong giao diện của bạn đều hoạt động giống nhau. Tôi cũng biết rằng các nút làm những việc khác nhau có thể trông khác nhau theo một cách nào đó

Nhưng điều đó không có nghĩa là chúng ta cần trì hoãn các lớp, kế thừa hoặc tầng. Để làm cho các nút được tìm thấy trong một giao diện trông không giống nhau về cơ bản là gây nhầm lẫn cho người dùng của bạn. Vì lợi ích của khả năng truy cập và tính nhất quán, hầu hết các nút chỉ cần khác nhau về hình thức theo nhãn

.sans-serif {
  font-family: sans-serif;
}

10

Hãy nhớ rằng phong cách không phải là điểm khác biệt trực quan duy nhất. Nội dung cũng khác biệt về mặt trực quan — và theo cách ít mơ hồ hơn nhiều. Bạn đang đánh vần những thứ khác nhau theo đúng nghĩa đen

Có ít trường hợp hơn bạn có thể tưởng tượng khi chỉ sử dụng kiểu để phân biệt nội dung là cần thiết hoặc phù hợp. Thông thường, sự khác biệt về phong cách nên được bổ sung, chẳng hạn như nền đỏ hoặc biểu tượng hình ảnh đi kèm với nhãn văn bản. Sự hiện diện của nhãn văn bản là tiện ích đặc biệt đối với những người sử dụng phần mềm kích hoạt bằng giọng nói. Việc nói “nút màu đỏ” hoặc “nút có biểu tượng chữ thập” không có khả năng khiến phần mềm nhận ra

Tôi sẽ đề cập đến chủ đề thêm sắc thái cho các thành phần trông tương tự khác trong phần “Lớp tiện ích” để theo dõi

Thuộc tính

HTML ngữ nghĩa không chỉ là về các yếu tố. Thuộc tính xác định loại, thuộc tính và trạng thái. Những điều này cũng quan trọng đối với khả năng truy cập, vì vậy chúng cần có trong HTML nếu có. Và bởi vì chúng nằm trong HTML, nên chúng cung cấp thêm cơ hội để tạo kiểu móc

Ví dụ: phần tử

.sans-serif {
  font-family: sans-serif;
}

03 nhận thuộc tính

.sans-serif {
  font-family: sans-serif;
}

17, nếu bạn muốn tận dụng lợi thế của nó và cả các thuộc tính như

.sans-serif {
  font-family: sans-serif;
}

18 để mô tả trạng thái

.sans-serif {
  font-family: sans-serif;
}

11

Một vài điều cần lưu ý ở đây

• Tôi không cần đặt

  
  .sans-serif {
    font-family: sans-serif;
  }
  

  63,

  
  .sans-serif {
    font-family: sans-serif;
  }
  

  5 hoặc

  
  .sans-serif {
    font-family: sans-serif;
  }
  

  9 ở đây vì chúng được kế thừa từ

  
  .sans-serif {
    font-family: sans-serif;
  }
  

  7, nhờ tôi sử dụng từ khóa

  
  .sans-serif {
    font-family: sans-serif;
  }
  

  01. Nếu muốn thay đổi

  
  .sans-serif {
    font-family: sans-serif;
  }
  

  5 chính được sử dụng trong toàn bộ ứng dụng, tôi chỉ cần sửa một khai báo trong khối

  
  .sans-serif {
    font-family: sans-serif;
  }
  

  7
• Màu đường viền được liên kết với

  
  .sans-serif {
    font-family: sans-serif;
  }
  

  63, do đó, nó cũng kế thừa màu chung. Tất cả những gì tôi cần khai báo là chiều rộng và kiểu dáng của đường viền
• Bộ chọn thuộc tính

  
  .sans-serif {
    font-family: sans-serif;
  }
  

  57 không đủ tiêu chuẩn. Điều này có nghĩa là nó có phạm vi tiếp cận tốt hơn (nó có thể được sử dụng với cả bộ chọn

  
  .sans-serif {
    font-family: sans-serif;
  }
  

  03 và

  
  .sans-serif {
    font-family: sans-serif;
  }
  

  04 của tôi) và nó có độ đặc hiệu tối thiểu. Các bộ chọn thuộc tính đơn giản có cùng tính đặc hiệu như các lớp. Sử dụng chúng không đủ tiêu chuẩn có nghĩa là bất kỳ lớp nào được viết tiếp theo tầng sẽ ghi đè lên chúng như dự định

Phương pháp BEM sẽ giải quyết vấn đề này bằng cách áp dụng một lớp sửa đổi, chẳng hạn như

.sans-serif {
  font-family: sans-serif;
}

80. Nhưng xem xét rằng trạng thái không hợp lệ chỉ nên áp dụng khi nó được truyền đạt có thể truy cập được, thì

.sans-serif {
  font-family: sans-serif;
}

80 nhất thiết phải dư thừa. Nói cách khác, thuộc tính

.sans-serif {
  font-family: sans-serif;
}

18 phải ở đó, vậy mục đích của lớp là gì?

Chỉ Viết HTML

Điều yêu thích tuyệt đối của tôi về việc tận dụng tối đa bộ chọn phần tử và thuộc tính ở cấp cao trong tầng là điều này. Thành phần của các thành phần mới trở thành vấn đề ít hơn khi biết các quy ước đặt tên của công ty hoặc tổ chức và hơn thế nữa là biết HTML. Bất kỳ nhà phát triển nào thành thạo viết HTML đàng hoàng được giao cho dự án sẽ được hưởng lợi từ việc kế thừa kiểu dáng đã được đưa ra. Điều này làm giảm đáng kể nhu cầu tham khảo tài liệu hoặc viết CSS mới. Phần lớn, họ chỉ có thể viết ngôn ngữ (meta) mà họ nên biết thuộc lòng. Tim Baxter cũng đưa ra trường hợp này trong CSS có ý nghĩa. Phong cách It Like You Mean It

Cách trình bày

Cho đến nay, chúng tôi chưa viết bất kỳ CSS dành riêng cho thành phần nào, nhưng điều đó không có nghĩa là chúng tôi chưa tạo kiểu cho bất kỳ thứ gì. Tất cả các thành phần là thành phần của các phần tử HTML. Phần lớn theo thứ tự và sự sắp xếp của các yếu tố này mà các thành phần phức tạp hơn tạo thành bản sắc của chúng

Điều này đưa chúng ta đến bố cục

Về cơ bản, chúng ta cần xử lý bố cục luồng - khoảng cách của các thành phần khối liên tiếp. Bạn có thể nhận thấy rằng tôi đã không đặt bất kỳ lề nào cho bất kỳ yếu tố nào của mình cho đến nay. Đó là bởi vì lề không nên được coi là một thuộc tính của các phần tử mà là một thuộc tính của ngữ cảnh của các phần tử. Nghĩa là, chúng chỉ nên phát huy tác dụng khi các yếu tố gặp nhau.

May mắn thay, tổ hợp anh chị em liền kề có thể mô tả chính xác mối quan hệ này. Khai thác tầng, chúng ta có thể đặt mặc định thống nhất trên tất cả các phần tử cấp khối xuất hiện liên tiếp, chỉ với một vài ngoại lệ

.sans-serif {
  font-family: sans-serif;
}

12

Việc sử dụng bộ chọn cú lobotomized có độ đặc hiệu cực thấp đảm bảo rằng mọi phần tử (ngoại trừ các ngoại lệ phổ biến) đều được cách nhau một dòng. Điều này có nghĩa là có khoảng trắng mặc định trong mọi trường hợp và các nhà phát triển viết nội dung luồng thành phần sẽ có điểm bắt đầu hợp lý

Trong hầu hết các trường hợp, lợi nhuận hiện tự lo liệu. Nhưng do độ đặc hiệu thấp nên dễ dàng ghi đè khoảng cách một dòng cơ bản này khi cần. Ví dụ: tôi có thể muốn thu hẹp khoảng cách giữa các nhãn và các trường tương ứng của chúng để cho thấy chúng được ghép nối. Trong ví dụ sau, bất kỳ phần tử nào theo sau nhãn (

.sans-serif {
  font-family: sans-serif;
}

03,

.sans-serif {
  font-family: sans-serif;
}

04,

.sans-serif {
  font-family: sans-serif;
}

85, v.v. ) thu hẹp khoảng cách

.sans-serif {
  font-family: sans-serif;
}

13

Một lần nữa, sử dụng tầng có nghĩa là chỉ phải viết các kiểu cụ thể khi cần thiết. Mọi thứ khác phù hợp với một đường cơ sở hợp lý

Lưu ý rằng, vì lề chỉ xuất hiện giữa các phần tử nên chúng không tăng gấp đôi với bất kỳ phần đệm nào có thể đã được đưa vào vùng chứa. Đó là một điều nữa không phải lo lắng hoặc viết mã phòng thủ chống lại

Ngoài ra, lưu ý rằng bạn có cùng khoảng cách cho dù bạn có quyết định bao gồm các phần tử bao bọc hay không. Nghĩa là, bạn có thể thực hiện các thao tác sau và đạt được bố cục tương tự — chỉ là các lề xuất hiện giữa các

.sans-serif {
  font-family: sans-serif;
}

86 chứ không phải giữa các nhãn theo sau đầu vào

.sans-serif {
  font-family: sans-serif;
}

14

Đạt được kết quả tương tự với một phương pháp như CSS nguyên tử có nghĩa là soạn các lớp liên quan đến lề cụ thể và áp dụng chúng theo cách thủ công trong từng trường hợp, bao gồm cả các trường hợp ngoại lệ của

.sans-serif {
  font-family: sans-serif;
}

87 được xử lý ngầm bởi

.sans-serif {
  font-family: sans-serif;
}

88

.sans-serif {
  font-family: sans-serif;
}

15

Hãy nhớ rằng điều này sẽ chỉ bao gồm các lề trên nếu một người tuân thủ CSS nguyên tử. Bạn phải chỉ định các lớp riêng lẻ cho

.sans-serif {
  font-family: sans-serif;
}

63,

.sans-serif {
  font-family: sans-serif;
}

00 và một loạt các thuộc tính khác, vì CSS nguyên tử không tận dụng tính kế thừa hoặc bộ chọn phần tử

.sans-serif {
  font-family: sans-serif;
}

16

CSS nguyên tử cung cấp cho các nhà phát triển quyền kiểm soát trực tiếp đối với kiểu mà không cần chuyển hoàn toàn sang các kiểu nội tuyến, không thể tái sử dụng như các lớp. Bằng cách cung cấp các lớp cho các thuộc tính riêng lẻ, nó làm giảm sự trùng lặp của các khai báo trong biểu định kiểu

Tuy nhiên, nó đòi hỏi sự can thiệp trực tiếp vào đánh dấu để đạt được những mục đích này. Điều này đòi hỏi phải học và cam kết với API dài dòng của nó, cũng như phải viết nhiều mã HTML bổ sung

Thay vào đó, bằng cách định kiểu các phần tử HTML tùy ý và các mối quan hệ không gian của chúng, 'phương pháp' CSS phần lớn trở nên lỗi thời. Bạn có lợi thế khi làm việc với một hệ thống thiết kế thống nhất, thay vì hệ thống HTML với hệ thống kiểu dáng chồng chất để xem xét và duy trì riêng biệt

Dù sao đi nữa, đây là cách cấu trúc CSS của chúng tôi sẽ trông như thế nào với giải pháp nội dung luồng của chúng tôi tại chỗ

1. phong cách toàn cầu (

   
   .sans-serif {
     font-family: sans-serif;
   }
   

   7) và kế thừa bắt buộc,
2. thuật toán luồng và ngoại lệ (sử dụng bộ chọn cú lobotomized),
3. phong cách phần tử và thuộc tính

Chúng tôi vẫn chưa viết một thành phần cụ thể hoặc hình thành một lớp CSS, nhưng phần lớn kiểu dáng của chúng tôi đã hoàn thành — nghĩa là, nếu chúng tôi viết các lớp của mình theo cách hợp lý, có thể tái sử dụng

lớp học tiện ích

Điều về các lớp là chúng có phạm vi toàn cầu. Bất cứ nơi nào chúng được áp dụng trong HTML, chúng đều bị ảnh hưởng bởi CSS được liên kết. Đối với nhiều người, đây được coi là một nhược điểm, bởi vì hai nhà phát triển làm việc độc lập có thể viết một lớp có cùng tên và ảnh hưởng tiêu cực đến công việc của nhau

Các mô-đun CSS gần đây đã được hình thành để khắc phục tình huống này bằng cách tạo các tên lớp duy nhất được lập trình gắn với phạm vi thành phần hoặc cục bộ của chúng

.sans-serif {
  font-family: sans-serif;
}

17

Bỏ qua sự xấu xí bề ngoài của mã được tạo, bạn sẽ có thể thấy sự chênh lệch giữa các thành phần được tác giả độc lập có thể dễ dàng len lỏi vào đâu. Số nhận dạng duy nhất được sử dụng để tạo kiểu cho những thứ tương tự. Giao diện kết quả sẽ không nhất quán hoặc nhất quán với nỗ lực và dự phòng lớn hơn nhiều

Không có lý do gì để coi các yếu tố phổ biến là duy nhất. Bạn nên tạo kiểu cho loại phần tử, không phải thể hiện của phần tử. Hãy luôn nhớ rằng thuật ngữ “loại” có nghĩa là “loại đồ vật, trong đó có thể có nhiều. ” Nói cách khác, tất cả các lớp phải là lớp tiện ích. tái sử dụng trên toàn cầu

Tất nhiên, trong ví dụ này, một lớp

.sans-serif {
  font-family: sans-serif;
}

02 dù sao cũng là dư thừa. chúng tôi có bộ chọn phần tử

.sans-serif {
  font-family: sans-serif;
}

15 để sử dụng thay thế. Nhưng nếu đó là một loại nút đặc biệt thì sao?

.sans-serif {
  font-family: sans-serif;
}

18

Bởi vì bộ chọn lớp có tính đặc hiệu cao hơn bộ chọn phần tử và có cùng tính đặc hiệu như bộ chọn thuộc tính, bất kỳ quy tắc nào được áp dụng theo cách này sẽ ghi đè quy tắc phần tử và thuộc tính trong biểu định kiểu. Vì vậy, nút nguy hiểm của tôi sẽ xuất hiện màu đỏ với văn bản màu trắng, nhưng các thuộc tính khác của nó — như phần đệm, đường viền tiêu điểm và lề được áp dụng thông qua thuật toán luồng — sẽ vẫn nguyên vẹn

.sans-serif {
  font-family: sans-serif;
}

19

Xung đột tên đôi khi có thể xảy ra nếu một số người đang làm việc trên cùng một cơ sở mã trong một thời gian dài. Nhưng có nhiều cách để tránh điều này, chẳng hạn như, ồ, tôi không biết, trước tiên hãy tìm kiếm văn bản để kiểm tra sự tồn tại của tên bạn sắp lấy. Bạn không bao giờ biết, ai đó có thể đã giải quyết vấn đề mà bạn đang giải quyết rồi

Tiện ích phạm vi địa phương

Điều yêu thích của tôi với các lớp tiện ích là đặt chúng trên các thùng chứa, sau đó sử dụng hook này để tác động đến bố cục của các phần tử con bên trong. Ví dụ: tôi có thể nhanh chóng viết mã bố cục cách đều nhau, phản hồi nhanh, căn giữa cho bất kỳ thành phần nào

.sans-serif {
  font-family: sans-serif;
}

0

Với điều này, tôi có thể căn giữa các mục trong danh sách nhóm, các nút, tổ hợp các nút và liên kết, bất cứ thứ gì. Đó là nhờ việc sử dụng phần

.sans-serif {
  font-family: sans-serif;
}

05, có nghĩa là bất kỳ phần tử con trực tiếp nào của

.sans-serif {
  font-family: sans-serif;
}

06 sẽ áp dụng các kiểu này, trong phạm vi này, nhưng cũng kế thừa các kiểu toàn cục và phần tử

Và tôi đã điều chỉnh lề để các phần tử có thể bao bọc tự do mà không phá vỡ nhịp dọc được đặt bằng cách sử dụng bộ chọn

.sans-serif {
  font-family: sans-serif;
}

88 phía trên nó. Đó là một lượng nhỏ mã cung cấp giải pháp bố cục chung, đáp ứng bằng cách đặt phạm vi cục bộ cho các phần tử tùy ý

Hệ thống lưới dựa trên flexbox nhỏ bé (93B được rút gọn) của tôi về cơ bản chỉ là một lớp tiện ích như thế này. Nó có khả năng tái sử dụng cao và vì nó sử dụng

.sans-serif {
  font-family: sans-serif;
}

08 nên không cần can thiệp vào điểm dừng. Tôi chỉ làm theo thuật toán gói của flexbox

.sans-serif {
  font-family: sans-serif;
}

1
Logo đặc trưng của Fukol

Khi sử dụng BEM, bạn sẽ được khuyến khích đặt một lớp “phần tử” rõ ràng trên mỗi mục lưới

.sans-serif {
  font-family: sans-serif;
}

2

Nhưng không cần. Chỉ cần một mã định danh để khởi tạo phạm vi cục bộ. Các mục ở đây không được bảo vệ khỏi ảnh hưởng bên ngoài nhiều hơn các mục trong phiên bản của tôi, được nhắm mục tiêu với

.sans-serif {
  font-family: sans-serif;
}

05 - chúng cũng không nên. Sự khác biệt duy nhất là đánh dấu tăng cao

Vì vậy, bây giờ chúng tôi đã bắt đầu kết hợp các lớp, nhưng chỉ chung chung, như dự kiến. Chúng tôi vẫn chưa tạo kiểu cho các thành phần phức tạp một cách độc lập. Thay vào đó, chúng tôi đang giải quyết các vấn đề trên toàn hệ thống theo cách có thể tái sử dụng. Đương nhiên, bạn sẽ cần ghi lại cách các lớp này được sử dụng trong nhận xét của mình

Các lớp tiện ích như thế này tận dụng đồng thời phạm vi toàn cầu, phạm vi cục bộ, tính kế thừa và tầng của CSS. Các lớp có thể được áp dụng phổ biến;

Đây là cách thác của chúng tôi trông bây giờ

1. phong cách toàn cầu (

   
   .sans-serif {
     font-family: sans-serif;
   }
   

   7) và kế thừa bắt buộc,
2. thuật toán luồng và ngoại lệ (sử dụng bộ chọn cú lobotomized),
3. phong cách phần tử và thuộc tính,
4. các lớp tiện ích chung

Tất nhiên, có thể không bao giờ cần phải viết một trong hai tiện ích ví dụ này. Vấn đề là, nếu nhu cầu xuất hiện trong khi làm việc trên một thành phần, thì giải pháp phải được cung cấp cho tất cả các thành phần. Luôn suy nghĩ theo hệ thống

Các kiểu dành riêng cho thành phần

Ngay từ đầu, chúng ta đã tạo kiểu dáng cho các thành phần và cách kết hợp các thành phần, vì vậy, bạn nên để trống phần này. Nhưng điều đáng nói là bất kỳ thành phần nào không được tạo từ các thành phần khác (ngay đến các thành phần HTML riêng lẻ) nhất thiết phải được quy định quá mức. Chúng là các thành phần ID là gì đối với bộ chọn và có nguy cơ trở nên lỗi thời đối với hệ thống

Trên thực tế, một bài tập tốt là chỉ xác định các thành phần phức tạp (“phân tử”, “sinh vật”) theo ID và cố gắng không sử dụng các ID đó trong CSS của bạn. Ví dụ: bạn có thể đặt

.sans-serif {
  font-family: sans-serif;
}

101 trên thành phần biểu mẫu đăng nhập của mình. Bạn không cần phải sử dụng

.sans-serif {
  font-family: sans-serif;
}

101 trong CSS của mình với các kiểu thuật toán thành phần, thuộc tính và luồng, mặc dù bạn có thể thấy mình đang tạo một hoặc hai lớp tiện ích chung có thể được sử dụng trong các thành phần biểu mẫu khác

Nếu bạn sử dụng

.sans-serif {
  font-family: sans-serif;
}

101, nó chỉ có thể ảnh hưởng đến thành phần đó. Đó là một lời nhắc nhở rằng bạn đã rời xa việc phát triển một hệ thống thiết kế và hướng tới công việc vô tận chỉ đơn thuần là đẩy các pixel

Sự kết luận

Khi tôi nói với mọi người rằng tôi không sử dụng các phương pháp như BEM hoặc các công cụ như mô-đun CSS, nhiều người cho rằng tôi đang viết CSS như thế này

.sans-serif {
  font-family: sans-serif;
}

3

Tôi không. Một thông số kỹ thuật quá mức rõ ràng hiện diện ở đây và tất cả chúng ta nên cẩn thận để tránh. Chỉ là BEM (cộng với OOCSS, SMACSS, CSS nguyên tử, v.v. ) không phải là cách duy nhất để tránh CSS phức tạp, khó quản lý

Trong nỗ lực đánh bại các tai ương về tính đặc hiệu, nhiều phương pháp trì hoãn hầu như chỉ dành cho bộ chọn lớp. Vấn đề là điều này dẫn đến sự gia tăng của các lớp. các mật mã khó hiểu làm phình to đánh dấu và điều đó - nếu không chú ý cẩn thận đến tài liệu - có thể khiến các nhà phát triển mới làm quen với hệ thống đặt tên nội bộ mà họ tạo nên bối rối

Bằng cách sử dụng nhiều lớp, bạn cũng duy trì một hệ thống kiểu dáng phần lớn tách biệt với hệ thống HTML của bạn. Việc chiếm đoạt 'mối quan tâm riêng' này có thể dẫn đến dư thừa hoặc tệ hơn là có thể khuyến khích không thể tiếp cận. có thể ảnh hưởng đến một phong cách trực quan mà không ảnh hưởng đến trạng thái có thể truy cập cùng với nó

.sans-serif {
  font-family: sans-serif;
}

4

Thay vì viết rộng rãi và quy định các lớp học, tôi đã xem xét một số phương pháp khác

• tận dụng tính kế thừa để tạo tiền lệ cho tính nhất quán;
• tận dụng tối đa các bộ chọn phần tử và thuộc tính để hỗ trợ bố cục dựa trên tiêu chuẩn, minh bạch;
• áp dụng hệ thống bố trí luồng mã và tiết kiệm lao động;
• kết hợp một tập hợp khiêm tốn các lớp tiện ích chung chung để giải quyết các vấn đề về bố cục phổ biến ảnh hưởng đến nhiều yếu tố

Tất cả những thứ này được sử dụng để tạo ra một hệ thống thiết kế giúp viết các thành phần giao diện mới dễ dàng hơn và ít phụ thuộc vào việc thêm mã CSS mới khi dự án đáo hạn. Và điều này có thể thực hiện được không phải nhờ vào việc đặt tên và đóng gói nghiêm ngặt, mà nhờ vào sự thiếu rõ ràng của nó

Ngay cả khi bạn không thoải mái khi sử dụng các kỹ thuật cụ thể mà tôi đã đề xuất ở đây, tôi hy vọng bài viết này ít nhất giúp bạn suy nghĩ lại về các thành phần là gì. Chúng không phải là những thứ bạn tạo ra một cách cô lập. Đôi khi, trong trường hợp các phần tử HTML tiêu chuẩn, chúng hoàn toàn không phải là thứ bạn tạo ra. Bạn càng soạn nhiều thành phần từ các thành phần, giao diện của bạn sẽ càng dễ tiếp cận và nhất quán về mặt trực quan và cần ít CSS hơn để đạt được mục đích đó

Không có gì sai với CSS. Trên thực tế, nó rất tốt trong việc cho phép bạn làm được nhiều việc với một ít. Chúng tôi chỉ không tận dụng điều đó

Kế thừa trong CSS là gì?

Thuộc tính CSS nào được kế thừa?

Tôi có thể sử dụng CSS kế thừa không?

Kế thừa và khởi tạo trong CSS là gì?