Hướng dẫn viết CSS theo hướng đối tượng (OOCSS) dễ dàng và nhanh chóng với SASS. Bạn không phải mất thời gian dò lại code CSS của mình để đặt đối tượng.
Trong bài viết cách quản lý CSS tối ưu thì mình đã nhắc qua về cách viết CSS theo kỹ thuật OOCSS (CSS hướng đối tượng) nhằm giúp hạn chế khả năng trùng lặp CSS, cũng như dễ bảo dưỡng nếu sau này có nhu cầu sửa lại.
Thế nhưng, khi mới áp dụng OOCSS bạn sẽ gặp một khó khăn rất lớn đó là không thể biết phần nào được tái sử dụng lại để đưa nó vào một đối tượng chung. Thành ra rất mất thời gian trong việc lên kế hoạch viết đối tượng CSS.
Và trong bài này, Tự Học Lập Trình sẽ hướng dẫn đến các bạn một tính năng trong SASS đó là sử dụng quy tắc kế thừa (@extend) với vùng chọn %name để viết OOCSS mà không phải suy nghĩ nhiều.
OOCSS là gì?
OOCSS nghĩa là kỹ thuật gom nhóm nhiều phần tử trên website vào sử dụng chung một đoạn CSS nếu nó có các tính chất giống nhau. Sau đó, ở mỗi phần tử con, chúng ta có thể thêm các style riêng cho nó nếu cần tuỳ biến lại.
Ví dụ dưới đây là CSS không sử dụng OOCSS:
.box1{width:25%;background:red;height:150px;float:left;}.box2{width:25%;background:blue;height:150px;float:left;}
Theo đó, giữa .box1 và .box2 có các thuộc tính hoàn toàn giống nhau như width, height và float. Nên thay vì viết lại ở mỗi phần tử, chúng ta chỉ cần gom nó vào một class chung nào đó, ở các class riêng bạn chỉ cần thêm background cho nó.
Nhưng trước hết cần sửa HTML để sử dụng hai class.
[html]
<div class="box box1"></div>
<div class="box box2"></div>
[/html]
Và giờ chỉ cần viết CSS theo hướng OOCSS như sau:
.box{width:25%;height:150px;float:left;}.box1{background:red}.box2{background:blue}Lúc này nhìn nó có vẻ thông minh hơn và gọn gàng hơn rồi nhỉ!
Hoặc bạn cũng có thể viết thành kiểu này nếu không muốn sử dụng nhiều class.
.box1,.box2{width:25%;height:150px;float:left;}.box1{background:red}.box2{background:blue}
OOCSS dễ dàng hơn với SASS
Thay vì ngồi dò lại nhiều lần dự án của mình khi viết OOCSS hay tốn nhiều thời gian cho việc lên kế hoạch, thì bạn có thể làm mọi thứ dễ dàng hơn với SASS.
Lúc này, việc của bạn là khai báo các vùng chọn %name cho từng đối tượng trong một tập tin nào đó như _object.scss, sau đó import vào tập tin CSS chính của bạn rồi tiến hành kế thừa nó. Theo dạng sau:
%box{width:25%;height:150px;float:left;}.box1{background:red;@extend%box;}.box2{@extend%box;background:blue;}.box3{@extend%box;background:green;}.box4{@extend%box;background:black;}Và khi xuất CSS ra, bạn sẽ nhận được kết quả như sau:
.box1,.box2,.box3,.box4{width:25%;height:150px;float:left;}.box1{background:red;}.box2{background:blue;}.box3{background:green;}.box4{background:black;}Theo kết quả trên, chúng ta có thể thấy các class .box1, .box2, .box3 và .box4 đã được gom thành một nhóm để sử dụng chung một CSS khi sử dụng @extend.
Điều này cũng giống với việc bạn tạo một class tên box rồi dùng chung cho các phần tử, nhưng nếu chọn SASS thì nên ưu tiên cách này sẽ đem lại hiệu quả tốt hơn.
Ngoài ra, bạn cũng có thể xem thêm các ví dụ cũng như kết quả về cách sử dụng này tại đây!
