Triển khai OOCSS dễ dàng với SASS

Như trong bài viết cách quản lý CSS tối ưu thì mình đã nhắc qua về kỹ thuật 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 bản thân mình lúc mới áp dụng OOCSS cũng cảm thấy có một khó khăn rất lớn đó là mình 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, mình sẽ hướng dẫ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 cần suy nghĩ nhiều.

Nên xem trước: Hướng dẫn sử dụng SASS.

OOCSS là gì?

Trước khi hướng dẫn mình cũng xin nhắc lại một xíu về kỹ thuật này. 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;
}

Như bạn thấy giữa .box1 và .box2 nó 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 có thể gom nó vào một class chung nào đó rồi ở các class riêng bạn có thể chỉ cần thêm background cho nó mà thôi.

Trước tiên là ta phải sửa HTML để sử dụng hai class.

  <div class="box box1"></div>
  <div class="box box2"></div>

Rồi bây giờ chúng ta sẽ cần viết CSS theo hướng OOCSS như sau:

.box {
  width: 25%;
  height: 150px;
  float: left;
}
.box1 { background: red }
.box2 { background: blue }

Nhìn nó thông minh hơn và gọn gàng hơn phải không nào?

Hoặc bạn cũng có thể viết thành kiểu này nếu bạn không muốn sử dụng nhiều class.

.box1, .box2 {
  width: 25%;
  height: 150px;
  float: left;
}
.box1 { background: red }
.box2 { background: blue }

Nhưng như mình nói ở trên rồi đó, làm thế nào mà bạn có thể tưởng tượng ra trong dự án của bạn có bao nhiêu phần tử có cùng thuộc tính, hay mỗi lần viết CSS là bạn phải dò lại code của mình để nhét nó vào vị trí thích hợp? Đúng là ác mộng mà!

OOCSS dễ dàng hơn với SASS

Thay vì phải dò đi dò lại dự án của mình khi viết OOCSS, hay tốn quá 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. Chỉ cần các bạn 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 chẳng hạn, sau đó import vào tập tin CSS chính của bạn rồi tiến hành kế thừa nó. Kiểu thế này:

/* Khai báo đối tượng */
%box {
  width: 25%;
  height: 150px;
  float: left;
}
/* Sử dụng đối tượng %box */
.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 nó sẽ trông như thế này:

.box1, .box2, .box3, .box4 {
  width: 25%;
  height: 150px;
  float: left;
}
.box1 {
  background: red;
}
.box2 {
  background: blue;
}
.box3 {
  background: green;
}
.box4 {
  background: black;
}

Như bạn thấy, các class .box1, .box2, .box3 và .box4 đã được gom nhóm lại để sử dụng chung một CSS khi sử dụng @extend. Điều này nó cũng giống như 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 dùng SASS thì nên dùng thế này sẽ tốt hơn rất nhiều.

Xem ví dụ và kết quả

Chỉ vậy thôi, rất đơn giản đúng không nào? Và như mình có nói ở trên, bạn nên đưa các đoạn khai báo vùng chọn %name vào một tập tin riêng để dễ quản lý về sau nhé.

Chúc các bạn thành công.