Mô-đun CSS BEM

Theo kho lưu trữ chính thức của Mô-đun CSS GitHub, Mô-đun CSS là một tệp CSS trong đó tất cả các tên lớp và tên hoạt hình được đặt trong phạm vi cục bộ theo mặc định. Ngược lại, trong một tệp CSS điển hình, tất cả các bộ chọn CSS nằm trong phạm vi toàn cầu

Trong hướng dẫn này, chúng ta sẽ xem xét một số vấn đề phổ biến thường phát sinh khi viết CSS và tìm hiểu cách Mô-đun CSS có thể giúp chúng ta tránh chúng. Sau đó, chúng tôi sẽ tích hợp Mô-đun CSS vào ứng dụng React

Bắt đầu nào

điều kiện tiên quyết

• Kiến thức về HTML và CSS
• Kiến thức làm việc về React

Quen thuộc với Mô-đun CSS là một phần thưởng bổ sung

Hiểu các vấn đề phổ biến về CSS

Tất cả các bộ chọn trong CSS là các biến toàn cục. Khi một ứng dụng mở rộng quy mô, làm việc với các biến toàn cầu và quản lý các phụ thuộc ngày càng trở nên khó khăn hơn. Khi một số nhà phát triển đang làm việc trên ứng dụng, mọi thứ thậm chí còn phức tạp hơn

Đây là lý do tại sao

xung đột tên

Giả sử rằng trong khi tạo kiểu cho blog, chúng tôi thêm tên lớp

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

3 để chỉ các bài đăng trên trang chủ. Một nhà phát triển khác tạo thanh bên và cũng thêm tên lớp

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

3 cho các bài đăng trên thanh bên. Những sai lầm như thế này dẫn đến xung đột tên, xem tại đây

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

​​Là một ứng dụngcales, you’re more likely to encounter name collision (potentially harming performance). 

Khó xóa mã chết

Khi một phần tử hoặc một thành phần React bị xóa khỏi mã của chúng tôi, chúng tôi cũng cần xóa các kiểu của nó. Tuy nhiên, trong các ứng dụng lớn, rất khó để xác định xem một lớp có đang được sử dụng hay không. CSS không cung cấp giải pháp vượt trội

quản lý phụ thuộc

Các phần phụ thuộc không được xác định rõ ràng khi làm việc với các biến toàn cục, gây khó khăn cho việc xác định kiểu nào sẽ được kế thừa hoặc áp dụng thông qua

Có các phụ thuộc ngầm định khác trong CSS không dễ dàng xác định bằng cách chỉ quét mã. Ví dụ: một phần tử có

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

5 có liên quan đến phần tử cha của nó với

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

6

Các thành phần phụ thuộc là nguyên nhân gây lo ngại lớn và việc dễ dàng duy trì mã CSS của chúng ta phụ thuộc rất nhiều vào mức độ cấu trúc của các thành phần phụ thuộc

Đánh giá các giải pháp

BEM — Công cụ sửa đổi phần tử khối là quy ước đặt tên phổ biến cho các lớp trong HTML và CSS nhằm mục đích giúp các nhà phát triển hiểu mối quan hệ giữa cả hai ngôn ngữ. BEM giải quyết các vấn đề được mô tả ở trên bằng cách cung cấp các quy tắc đặt tên nghiêm ngặt

Trong BEM, một

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

7 là một yếu tố độc lập có thể tự nó có ý nghĩa; . Một

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

9 đề cập đến phần tử con của một

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

7; . g. ,

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

02)

Công cụ sửa đổi là một lá cờ trên

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

7 hoặc

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

9 được sử dụng để tạo kiểu cho nó. Nó được biểu thị bằng hai dấu gạch nối với tên của

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

7 hoặc

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

9 (e. g. ,

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

07)

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

Lợi ích của phương pháp đặt tên BEM là tất cả các bộ chọn đều nằm trong phạm vi của các bộ sửa đổi mặc dù là toàn cầu. Tuy nhiên, việc thêm tên BEM theo cách thủ công lặp đi lặp lại, khá tẻ nhạt và dễ xảy ra lỗi do con người

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

Cuối cùng, bạn có thể dành một lượng thời gian đáng kể để tìm hiểu xem thứ gì đó là

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

7 hay

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

9. Theo tôi, Jeremy Thomas, người tạo ra Bulma CSS, đã tóm tắt vấn đề một cách hoàn hảo

Quá trình phát triển liên quan đến việc tự động hóa các vấn đề khó khăn, vì vậy chúng ta có thể dễ dàng tự động hóa việc đặt tên bằng công cụ phù hợp

Ghi chú. Mặc dù Mô-đun CSS cho phép chúng tôi xác định phạm vi các kiểu của mình, nhưng chúng tôi vẫn có thể khai báo các lớp toàn cầu bằng cách thêm tiền tố vào tên lớp với

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

90

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

0

Ưu điểm của Mô-đun CSS

Hầu hết các quy trình công việc JavaScript và CSS hiện đại đều có xu hướng hướng tới kiến ​​trúc dựa trên thành phần, nhưng tiến trình trên CSS hoàn toàn là thông thường và không thực sự được hỗ trợ bởi ngôn ngữ này

BEM, như đã thảo luận trước đây, là một ví dụ hoàn hảo. Một câu nói quen thuộc được gọi là định lý cơ bản của công nghệ phần mềm tuyên bố rằng “mọi vấn đề trong khoa học máy tính đều có thể được giải quyết bằng một lớp trừu tượng bổ sung”

Mô-đun CSS là một lớp trừu tượng mỏng gói gọn các khái niệm mới được đưa vào ngôn ngữ. Do đó, Mô-đun CSS được viết giống như CSS đơn giản, như được thấy trong đoạn mã sau

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

9

Một điểm khác biệt là trong Mô-đun CSS, tất cả đánh dấu của chúng tôi được viết trong một tệp JavaScript như

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

91

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

3

Khi chúng tôi nhập Mô-đun CSS từ tệp

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

91 của mình, Mô-đun CSS sẽ xuất một đối tượng có ánh xạ từ tên cục bộ sang tên toàn cầu

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

5

Chúng ta có thể thấy rằng Mô-đun CSS tự động tạo các tên lớp duy nhất, tự động đặt tên cho cả nhóm của chúng ta

Cách hoạt động của Mô-đun CSS

Công cụ hiện đại như webpack, Browsify và JSPM cho phép chúng tôi xác định rõ ràng các phụ thuộc ngôn ngữ chéo. Do đó, chúng tôi có thể mô tả rõ ràng các phụ thuộc của từng tệp, bất kể loại tệp nguồn

Trong đoạn mã bên dưới, bất cứ khi nào

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

93 được tải hoặc gói, CSS tương ứng sẽ được tải giống như bất kỳ phần phụ thuộc nào khác

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

7

Mô-đun CSS bao gồm kỹ thuật mới này, đây là khả năng chính của trình tải hiện đại. Tuy nhiên, ở cấp độ cơ bản, cần có một thông số kỹ thuật mới để mô tả cách các biểu tượng này được chia sẻ

Hiểu về ICSS

Mặc dù Mô-đun CSS được viết giống như CSS đơn giản, nhưng nó thực sự biên dịch sang định dạng có thể hoán đổi cho nhau ở mức độ thấp được gọi là ICSS (CSS có thể tương tác) được thiết kế cho người triển khai trình tải chứ không phải người dùng cuối. Nó là tập hợp lớn nhất của CSS tiêu chuẩn và định dạng tệp cấp thấp giúp nâng cao CSS

Bạn có thể kết hợp Mô-đun CSS vào một ứng dụng , tuy nhiên, chúng tôi sẽ tạo kiểu cho ứng dụng React

Tạo kiểu cho ứng dụng React với Mô-đun CSS

Tạo Mô-đun CSS hỗ trợ ứng dụng React v2 (và cao hơn) ngay lập tức. Tất cả những gì chúng ta phải làm là sử dụng quy ước đặt tên sau

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

8

Hãy xem nó hoạt động bằng cách xây dựng một ứng dụng React đơn giản. Trước tiên, hãy khởi động và chạy ứng dụng của chúng tôi

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

9

Tiếp theo, chúng tôi sẽ thêm hỗ trợ mô-đun CSS cho ứng dụng của mình bằng cách đổi tên tệp

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

94 thành

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

95. Cập nhật câu lệnh nhập trong tệp

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

96 để tránh lỗi

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

3

Cập nhật tệp

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

97 thành

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

98, cũng như câu lệnh nhập trong tệp

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

99. Tiếp theo, trong tệp

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

96 của chúng tôi, hãy thêm đoạn mã sau

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

0

Mặc dù hầu hết mã này đều quen thuộc, nhưng có một số điều chúng ta cần chú ý. Đầu tiên, chúng tôi đang phá hủy

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

31 và

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

32. Các kiểu chúng tôi cần là từ đối tượng

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

33, được xuất bởi Mô-đun CSS

Bây giờ, chúng ta sẽ cần tạo

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

34. Trong thư mục

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

35, tạo thư mục

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

36. Bên trong thư mục, tạo một tệp

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

37 và một tệp

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

38;

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

1

Trong tệp này, chúng tôi có một lớp nút bình thường

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

50 bao gồm

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

51 từ

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

95

---

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các sự cố trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

---

Thành phần là một tính năng trong Mô-đun CSS cho phép chúng tôi soạn các bộ chọn. Do đó, chúng ta có thể tạo một lớp bằng cách kế thừa các kiểu từ một lớp khác, nhưng các quy tắc

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

53 này phải xuất hiện trước các quy tắc khác

Ví dụ: các lớp

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

54,

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

55,

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

56,

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

57 và

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

58 đều kế thừa các kiểu từ

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

59 thông qua thành phần

Tệp

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

96 của chúng tôi bây giờ trông giống như mã bên dưới

// Block Element
.btn {}

// Element that depends on the Block often a child element
.btn__text {
  // rules
}

// Modifiers that changes the styles of the block
.btn--primary {}
.btn--small {}

0

Màn hình ứng dụng của chúng ta sẽ giống như hình ảnh ở đây

Bạn có thể xem mã đầy đủ cho hướng dẫn

Phần kết luận

Không còn nghi ngờ gì nữa, Mô-đun CSS cung cấp một trong những cải tiến quan trọng nhất cho ngôn ngữ CSS trong nhiều năm. Một trong những điều tốt nhất về Mô-đun CSS là chúng tôi có thể viết CSS cũ tốt có thể được tích hợp vào nhiều ứng dụng khác nhau. Nó chỉ đơn giản là tăng thêm sức mạnh cho CSS

Nếu ứng dụng React của bạn không sử dụng Tạo ứng dụng React hoặc sử dụng phiên bản thấp hơn phiên bản 2, bạn vẫn có thể thêm hỗ trợ cho mô-đun CSS bằng cách sử dụng

/* styles */
.main .post {
  color: #000000;
  font-size: 2rem;
}

.sidebar .post {
  color: #FFFFFF;
  font-size: 1rem;
}

71

 

Giao diện người dùng của bạn có ngốn CPU của người dùng không?

Khi giao diện người dùng web ngày càng phức tạp, các tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất cả người dùng của bạn trong sản xuất, hãy thử LogRocket. https. // tên lửa. com/đăng ký/

LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các chỉ số hiệu suất chính của giao diện người dùng, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, ghi nhật ký yêu cầu mạng và tự động hiển thị tất cả các lỗi

CSS có tốt không?

Mô-đun CSS là gì?

Bem có lỗi thời không?

Tôi có nên sử dụng các mô-đun CSS hoặc các thành phần được tạo kiểu không?