- vừa được xem lúc

Một số thói quen "xấu" nên tránh khi sử dụng CSS

0 0 3

Người đăng: Chu Thị Thơm

Theo Viblo Asia

1. Set margin/padding và reset chúng

Ta rất hay thấy mọi người set margin, padding cho tất cả các elements rồi lại reset chúng cho thằng đầu tiên hoặc cuối cùng. Tại sao phải sử dụng 2 lần set trong khi chúng ta có thể dễ dàng thực hiện nó cùng một lúc.

Sử dụng một trong những cách đơn giản, ngắn hơn như:

  • nth-child hoặc nth-of-type selectors
  • :not() pseudo-class
  • + : bộ tổ hợp anh/chị/em liền kề

Bad

.item { margin-right: 1.6rem;
} .item:last-child { margin-right: 0;
}

Better

.item:not(:last-child) { margin-right: 1.6rem;
} /* hoặc */ .item:nth-child(n+2) { margin-left: 1.6rem;
} /* hoặc */ .item + .item { margin-left: 1.6rem;
}

2. display: block cho các phần tử có position: absolute/fixed

Bạn có biết rằng mặc định display: block đã được thêm cho các phần tử có position: absolute hay position: fixed ?

Ngoài ra, nếu sử dụng các giá trị inline-*, chúng sẽ thay đổi như sau:

  • inline hoặc inline-block --> block
  • inline-flex --> flex
  • inline-grid --> grid
  • inline-table --> table

Vì vậy, chỉ cần viết position: absolute hay position: fixed và chỉ thêm display khi cần giá trị là flex/grid.

Bad

.button::before { content: ""; position: absolute; display: block;
} /* hoặc */ .button::before { content: ""; position: fixed; display: block;
}

Better

.button::before { content: ""; position: absolute;
} /* hoặc */ .button::before { content: ""; position: fixed;
}

3. transform: translate(-50%, -50%) để căn giữa

Vấn đề căn giữa cho một phần tử có height tùy ý theo 2 trục đã từng gây ra rất nhiều rắc rối cho đến tận năm 2015, và các giải pháp của nó đều gặp phải một số khó khăn.

Đặc biệt, có một giải pháp là sử dụng kết hợp position: absolutetransform. Kỹ thuật này gây ra vấn đề text mờ trên các trình duyệt nền tảng Chromium. Nhưng sau sự ra đời của flexbox, kỹ thuật trên đã không còn phù hợp nữa. Nó không thể giải quyết vấn đề text mờ, cộng thêm việc buộc phải sử dụng tới 5 thuộc tính.

Chúng ta chỉ cần sử dụng margin: auto bên trong container flex và trình duyệt sẽ căn giữa các phần tử để giải quyết ngắn gọn vấn đề trên.

Bad

.parent { position: relative;
} .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

Better

.parent { display: flex;
} .child { margin: auto;
}

4. width: 100% cho các phần tử block

Chúng ta thường sử dụng flexbox để tạo grid multi-column dần chuyển thành một column duy nhất bằng cách sử dụng width: 100%. Tại sao lại phải làm vậy?

Các phần tử grid là các phần tử block có thể thực hiện điều này một cách mặc định mà không cần sử dụng các thuộc tính bổ sung. Do đó, không cần dùng width: 100%, nhưng cần viết media query để flexbox chỉ được sử dụng để tạo grid multi-column,

Bad

<div class="parent"> <div class="child">Item 1</div> <div class="child">Item 2</div> <div class="child">Item 3</div> <div class="child">Item 4</div>
</div> <!-- css -->
.parent { display: flex; flex-wrap: wrap;
} .child { width: 100%;
} @media (min-width: 1024px) { .child { width: 25%; }
}

Better

<div class="parent"> <div class="child">Item 1</div> <div class="child">Item 2</div> <div class="child">Item 3</div> <div class="child">Item 4</div>
</div> <!-- css -->
@media (min-width: 1024px) { .parent { display: flex; flex-wrap: wrap; } .child { width: 25%; }
} 

5. display: block cho flex items

Khi dùng flexbox, điều quan trọng cần nhớ là khi tạo container flex (display: flex) thì tất cả các items con (các flex items) đều sẽ bị block.

Điều này có nghĩa là các phần tử chỉ có thể có display: block. Do đó, nếu đặt inline hay inline-block, nó sẽ chuyển thành block, tương tự với inline-flex --> flex, inline-grid --> gridinline-table --> table.

Vì vậy, không thêm display: block cho các flex items. Trình duyệt sẽ làm điều đó.

Bad

.parent { display: flex;
} .child { display: block;
}

Better

.parent { display: flex;
}

Nguồn

Bình luận

Bài viết tương tự

- vừa được xem lúc

[Front-end Developer] Một vài mẹo để viết code CSS chuyên nghiệp hơn

Để tiếp tục với phần 1 của bài viết [Front-end Developer] Viết CSS sao cho chuẩn không cần chỉnh thì ở bài viết này mình xin chia sẻ một vài bí kíp nữa để chúng ta có thể nâng cao trình độ CSS của bản thân lên một tầm mới =)). 1.

0 0 25

- vừa được xem lúc

[Front-end Developer] Viết CSS sao cho chuẩn không cần chỉnh

Đôi nhời phát biểu. Trong quá trình phát triển các sản phẩm phần mềm, mình thấy việc chú ý đến code conventions(các nguyên tắc chung khi lập trình làm cho code dễ hiểu, dễ đọc và dễ bảo trì) khá là quan trọng.

0 0 15

- vừa được xem lúc

Những lý do khiến mình thích CSS custom properties hơn SASS variables?

Halo các bạn,. Lại là mình với một bài post liên quan tới chủ đề Front-end đây Mình còn nhớ hồi mình bắt đầu tìm hiểu và bị SASS lôi cuốn, mình đã nghĩ rằng mình sẽ chẳng bao giờ cần dùng đụng tới CSS

0 0 75

- vừa được xem lúc

Build Blog Post Card with Animation Using HTML SCSS JavaScript

Build Blog Post Card with Animation Using HTML SCSS JavaScript. . In this video, we will make blog post card with animation using HTML, SCSS and JavaScript. .

0 0 22

- vừa được xem lúc

Giỏi nhanh CSS Flexbox

Giới thiệu. Chào toàn thể Anh Chị Em của cộng đồng Viblo .

0 0 38

- vừa được xem lúc

Cấu trúc thư mục với SASS

Khi một project phát triển và mở rộng, việc mô-đun hoá và cấu trúc là thiết yếu. Vì vậy việc tổ chức tệp tin và folder là việc cần thiết mặc dù không có cấu trúc nào "hoàn toàn chính xác" mà nó phụ th

0 0 62