Cách giải quyết tắc nghẽn CSS quy mô lớn với ITCSS và BEM
Trên các dự án cơ sở mã giao diện user , các yêu cầu và đôi khi phạm vi có thể thay đổi thường xuyên. Khi các yêu cầu thay đổi và bạn điều chỉnh biểu định kiểu hoặc mở rộng kiểu của bộ chọn trong một trang cụ thể, những thay đổi đó thường ảnh hưởng đến các dạng xem khác có chung kiểu tương tự.Điều này có thể dẫn đến nhiều giờ chiến tranh về tính cụ thể trong khi cố gắng overrides các kiểu. Điều đó xảy ra bởi vì dự án không được cấu trúc theo cách phù hợp đảm bảo rằng những thay đổi đối với bảng định kiểu sẽ không có tác động tiêu cực đến toàn bộ dự án. Trong hướng dẫn này, bạn sẽ thấy cách kết hợp CSS Công cụ sửa đổi phần tử khối (BEM) với CSS Tam giác ngược (ITCSS) để tránh các vấn đề.
Những khó khăn chung gặp phải khi làm việc với CSS
CSS là một ngôn ngữ có một số vấn đề khiến việc quản lý nó hơi khó khăn đối với các nhà phát triển.
- Nó có tính chất khai báo, nghĩa là nó không có stream điều khiển cho bạn biết trạng thái của một dự án.
- Mọi thứ đều tồn tại trên phạm vi global , khiến cho các xung đột về phong cách có thể xảy ra.
- Ngoài ra còn có vấn đề về tính cụ thể, xác định kiểu đang được áp dụng cho một bộ chọn cụ thể.
Những vấn đề này trở nên rõ ràng hơn nhiều khi một dự án phát triển và nhiều nhà phát triển hơn đang làm việc trong cùng một cơ sở mã. Nếu cấu trúc thích hợp không được đặt đúng vị trí, thì các thay đổi đối với bảng định kiểu có xu hướng trở nên khó đoán.
Để cấu trúc CSS đúng cách theo cách có thể giúp ta tránh những vấn đề này, Harry Roberts đã tạo ra "Inverse Triangle CSS (ITCSS)". Đó là một phương pháp có thể giúp ta cấu trúc CSS theo cách mà chúng hoạt động theo cách dễ đoán hơn. Nó được thiết kế để giúp các nhà phát triển làm việc trong các dự án quy mô lớn tổ chức và quản lý CSS của họ tốt hơn.
Theo Harry, ITCSS là một tập hợp các nguyên tắc và chỉ số mà các nhà phát triển nên group và sắp xếp thứ tự CSS của họ để giữ cho nó có thể mở rộng, ngắn gọn, logic và dễ quản lý. Đó là một phương pháp liên quan đến việc hình dung một dự án CSS như một hình tam giác lộn ngược nhiều lớp. Hình dạng phân cấp này đại diện cho một mô hình sẽ sắp xếp CSS theo các số liệu được xác định bởi thiết kế của ngôn ngữ với khả năng mở rộng và khả năng bảo trì tốt hơn so với những gì ta nhận được nếu ta viết CSS theo cách một người nghĩ.
ITCSS cũng linh hoạt và được dùng có hoặc không có bộ tiền xử lý. Nó tương thích với các phương pháp CSS khác như BEM, SMACSS hoặc OOCSS. Khi ta tiến hành phần hướng dẫn này, tôi sẽ chỉ cho bạn cách bạn có thể sử dụng ITCSS với BEM.
Các nguyên tắc cơ bản của ITCSS
Không có ID trong CSS
ID có tính cụ thể của bộ chọn cao và điều này có thể gây khó khăn cho việc overrides các kiểu. Để overrides một ID, ta thêm nhiều ID hơn hoặc sử dụng !important , có thể bắt đầu cuộc chiến về tính cụ thể trong bảng định kiểu của bạn. Việc overrides và mở rộng các kiểu không khó để làm cho CSS của bạn dễ bảo trì và dễ làm việc.
Mẫu giao diện user thành phần
Thành phần là một tập hợp các đánh dấu có thể sử dụng lại thường với một số logic và kiểu dáng. Các thành phần là khép kín và chúng đóng role như các khối xây dựng của các công nghệ giao diện user hiện đại: React, Angular, Vue, Ember, v.v. ITCSS ủng hộ kiến trúc UI được thành phần hóa trên các trang.
Kiến trúc dựa trên lớp
Kiến trúc CSS tốt là kiến trúc có thể tái sử dụng và linh hoạt. ITCSS ủng hộ việc sử dụng các lớp vì chúng được dùng nhiều lần trên cùng một trang và nhiều lớp có thể được đặt trong một phần tử cụ thể. Các lớp học cũng giúp HTML dễ đọc hơn.
Các chỉ số chính của ITCSS
ITCSS sắp xếp dự án của bạn bằng cách sử dụng ba số liệu chính.
Kiểu chung đến Kiểu rõ ràng
Bắt đầu với các bộ chọn chung chung, cấp cao và sâu rộng, sau đó dần dần tiến tới các bộ chọn rõ ràng và cụ thể hơn. Bạn có thể bắt đầu với các luật đặt lại trình duyệt, sau đó tiếp tục đến các bộ chọn phần tử và chuyển sang các luật rõ ràng như btn-primary .
Độ đặc hiệu thấp đến Độ đặc hiệu cao
Mọi luật CSS đều có trọng số đặc trưng, nghĩa là nó có thể quan trọng hơn hoặc ít hơn các luật khác hoặc quan trọng như nhau. Trọng số này xác định thuộc tính nào sẽ được áp dụng cho một phần tử khi có các luật xung đột. Giữ các luật ít cụ thể hơn ở trên cùng và các luật cụ thể cao dưới chúng đảm bảo phong cách của bạn phân tầng đúng cách để tránh xung đột và chiến tranh về tính cụ thể.
Vươn xa để bản địa hóa
Khi bắt đầu một dự án, các luật CSS ảnh hưởng rất nhiều đến DOM, nhưng khi ta tiến hành dự án, các luật ảnh hưởng ít hơn đến DOM và trở nên cụ thể hơn đối với các thành phần. Ta có thể bắt đầu bằng cách xóa sạch các margins và phần paddings khỏi mọi thứ. Tiếp theo, ta có thể tạo kiểu cho mọi loại phần tử, sau đó thu hẹp nó thành mọi loại phần tử với một lớp nhất định được áp dụng cho nó, v.v. Chính sự thu hẹp dần tầm tay này đã cho ta hình dạng tam giác.
Những lợi ích
Việc tuân theo ba chỉ số chính sau đây có rất nhiều lợi ích, phải kể đến một số lợi ích:
Phong cách global và sâu rộng được chia sẻ hiệu quả và hiệu quả hơn.
Khả năng xảy ra các cuộc chiến về tính cụ thể được giảm bớt vì CSS được viết theo thứ tự hợp lý và tăng dần về tính cụ thể.
CSS trở nên dễ mở rộng hơn và tránh được các kiểu thừa dẫn đến kích thước file nhỏ hơn và độ trễ.
Ta dành rất ít thời gian để hoàn tác mọi thứ vì dòng thác và tính cụ thể của ta đều hướng về cùng một hướng
Lớp ITCSS
Chia CSS của ta thành các lớp giúp ta bám sát các chỉ số đã đề cập ở trên. Mỗi lớp được thêm vào một vị trí phù hợp với các chỉ số. Mỗi lớp thường là một tiến trình hợp lý của lớp trước đó. Khi ta tiến bộ qua các lớp, tính rõ ràng và cụ thể tăng lên và phạm vi tiếp cận của các bộ chọn bị thu hẹp.
Điều này nghĩa là CSS trở nên dễ mở rộng quy mô hơn vì ta đang viết nó theo thứ tự chỉ thêm vào những gì đã được viết trước đó. Điều đó cũng nghĩa là mọi thứ đều có vị trí có thể dự đoán được của riêng nó để sống, điều này giúp việc tìm kiếm và thêm kiểu dễ dàng hơn.
ITCSS có bảy lớp mà ta sẽ xem xét kỹ hơn ở đây:
Cài đặt
Đây là điểm bắt đầu khi sử dụng bộ tiền xử lý CSS. Nó chứa các biến toàn cục có thể được truy cập từ mọi nơi trong dự án CSS của bạn. Ví dụ về cài đặt chung là kích thước phông chữ và định nghĩa màu sắc.
Công cụ
Điều này chứa các chức năng và mixin chung và nó xuất hiện sau cài đặt vì các mixin và chức năng có thể cần quyền truy cập vào cài đặt chung.Lớp này là lớp thứ hai nếu bạn đang sử dụng bộ tiền xử lý. Ví dụ như mixins font-size px-to-rem mixins, v.v. Điều quan trọng là tránh viết các kiểu thực tế trong hai lớp đầu tiên.
Chung
Đây là điểm mà CSS thực sự được viết và nó cũng là điểm bắt đầu nếu bạn không sử dụng bộ tiền xử lý. Nó chứa các kiểu như role đặt lại CSS, luật định kích thước hộp chung và luật chuẩn hóa CSS. Các kiểu ở đây ảnh hưởng nhiều đến DOM.
Thành phần
Lớp này chứa các kiểu bộ chọn phần tử. Nó chứa các kiểu dáng cho các phần tử HTML trần và không phân lớp. Các kiểu cho form , heading , img , links và các phần tử table cũng có ở đây. Các kiểu ở đây vẫn có độ đặc hiệu rất thấp nhưng ảnh hưởng ít hơn một chút đến DOM.
Các đối tượng
Đây là lớp đầu tiên có bộ chọn dựa trên lớp. Nó chứa các kiểu dáng cho các đối tượng phi mỹ phẩm như container , shell bọc và hệ thống bố cục. Lớp này ảnh hưởng đến DOM ít hơn so với lớp cuối cùng, có độ cụ thể cao hơn và rõ ràng hơn một chút vì hiện tại ta đang nhắm đến các phần cụ thể của DOM bằng các lớp.
Các thành phần
Lớp này giữ phong cách cho từng thành phần trong dự án của bạn. Nó rõ ràng hơn so với lớp trước vì ta hiện đang tạo kiểu cho các phần tử giao diện user hiển thị. Trong các khuôn khổ dựa trên thành phần như Angular, Vue hoặc React, đây là lớp mà bạn nhập kiểu dáng của bạn cho từng thành phần nếu bạn không bao gồm chúng trực tiếp trong thành phần của bạn .
Trumps
Lớp này đánh bại các lớp khác. Đây là nơi mà các kiểu tiện ích và trợ giúp được xác định. Nó có tính đặc hiệu nặng, có thể overrides các kiểu trước đó và là đỉnh m giác. Hầu hết các kiểu ở đây đều chứa cờ !important Important.
Kết quả
Khi tất cả các lớp được kết hợp với nhau, nó có thể trông như thế này.
// main.scss @import "settings.fontsize"; @import "settings.colors"; @import "tools.functions"; @import "tools.mixins"; @import "generic.reset"; @import "generic.normalize"; @import "elements.forms"; @import "elements.table"; @import "objects.contianer"; @import "objects.grid"; @import "components.site-nav"; @import "components.buttons"; @import "components.carousel"; @import "trumps.clearfix"; @import "trumps.utilities"; Sử dụng BEM với ITCSS
Công cụ sửa đổi phần tử khối (BEM) là một phương pháp để đặt tên cho các kiểu CSS. Theo Getbem , BEM là một quy ước đặt tên rất hữu ích, mạnh mẽ và đơn giản, giúp mã giao diện user của bạn dễ đọc và dễ hiểu, dễ làm việc hơn, dễ mở rộng, mạnh mẽ và rõ ràng, đồng thời nghiêm ngặt hơn rất nhiều.
BEM đặc biệt hữu ích cho lớp thứ sáu và thứ bảy của ITCSS nơi các bộ chọn dựa trên lớp được sử dụng nhiều. Sau BEM sẽ đảm bảo các lớp được đặt tên đúng để dễ đọc hơn.
Làm gương cho Phương pháp BEM
B (Khối)
Một khối là một nút cấp cao nhất, mức trừu tượng cao nhất của một thành phần. Nó là một thực thể hoặc một thành phần độc lập, trên một trang web.
Thí dụ:
.btn { rules } E (Phần tử)
Các phần tử là con của một khối. Chúng không có ý nghĩa độc lập và được gắn với một khối về mặt ngữ nghĩa. Các phần tử được bắt đầu bằng tên khối của chúng và một dấu gạch dưới kép.
Thí dụ:
.btn__text { rules } .btn__icon { rules } M (Bổ ngữ)
Các bổ ngữ được sử dụng để thay đổi sự xuất hiện của một khối hoặc một phần tử. Chúng cung cấp cho ta cách tạo các biến thể của các luật khối và phần tử.
.btn--lg { rules } .btn__text--light { rules } .btn__icon--right { rules } Kết luận
Khi có nhu cầu thay đổi trong cơ sở mã của bạn, bạn không muốn mất thời gian overrides các kiểu và chiến đấu với các cuộc chiến về tính cụ thể. Kiến trúc tam giác ngược đảm bảo không có chiến tranh bằng cách giúp bạn hình dung trạng thái của toàn bộ cơ sở mã của bạn bằng các thuật ngữ đơn giản.
Việc tuân theo các nguyên tắc của nó giúp tạo ra một hệ thống có thể tiếp cận, dự đoán được, có thể đoán được, dựa trên luật , có xu hướng kích thước file nhỏ hơn và hướng tới khả năng mở rộng và tăng trưởng.
Nếu bạn đang làm việc trên một dự án front-end sử dụng nhiều CSS, tôi khuyên bạn nên sử dụng ITCSS với BEM để làm cho mã của bạn dễ đọc và dễ hiểu hơn. Điều này sẽ không chỉ đảm bảo duy trì tốt mã mà còn thúc đẩy sự đồng cảm đối với các nhà phát triển mới.
Các tin liên quan
Cách hiển thị CSS trên server ứng dụng React2019-12-12
Cách tạo Thư viện ảnh cuộn vô hạn với React và CSS Grid
2019-12-12
Cách tạo node tải xuống với các tương tác nhỏ với CSS, anime.js và segment.js
2019-12-12
Đặt, giãn cách và mật độ trong CSS Grid
2019-12-12
Hiểu tính cụ thể trong CSS
2019-09-03
CSS sẽ thay đổi Thuộc tính: Khi nào và Không sử dụng Nó
2019-08-26
Trình xử lý nhấp chuột chỉ dành cho CSS sử dụng: target Pseudo-Class (Không có JavaScript)
2019-08-22
Giới thiệu về Tailwind CSS
2019-08-13
Hiểu CSS Float
2019-06-07
Giới thiệu về Bulma CSS với React
2018-10-12
