Xỉa

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) Giúp hạn chế khả năng sao chép CSS, cũng như dễ dàng bảo dưỡng nếu sau này có nhu cầu

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 sinh 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 (

.box {

  width: 25%;

  height: 150px;

  float: left;

}
.box1 { background: red }

.box2 { background: blue }

5) với vùng chọn

.box {

  width: 25%;

  height: 150px;

  float: left;

}
.box1 { background: red }

.box2 { background: blue }

6 để 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 chút về kỹ thuật này. OOCSS có nghĩa là kỹ thuật gom nhóm nhiều phần tử trên trang web vào việc 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 kiểu riêng cho nó nếu cần 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;

}

As you see between. box1 and. box2 nó có các thuộc tính hoàn toàn giống nhau như

.box {

  width: 25%;

  height: 150px;

  float: left;

}
.box1 { background: red }

.box2 { background: blue }

7,

.box {

  width: 25%;

  height: 150px;

  float: left;

}
.box1 { background: red }

.box2 { background: blue }

8 và

.box {

  width: 25%;

  height: 150px;

  float: left;

}
.box1 { background: red }

.box2 { background: blue }

9. Nên thay vì viết lại ở mỗi phần tử, chúng ta có thể gộp nó vào một lớp chung nào đó rồi ở các lớp riêng bạn chỉ có thể cần thêm

.box {

  width: 25%;

  height: 150px;

  float: left;

}
.box1 { background: red }

.box2 { background: blue }

0 cho nó mà thôi

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

[html]
 
 
[/html]

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 lớp

.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 mã của mình để cắm nó.

OOCSS easy more than with SASS

Thay vì phải dò lại dự án của mình khi viết OOCSS, hay tốn quá nhiều thời gian cho công 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 bạn khai báo các vùng chọn

.box {

  width: 25%;

  height: 150px;

  float: left;

}
.box1 { background: red }

.box2 { background: blue }

6 cho từng đối tượng trong một tệp tin nào đó như

.box {

  width: 25%;

  height: 150px;

  float: left;

}
.box1 { background: red }

.box2 { background: blue }

2 là đã hết hạn, sau đó nhập vào tệp CSS chính của bạn rồi tiến hành kế thừa nó. This type

/* 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;

}

And when export CSS, it will look like this

.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 lớp. hộp1,. hộp2,. box3 và. box4 đã được nhóm lại để sử dụng chung một CSS khi sử dụng

.box {

  width: 25%;

  height: 150px;

  float: left;

}
.box1 { background: red }

.box2 { background: blue }

5. Điều này nó cũng giống như bạn tạo một hộp tên lớp 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

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

Chỉ như vậy thôi, rất đơn giản đúng không nào?

đưa ra 1 ví dụ để biết về những gì một đối tượng CSS hoạt động như thế nào và lợi ích của việc sử dụng nó

có 1 ví dụ đơn giản về việc sử dụng OOCSS như sau

.media {}
.media .img {}
.media .img img {}
.media .imgExt {}
.bd {}

như bạn có thể thấy, lớp

.byline {}
.byline__name {}
.byline__title {}
.byline__picture {}
.byline--expanded {}
.byline--expanded__bio {}

0 là một đối tượng, và mục đích là để cho rằng các đối tượng độc lập với môi trường xung quanh của nó để nó có thể được đặt ở bất cứ đâu trong trang web của bạn

SMACSS is what

SMACSS là viết tắt của “Scalable and Modular Architecture for CSS”, là hướng dẫn về cách phân tích thiết kế, có thể hiểu SMACSS là khả năng mở rộng và kiến ​​trúc mô-đun dành cho css

• Scalable đề cập đến khả năng mở rộng. Mã CSS cần được tổ chức theo cách nào đó để dễ dàng mở rộng về sau khi ứng dụng lớn dần lên
• Modular đề cập đến việc chia nhỏ mã theo từng khối nhỏ, có thể sử dụng lại

BEM là gì? . BEM là viết tắt của Block, Element, Modifier

Về cơ bản, mỗi lớp của BEM bắt đầu với một khối, bắt đầu bằng tên đối tượng. Ví dụ bắt đầu với lớp

.byline {}
.byline__name {}
.byline__title {}
.byline__picture {}
.byline--expanded {}
.byline--expanded__bio {}

1. Sau đó, đến thành phần con của khối đó, cuối cùng là đến phần tử, tách nó ra với hai dấu gạch dưới.

.byline {}
.byline__name {}
.byline__title {}
.byline__picture {}
.byline--expanded {}
.byline--expanded__bio {}

2. Cuối cùng, bạn có thể sửa đổi bất kỳ lớp nào (khối hoặc phần tử) bằng cách thêm một phần bổ sung, tách biệt bằng hai dấu gạch nối.

.byline {}
.byline__name {}
.byline__title {}
.byline__picture {}
.byline--expanded {}
.byline--expanded__bio {}

3

Ví dụ

________số 8

Đây là vd về OOCSS có đối tượng media được viết dưới cú pháp BEM

.box {

  width: 25%;

  height: 150px;

  float: left;

}
.box1 { background: red }

.box2 { background: blue }

3

LÀM SAO YÊU KÊT Bùa CẢ 3 PHƯƠNG PHÁP

Kể từ khi OOCSS là một phương pháp mã vạch tượng trưng, ​​BEM là một công cụ ứng dụng có thể của OOCSS, và SMACSS là một cơ cấu tổ chức tập tin OOCSS trung tâm, chúng kết hợp với nhau rất hay và độc đáo, đặc biệt là khi bạn sử dụng

Ví dụ

Phong cách. scss

Chứa lõi tập tin, được nhập bởi nhiều người

_căn cứ. scss

bao gồm normalize. css, và hầu hết các thiết lập cho các thành phần cơ bản như. html, nội dung, a, ul, li, v.v.

_cách trình bày. scss Tùy thuộc vào độ phức tạp của trang web, trong tệp này sẽ đặt các lưới tệp, phản hồi, trình bao bọc, v.v.

_mô-đun. scss Bao gồm các định nghĩa cho các mô-đun hoặc các đối tượng. Mục đích là cho nhiều mã ở đây khả thi, làm cho nó linh hoạt và tái sử dụng. Tập tin này sẽ chỉ là một danh sách các mô-đun được định nghĩa

_khác. scss

Các tên cho phần này là khác nhau, nhưng thực chất đây là tất cả các mã không phù hợp trong _base, _layout hoặc _modules. những đoạn code ko tạo thành module, vv

Cách sử dụng BEM trong SASS

Trong quá khứ, rất nhiều lợi ích của việc sử dụng Sass đã bị mất khi bạn chuyển sang BEM

Ví dụ

.box {

  width: 25%;

  height: 150px;

  float: left;

}
.box1 { background: red }

.box2 { background: blue }

4

But with Sass 3. 3, has been got a Sass kết hợp BEM sử dụng & tiền tố của thành phần hoặc các yếu tố hoặc bổ sung