Giới thiệu về ITCSS dành cho nhà phát triển web

Có một số phương pháp tuyệt vời cho cấu trúc mã CSS, và tất cả đều hoạt động theo những cách khác nhau. Những phương thức phổ biến nhất là OOCSS và SMACSS, nhưng cũng có một phương pháp ít được biết đến hơn gọi là ITCSS (CSS tam giác ngược) được tạo bởi Harry Roberts.

Đó không phải là thư viện hay khung, mà là phương pháp viết mã đó là khả năng mở rộng và dễ dàng để thao tác. Lợi ích của ITCSS là từ tổ chức mã đơn giản đến kích thước tệp nhỏ hơn và hiểu biết nhiều hơn về kiến ​​trúc CSS.

ITCSS không dành cho tất cả mọi người, nhưng nó cung cấp một cách chuyên nghiệp để xem xét các bảng định kiểu một cách rõ ràng trong quá trình mã hóa. Hãy đi sâu vào các khái niệm đằng sau ITCSS và xem chúng có thể được áp dụng như thế nào cho các dự án web.

ITCSS là gì?

Các cách tổ chức CSS hiện đại thường quay trở lại mô đun hóa hoặc là Đối tượng CSS xây dựng ý tưởng trừu tượng.

Ý tưởng mới về CSS Tam giác ngược là một cách phân lớp các thuộc tính CSS dựa trên mức độ cụ thể và tầm quan trọng của họ. Đây là một phương pháp ít được biết đến so với SMACSS và OOCSS - mặc dù cả hai đều có thể được kết hợp với ITCSS.

Vì ITCSS là chủ yếu là độc quyền, không có cuốn sách quy tắc chi tiết tồn tại về việc sử dụng nó. Chỉ một thiết lập các nguyên tắc cụ thể là theo ý của chúng tôi. Tác giả nói về họ trong video dưới đây.

Theo mặc định, ITCSS sử dụng các nguyên tắc giống như OOCSS nhưng với sự tách biệt lớn hơn dựa trên tính đặc hiệu Vì vậy, nếu bạn đã quen thuộc với OOCSS, hãy coi đây là một sự độc đáo kiến trúc CSS thay thế thử.

Dưới đây là một số lợi ích lớn nhất của việc sử dụng ITCSS:

• Các đối tượng trang có thể được chia thành các tệp CSS / SCSS của riêng chúng cho tái sử dụng. Thật đơn giản để sao chép / dán và mở rộng mọi đối tượng vào các dự án khác.
• Độ sâu của độ đặc hiệu là tùy bạn.
• Có không đặt cấu trúc thư mục, và không yêu cầu sử dụng các công cụ tiền xử lý.
• Bạn có thể hợp nhất các khái niệm từ các phương pháp khác như mô-đun CSS để tạo quy trình công việc lai của riêng bạn.

Hệ thống ITCSS

Chúng ta hãy xem mô hình Tam giác ngược hoạt động như thế nào bằng hình minh họa sau từ bài đăng của Lubos Kmetko.

Một dòng chảy hướng từ đỉnh phẳng của tam giác ngược xuống đến đỉnh ở phía dưới tượng trưng cho một tăng tính đặc hiệu. Điều này tập trung vào tính đặc hiệu giúp dễ dàng sử dụng lại các lớp trên một trang web nhiều lần.

Mỗi phần của tam giác có thể được coi là một tệp hoặc nhóm tệp riêng biệt, mặc dù bạn không cần phải viết mã theo cách đó. Nó có ý nghĩa hơn đối với người dùng Sass / Ít hơn vì tính năng nhập. Chỉ cần nghĩ mỗi tiểu mục là một phương pháp cho tách và tổ chức mã CSS có thể sử dụng lại.

Hãy xem nhanh mỗi phần của tam giác ngược di chuyển từ trên xuống dưới.

• Cài đặt - Các biến và phương thức tiền xử lý (không có đầu ra CSS thực tế)
• Công cụ - Mixins và các chức năng (không có đầu ra CSS thực tế)
• Chung - Đặt lại CSS có thể bao gồm thiết lập lại của Eric Meyer, Normalize.css hoặc lô mã của riêng bạn
• Yếu tố - Bộ chọn phần tử HTML đơn không có lớp
• Các đối tượng - Các lớp cho cấu trúc trang thường theo phương pháp OOCSS
• Các thành phần - Các lớp thẩm mỹ để tạo kiểu cho bất kỳ & tất cả các thành phần trang (thường được kết hợp với cấu trúc của các lớp đối tượng)
• Trumps - Các kiểu cụ thể nhất để ghi đè bất cứ thứ gì khác trong tam giác

Mỗi lớp của tam giác ngược có thể là điều chỉnh cho phù hợp với nhu cầu của bạn. Vì vậy, nếu bạn không sử dụng bộ tiền xử lý CSS thì bạn sẽ không cần các lớp Cài đặt hoặc Công cụ.

Bạn nên thoải mái diễn giải từng tiểu mục khi bạn thấy phù hợp. Ví dụ, Jordan Koschei giải thích cách anh kết hợp cấu trúc và tính thẩm mỹ lại với nhau thành các lớp đối tượng, để lại rất ít trong phần Thành phần.

ITCSS có không có quy tắc khó và nhanh mà bạn phải tuân theo. Không có trình kiểm tra tuân thủ ITCSS và không ai sẽ hét vào mặt bạn vì đã thay đổi một chút mô hình này.

Mặc dù Harry Roberts, người tạo ra ITCSS đã quan tâm đến việc giữ các phương thức của mình độc quyền để sử dụng nội bộ, bạn có thể tìm thấy một ví dụ nguồn mở của ITCSS trong repo GitHub này. Nó được lưu trữ bởi tài khoản CSS Wizardry, trang web cá nhân của Harry Roberts.

BEM + IT = Đặt tên BEMIT

Một trong những chương trình đặt tên CSS phổ biến nhất là BEM. Đây là viết tắt của Block-Element-Modifier và tuân theo một cú pháp rất đặc biệt.

Mỗi phần tử trong BEM mô tả quy ước đặt tên cho các lớp CSS:

• Khối là các lớp cho các phần tử riêng lẻ có thể được nhân rộng và độc lập.
• Yếu tố luôn là một phần của một khối
• Công cụ sửa đổi luôn luôn sửa đổi một khối hoặc thành phần để thay đổi một chút diện mạo của nó (bật / tắt, hoạt động / không hoạt động, cố định, tĩnh, tô sáng / trung tính).

BEMIT là quy ước đặt tên được thông qua bởi ITCSS, mượn ý tưởng từ BEM trong khi triển khai ý tưởng mới với ITCSS.

Cú pháp BEM ra lệnh cho các quy tắc rất cụ thể. Dưới đây là một mẫu từ trang web BEM:

.biểu mẫu  .form - theme-xmas  .form - đơn giản  .form__input  .form__submit  .form__submit - bị vô hiệu hóa  

Các khối có tên không có phân tách hoặc tên được phân tách bằng một dấu gạch ngang hoặc một dấu gạch dưới. Các phần tử sử dụng hai dấu gạch dưới và chúng mô tả các phần tử bên trong phù hợp với khối cụ thể đó. Công cụ sửa đổi hoạt động theo cùng một cách nhưng sử dụng hai dấu gạch ngang để nhận dạng.

Harry đào sâu hơn về BEMIT trong bài đăng trên blog này. Mô tả của ông rất súc tích và nó cho thấy bản chất thực sự của ITCSS là chơi thân thiện với các phương pháp CSS khác.

Harry định nghĩa không gian tên cho các đối tượng xuất hiện như tiền tố cho mỗi tên lớp chính. Họ tan vỡ như o- cho các đối tượng, c- cho các thành phần, và bạn- cho các tiện ích (như Clearfix hoặc định tâm văn bản).

Dưới đây là một số mã mẫu đại diện quy ước đặt tên BEMIT điển hình.

  
Giáo dục 
 
 

Ông cũng khuyên nên sử dụng @ hậu tố cho các lớp dựa trên phong cách truyền thông. Nên .phương tiện truyền thông lớp có thể thay đổi thành .phương tiện truyền thông @ lg cho màn hình lớn, và .phương tiện truyền thông @ md cho màn hình cỡ trung.

Cá nhân, tôi nghĩ rằng các hậu tố bổ sung là quá phức tạp cho các dự án web cơ bản. Tôi nghĩ rằng hầu hết các nhà phát triển sẽ sử dụng các truy vấn phương tiện phổ biến và viết lại các lớp ở các điểm dừng khác nhau. Nhưng tôi không thể nói một trong hai phương pháp là đúng hay sai và bất kỳ ai cũng có thể tự quyết định xem họ có muốn sử dụng BEMIT hay không.

Tôi đặc biệt khuyên bạn nên đọc bài viết giới thiệu BEMIT này để tìm hiểu thêm về lý do tại sao ITCSS mở rộng BEM và cách bạn có thể muốn đặt tên cho các lớp CSS của mình.

ITCSS có thể được tóm tắt là một phương pháp tổ chức để viết CSS có thể tái sử dụng và có thể mở rộng. BEM là cú pháp đặt tên ưa thích và BEMIT mở rộng này để làm việc với các không gian tên cho mã cụ thể và dễ nhận biết hơn.

Có rất nhiều điều để tìm hiểu và nếu bạn chưa quen với CSS thì đây sẽ là một khái niệm khó phá vỡ. Nhưng nếu bạn sẵn sàng học hỏi, tôi đảm bảo bạn sẽ ngạc nhiên với bản chất mượt mà của mã ITCSS.

Kết thúc

Các nhà phát triển front-end luôn tìm cách tối ưu hóa quy trình làm việc của họ. ITCSS chỉ là một phương pháp khác có thể đóng góp cho một phương pháp cải tiến cấu trúc các trang web phức tạp.

Khó khăn là học cách nó hoạt động trong công việc dự án thực tế. Nếu bạn có hứng thú và muốn học thì ITCSS có thể là thứ đáng để thêm vào bộ công cụ của bạn. Mặc dù tôi không tìm thấy bất kỳ tài liệu chính thức nào, vẫn có rất nhiều tài nguyên trực tuyến để tìm hiểu về ITCSS.

• Quản lý các dự án web quy mô lớn với kiến ​​trúc CSS mới ITCSS (creativebloq.com)
• Quản lý dự án CSS với ITCSS - Bản trình bày (loadeck.com)
• Dự án CSS với ITCSS (trình bày video 1 giờ)
• ITCSS - Một cách thú vị để tổ chức các dự án quy mô lớn (css-tricks.com)

(Ảnh bìa qua loadeck.com)