ITCSS là gì ? Tổng quan về ITCSS dành cho người mới

ITCSS là gì ? Tổng quan về ITCSS dành cho người mới

Có nhiều phương pháp tuyệt vời để cấu trúc mã CSS, mỗi phương pháp hoạt động theo cách riêng. Trong số các phương pháp phổ biến như OOCSS và SMACSS, còn có một phương pháp ít được biết đến gọi là ITCSS (CSS tam giác ngược), do Harry Roberts tạo ra.

ITCSS không phải là một thư viện hay khung, mà là một phương pháp viết mã dễ mở rộng và dễ thao tác. Lợi ích của ITCSS nằm ở sự đơn giản của cấu trúc mã và kích thước tệp nhỏ hơn, giúp bạn hiểu sâu về kiến trúc CSS.

Tuy không phù hợp với tất cả mọi người, ITCSS mang đến 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. Bài viết này sẽ đi sâu vào khái niệm của ITCSS và cách áp dụng nó cho các dự án web.

ITCSS là gì?

Trong các phương pháp tổ chức CSS hiện đại, chúng ta thường thấy các khái niệm về mô đun hóa hoặc Đối tượng CSS. ITCSS là một phương pháp phân lớp thuộc tính CSS dựa trên mức độ cụ thể và tầm quan trọng của chúng. Phương pháp này ít được biết đến so với SMACSS và OOCSS, nhưng có thể kết hợp cùng với cả hai.

Vì ITCSS là phương pháp độc quyền, không có sách quy tắc chi tiết nào về việc sử dụng nó. Chỉ có một số nguyên tắc cơ bản theo ý của chúng tôi. Tác giả nói về các nguyên tắc này trong video sau.

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 xem ITCSS như là một kiến trúc CSS thay thế độc đáo để 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 web có thể được chia thành các tệp CSS/SCSS riêng biệt cho việc tái sử dụng. Rất dễ dàng để 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.
  • Không cần 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 linh hoạt của riêng bạn.

Hệ thống ITCSS

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:

Hình ảnh

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ể tái sử dụng.

Dưới đây là mô tả nhanh của 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 mã riêng của 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 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ỳ thành phần trang nào (thường được kết hợp với cấu trú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 trong tam giác ngược có thể được đ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, bạn sẽ không cần các lớp Cài đặt hoặc Công cụ.

Bạn có thể thoải mái diễn giải từng tiểu mục theo ý thích. Ví dụ, bạn có thể 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 ít hơn trong phần Thành phần.

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

Mặc dù Harry Roberts, người tạo ra ITCSS, quan tâm đến việc giữ các phương pháp 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 + ITCSS = BEMIT

Một trong những phương pháp đặt tên CSS phổ biến là BEM, viết tắt của Block-Element-Modifier và tuân theo một cú pháp đặ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: 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 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:

.form .form-theme-xmas .form-simple .form__input .form__submit .form__submit-disabled

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.

ITCSS nhận thấy ý nghĩa của BEM và mở rộng nó để 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. Tuy nhiên, có một số quan điểm khác về việc sử dụng các hậu tố bổ sung cho lớp CSS.

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. 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. Tuy nhiên, không có phương pháp nào đúng hay sai và mọi người có thể tự quyết định liệu họ muốn sử dụng BEMIT hay không.

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.

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 mình. ITCSS chỉ là một phương pháp khác có thể đóng góp cho việc cải tiến cấu trúc các trang web phức tạp.

Khó khăn đối với mọi người là học cách thực hiện ITCSS trong các dự án thực tế. Nếu bạn có hứng thú và muốn học, ITCSS có thể là một phần quan trọng của bộ công cụ của bạn. Mặc dù không có tài liệu chính thức, 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 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 (video trình bày 1 giờ)
  • ITCSS – Một cách thú vị để tổ chức các dự án quy mô lớn (css-tricks.com)

Đó là một số tài nguyên hữu ích để bạn bắt đầu. Hãy thử áp dụng ITCSS vào dự án của bạn và khám phá những lợi ích của việc sử dụng phương pháp này.

Related Posts

Một số mẹo giúp người mới bắt đầu dễ dàng hơn với thiết kế logo

Mỗi công ty, freelancer, hoặc chuyên nghiệp độc lập cần một logo. Khi bạn quyết định rằng đã đến lúc bắt đầu một công ty, câu hỏi…

Personas là gì ? Cách thiết kế tương tác để tạo Personas đơn giản nhất

Hãy cùng nhau làm một thí nghiệm tinh thần. Hãy tưởng tượng rằng bạn muốn thiết kế một sản phẩm hoặc một trang web cho một khách…

Trang web HTML5 giới thiệu 48 bản demo mới nhất 2024

HTML5 đã thay đổi cách chúng ta tưởng tượng về thiết kế web. Nếu bạn đang tìm hiểu về HTML5 và muốn biết những điều kỳ diệu…

Leave a Reply

Your email address will not be published. Required fields are marked *