Tìm hiểu về OOCSS

Object Oriented CSS là phương pháp viết CSS theo hướng đối tượng. Qua đó chúng ta sẽ tiết kiệm được nhiều thời gian hơn trong việc style, có thể tái sử dụng code, hạn chế việc lặp lại các đoạn code, dễ dàng nâng cấp và bảo trì hơn …

OOCSS là gì

Cũng giống như bao phương pháp coding hướng đối tượng khác, Object Oriented CSS là phương pháp viết CSS 1 cách nhanh chóng, có thể tái sử dụng code, hạn chế việc lặp lại các đoạn code, giúp chúng ta dễ dàng nâng cấp và bảo trì. Phương pháp này được Sullivan giới thiệu lần đầu tiên tại Web Directions North ở Denver.

Lợi ích khi dùng OOCSS

OOCSS thực hiện nguyên tắc DRY: Don’t Repeat Yourself. Nếu thực hiện đúng theo phương pháp OOCSS chúng ta sẽ hạn chế các đoạn code lặp lại ở mức tối đa. Bởi vậy nên:

+ Chúng ta sẽ giảm bớt được dung lượng của các file css và tốc độ load file của browser sẽ nhanh hơn.
+ Sẽ có 1 số lượng lớn các đoạn code CSS (cần thiết cho hầu hết các trang trong website của bạn) sẽ được sử dụng lại và được trình duyệt cache lại để giảm tải thời gian load cho các trang khác trên website của bạn.
+ Ở mức độ thấp hơn là trên 1 trang web, việc sử dụng lại các đoạn code sẽ giúp giảm tải thời gian tính toán cho “Rendering Engine” của trình duyệt.
+ Và cuối cùng là việc giúp cho các đoạn code CSS của bạn có tính quy mô, tổ chức hơn. Điều này được thể hiện rõ hơn trên các dự án lớn với nhiều trang web, file css và nhiều developer cùng làm với nhau. Việc suy nghĩ và viết CSS hướng đối tượng 1 cách thường xuyên sẽ cho bạn 1 tư duy tổ chức code tốt hơn. Nó giúp bạn dễ dàng tiếp cận lại với dự án cũ (để nâng cấp hoặc sửa lỗi) sau 1 thời gian không làm việc với nó.

=> Hãy viết CSS theo tư duy Object Oriented, bạn sẽ thấy làm css cũng thú vị như code ứng dụng vậy ^^.

Nguyên tắc của OOCSS

2 nguyên tắc chính của OOCSS
Tách biệt cấu trúc và giao diện (structure & skin)

Điều này có nghĩa là OOCSS xác định sẽ sử dụng lại những thuộc tính về giao diện như là: màu chữ, màu nền, đường viền, …. Từ đó có thể kết hợp với nhiều đối tượng khác nhau để tạo nên skin cho các thành phần trong website mà không phải viết lại code nhiều lần.
Việc tách rời cấu trúc và giao diện cũng có nghĩa là sử dụng các class để đặt tên cho các object và các thành phần của nó chứ không phải chỉ dựa vào ý nghĩa của các thẻ HTML. Ví dụ các đối tượng media được đặt tên class=”media”, và các thành phần của nó được đặt tên là class=”img” (với các thành phần image/video) và class=”bd” (với các thành phần là body/text).

Việc sử dụng class như thế này thay cho việc style trực tiếp lên thẻ (<img>, <span> … ) sẽ giúp cho HTML của chúng ta linh động hơn. Giả sử bạn có những thuộc tính dành cho thẻ img như là

Nếu sau này bạn có 1 thẻ div mà bạn cũng muốn nó có những thuộc tính giống như thẻ img kia thì khi đó bạn sẽ phải sửa lại CSS.
Vậy nên thay vì style trực tiếp cho thẻ img, chúng ta sẽ đựa các thuộc tính đó vào class .img. Khi muốn add style đó cho 1 thành phần nào đó ta chỉ cần thêm class .img cho chúng mà ko cần phải sửa lại CSS.

Tách biệt container và content:

Về cơ bản, điều này có nghĩa là: “Hạn chế việc sử dụng style theo kiểu phụ thuộc vào vị trí”. Ví dụ như

1 đối tượng thì không nên phụ thuộc vào vị trí đặt nó. Giả sử bạn đã style cho nó theo kiểu .myObject h2 {…} mà sau đó vì 1 lý do nào đó mà phải tái cấu trúc lại nó (thay đổi thành phần cha, hoặc thay đổi chính đối tượng đó), bạn sẽ phải sửa lại CSS như là:

hoặc là:

Do đó thay vì style cho 1 đối tượng theo kiểu .myObject h2 {…} thì chúng ta sẽ tạo ra 1 class và gán cho nó <h2 class=”category”>.
Điều này sẽ đảm bảo cho chúng ta rằng:

– Tất cả các thẻ <h2> mà không có class thì sẽ giống nhau
– Tất cả các thành phần có class=”category” sẽ giống nhau
– Và bạn không cần phải override lại style trong trường hợp bạn thực sự muốn .myObject h2 {…} trông giống với thẻ <h2> bình thường.

2 nguyên tắc chính của OOCSS đã hướng người lập trình viên áp dụng triệt để phong cách Object Oriented, đó là:

– Tái sử dụng code, hạn chế tối đa việc lặp lại code
– Dễ dàng hơn, nhanh hơn trong việc bảo trì và nâng cấp website

Cũng như phương pháp lập trình hướng đối tượng trong việc thiết kế chức năng, tạo app, … chúng ta cần phải phân tích giao diện website kỹ như phân tích chức năng của app vậy. Từ đó mới có thể bóc tách và xác định được style chính của website, các thành phần có style giống nhau để phân chia và tạo đối tượng cho hợp lý, hạn chế tối đa việc lặp lại code, … Vậy nên để có thể sử dụng thành thạo được OOCSS chúng ta cần phải thực hành rất nhiều để nắm bắt được nó, giảm bớt thời gian phân tích giao diện cho những dự án sau này.

Trên đây chỉ là 1 số kiến thức cơ bản, giới thiệu về OOCSS. Ngoài ra còn nhiều phần khác về Grid, Module, Skin trên wiki của OOCSS. Các bạn hãy đọc thêm để hiểu và nắm bắt nhanh hơn nhé.

Nguồn tham khảo: https://github.com/stubbornella/oocss/wiki/