Khái niệm cơ bản về CSS hướng đối tượng (OOCSS)
Frontend phát triển di chuyển nhanh chóng với nhiều kỹ thuật mới được thêm vào mỗi năm. Nó có thể là một cuộc đấu tranh cho các nhà phát triển để theo kịp với tất cả mọi thứ. Giữa Sass và PostCSS rất dễ bị lạc trong biển công cụ phát triển.
Một kỹ thuật mới hơn là CSS hướng đối tượng, còn được gọi tắt là OOCSS. Đây không phải là một công cụ, mà là một phương pháp viết CSS nhằm mục đích tạo CSS theo mô-đun và dựa trên đối tượng.
Trong bài đăng này, tôi muốn giới thiệu nguyên tắc cơ bản của OOCSS, và Làm thế nào những ý tưởng này có thể được áp dụng cho công việc web frontend. Kỹ thuật này có thể không bắt kịp với mọi nhà phát triển, nhưng đáng để hiểu các khái niệm mới để quyết định xem quy trình làm việc của bạn có được hưởng lợi từ nó không.
Điều gì làm cho CSS hướng đối tượng?
Lập trình hướng đối tượng (OOP) là một mô hình lập trình tập trung vào tạo các đối tượng tái sử dụng và thiết lập mối quan hệ giữa chúng, trái ngược với lập trình thủ tục tổ chức mã thành các thủ tục (thường trình, chương trình con hoặc hàm).
OOP đã được sử dụng rộng rãi trong cả hai JavaScript và ngôn ngữ phụ trợ trong vài năm gần đây, nhưng tổ chức CSS theo nguyên tắc của nó vẫn là một khái niệm mới.
Các “vật” trong OOCSS đề cập đến một Phần tử HTML hoặc bất cứ thứ gì liên quan đến nó (như các lớp CSS hoặc các phương thức JavaScript). Ví dụ: bạn có thể có một đối tượng tiện ích thanh bên có thể được sao chép cho các mục đích khác nhau (đăng ký bản tin, khối quảng cáo, bài đăng gần đây, v.v.). CSS có thể nhắm mục tiêu các đối tượng en-masse mà làm cho quy mô một làn gió.
Tóm tắt mục nhập GitHub của OOCSS, một đối tượng CSS có thể bao gồm bốn điều:
- (Các) nút HTML của DOM
- Khai báo CSS về kiểu dáng của các nút đó
- Các thành phần như hình nền
- Các hành vi, trình nghe hoặc phương thức JavaScript được liên kết với một đối tượng
Nói chung, CSS là hướng đối tượng khi xem xét các lớp học có thể sử dụng lại và có thể nhắm mục tiêu đến nhiều yếu tố trang.
Nhiều nhà phát triển sẽ nói OOCSS dễ chia sẻ với người khác và dễ dàng nhận hơn sau nhiều tháng (hoặc nhiều năm) phát triển không hoạt động. Điều này so sánh với các phương thức mô-đun khác như SMACSS có các quy tắc chặt chẽ hơn để phân loại các đối tượng trong CSS.
Trang FAQ của OOCSS có rất nhiều thông tin nếu bạn tò mò muốn tìm hiểu thêm. Và người sáng tạo Nicole Sullivan thường nói về OOCSS và cách nó liên kết với phát triển web hiện đại.
Cấu trúc riêng biệt từ Phong cách
Một phần lớn của OOCSS là viết mã phân tách cấu trúc trang (chiều rộng, chiều cao, lề, phần đệm) khỏi diện mạo (phông chữ, màu sắc, hình động). Điều này cho phép lột da tùy chỉnh được áp dụng cho nhiều yếu tố trang mà không ảnh hưởng đến cấu trúc.
Điều này cũng hữu ích để thiết kế các thành phần có thể di chuyển xung quanh bố trí một cách dễ dàng Ví dụ: “Bài viết gần đây” tiện ích trong thanh bên phải được di chuyển vào chân trang hoặc phía trên nội dung trong khi duy trì các kiểu tương tự.
Đây là một ví dụ về OOCSS cho một “Bài viết gần đây” tiện ích trong trường hợp này là đối tượng CSS của chúng tôi:
/ * Cấu trúc * / .side-widget width: 100%; phần đệm: 10px 5px; / * Skinning * / .recent-post font-family: Helvetica, Arial, sans-serif; màu: # 2b2b2b; cỡ chữ: 1,45em;
Thông báo rằng bố trí được quản lý với .phụ kiện lớp có thể được áp dụng cho nhiều phần tử thanh bên, trong khi xuất hiện được quản lý với .bài viết gần đây lớp cũng có thể được sử dụng để skin các vật dụng khác. Ví dụ, nếu .bài viết gần đây tiện ích đã được chuyển đến chân trang, nó có thể không có cùng vị trí, nhưng nó có thể có cùng giao diện.
Ngoài ra hãy xem ví dụ thanh bên này từ CodePen. Nó sử dụng một phân tách các lớp riêng biệt cho float và căn chỉnh văn bản sao cho nhân rộng sẽ không yêu cầu thêm mã CSS.
Container riêng biệt từ nội dung
Tách nội dung khỏi phần tử container của nó là một nguyên tắc quan trọng khác của OOCSS.
Nói một cách đơn giản hơn, điều này chỉ có nghĩa là bạn nên tránh sử dụng bộ chọn con bất cứ khi nào có thể. Khi tùy chỉnh bất kỳ thành phần trang duy nhất nào như liên kết neo, tiêu đề, chuỗi khối hoặc danh sách không theo thứ tự, bạn nên cung cấp cho chúng các lớp duy nhất thay vì bộ chọn hậu duệ.
Đây là một ví dụ đơn giản:
/ * OOCSS * / .sidebar / * nội dung thanh bên * / h2.sidebar-title / * kiểu phần tử h2 đặc biệt * / / * Non-OOCSS * / .sidebar / * cùng nội dung thanh bên * / .sidebar h2 / * thêm tính đặc hiệu hơn mức cần thiết * /
Mặc dù sử dụng định dạng mã thứ hai không phải là khủng khiếp, nhưng chúng tôi khuyên bạn nên tuân theo định dạng đầu tiên nếu bạn muốn viết sạch OOCSS.
Hướng dẫn phát triển
Thật khó để hiểu được các thông số kỹ thuật chính xác bởi vì các nhà phát triển liên tục tranh luận về mục đích của OOCSS. Nhưng đây là Một số gợi ý có thể giúp bạn viết mã OOCSS sạch hơn:
- Làm việc với các lớp thay vì ID để tạo kiểu.
- Cố gắng kiêng đặc thù lớp con cháu đa cấp trừ khi cần.
- Định nghĩa phong cách độc đáo với các lớp lặp lại (ví dụ: float, Clearfix, ngăn xếp phông chữ duy nhất).
- Mở rộng các yếu tố với các lớp mục tiêu thay vì các lớp cha.
- Sắp xếp biểu định kiểu của bạn thành các phần, xem xét thêm một mục lục.
Lưu ý rằng các nhà phát triển vẫn nên sử dụng ID để nhắm mục tiêu JavaScript, nhưng chúng không bắt buộc đối với CSS vì họ quá cụ thể. Nếu một đối tượng sử dụng ID để tạo kiểu CSS thì không bao giờ có thể sao chép vì ID là định danh duy nhất. Nếu bạn chỉ sử dụng các lớp để tạo kiểu thì kế thừa trở nên dễ dự đoán hơn nhiều.
Hơn nữa, các lớp có thể được kết nối với nhau cho các tính năng bổ sung. Một phần tử có thể có hơn 10 lớp được đính kèm. Mặc dù hơn 10 lớp trên một thành phần không phải là thứ tôi muốn giới thiệu, nhưng nó cho phép các nhà phát triển tích lũy một thư viện các kiểu có thể sử dụng lại cho các thành phần trang không giới hạn.
Tên lớp trong OOCSS có phần gây tranh cãi và không được đặt trong đá. Nhiều nhà phát triển thích giữ các lớp ngắn và đi đến điểm.
Trường hợp lạc đà cũng phổ biến, ví dụ .lỗi hộp thay vì .hộp lỗi. Nếu bạn nhìn vào cách đặt tên lớp trong tài liệu của OOCSS, bạn sẽ thấy trường hợp lạc đà là “chính thức” sự giới thiệu. Không có gì sai với dấu gạch ngang nhưng theo quy tắc, tốt nhất là tuân theo các nguyên tắc của OOCSS.
OOCSS + Sass
Hầu hết các nhà phát triển web đã yêu thích Sass và nó đã nhanh chóng vượt qua cộng đồng frontend. Nếu bạn chưa thử Sass, thì đáng để thử. Nó cho phép bạn viết mã với các biến, hàm, phương thức lồng và biên dịch như các hàm toán học.
Trong tay có thẩm quyền, Sass và OOCSS có thể là một trận đấu được thực hiện trên thiên đường. Bạn sẽ tìm thấy một bài viết tuyệt vời về điều này trên blog The Sass Way.
Chẳng hạn, sử dụng Sass @mở rộng lệnh bạn có thể áp dụng các thuộc tính của một lớp lên một lớp khác. Các thuộc tính không trùng lặp mà thay vào đó, hai lớp được kết hợp với bộ chọn dấu phẩy. Bằng cách này, bạn có thể cập nhật các thuộc tính CSS ở một vị trí.
Nếu bạn liên tục viết biểu định kiểu, điều này sẽ tiết kiệm giờ đánh máy và giúp đỡ tự động hóa quy trình OOCSS.
Cũng nhớ rằng bảo trì mã là một phần lớn của OOCSS. Bằng cách sử dụng Sass, công việc của bạn trở nên dễ dàng hơn với các biến, mixin và các công cụ linting nâng cao gắn liền với quy trình công việc.
Một thuộc tính quan trọng của mã OOCSS tuyệt vời là khả năng chia sẻ nó với bất cứ ai, ngay cả bản thân bạn vào một ngày sau đó, và có thể dễ dàng nhận nó.
Cân nhắc hiệu suất
OOCSS có nghĩa là hoạt động trơn tru và không có nhiều nhầm lẫn. Các nhà phát triển cố gắng hết sức không phải lặp đi lặp lại ở mỗi lượt, thực tế đó là tiền đề cho sự phát triển của DRY. Theo thời gian, kỹ thuật OOCSS có thể dẫn đến hàng trăm lớp CSS với các thuộc tính riêng lẻ được áp dụng hàng chục lần trong một tài liệu nhất định.
Vì OOCSS vẫn là một chủ đề mới, thật khó để tranh luận về chủ đề phình to. Nhiều tệp CSS cuối cùng có cấu trúc nhỏ, trong khi OOCSS cung cấp cấu trúc cứng nhắc và (lý tưởng nhất) ít phình to hơn. Mối quan tâm hiệu năng lớn nhất sẽ là trong HTML khi một số thành phần có thể tích lũy một số lớp khác nhau cho cấu trúc và thiết kế bố cục.
Bạn sẽ tìm thấy các cuộc thảo luận thú vị về chủ đề này trên các trang web như Stack Overflow và CSS-Tricks.
Đề nghị của tôi là cố gắng xây dựng một dự án mẫu, và xem nó diễn ra như thế nào. Nếu bạn yêu OOCSS, nó có thể thay đổi hoàn toàn cách bạn mã hóa trang web. Ngoài ra, nếu bạn ghét nó, bạn vẫn đang học một kỹ thuật mới và suy nghĩ chín chắn về cách thức vận hành. Đó là đôi bên cùng có lợi.
Nhận bận viết OOCSS
Cách tốt nhất để học bất cứ điều gì trong phát triển web là thực hành. Nếu bạn đã hiểu những điều cơ bản về CSS thì bạn đang đi đúng hướng!
Vì OOCSS không yêu cầu tiền xử lý, bạn có thể dùng thử với IDE trực tuyến, chẳng hạn như CodePen. Các dự án đơn giản là tốt nhất để bắt đầu và nâng cao kiến thức của bạn từ đó.
Hãy xem các tài nguyên này để tiếp tục nghiên cứu của bạn trong lĩnh vực phát triển của OOCSS.
- Trang web chính thức của OOCSS
- CSS hướng đối tượng: Cái gì, như thế nào và tại sao
- OOCSS + Sass = Cách tốt nhất để CSS
- Giới thiệu về CSS hướng đối tượng
