vn-VN

CSS Protips

Một bộ gồm những tips để giúp kỹ năng CSS trở nên pro

For other great lists check out @sindresorhus's curated list of awesome lists.

Table of Contents

• Protips
• Support
• Translations
• Contribution Guidelines

Protips

1. Dùng CSS Reset
2. Thừa kế box-sizing
3. Dùng unset thay vì đặt lại tất cả thuộc tính
4. Dùng :not() để Áp dụng / Không áp dụng các đường viền trên Điều hướng
5. Kiểm tra xem Phông chữ có được cài đặt cục bộ không
6. Thêm line-height cho body
7. Đặt :focus cho Form Elements
8. Mọi thứ ở giữa theo chiều dọc
9. Danh sách được phân tách bằng dấu phẩy
10. Chọn nhiều items với Negative nth-child
11. Dùng SVG cho Icons
12. Sử dụng "Lobotomized Owl" Selector
13. Dùng max-height cho thanh trượt CSS Sliders
14. Các ô trong bảng có chiều rộng bằng nhau
15. Get Rid of Margin Hacks With Flexbox
16. Sử dụng Attribute Selectors với các liên kết trống
17. Style "Default" Links
18. Consistent Vertical Rhythm
19. Intrinsic Ratio Boxes
20. Hình ảnh bị vỡ
21. Dùng rem cho toàn cục; dùng em cho cục bộ
22. Ẩn các video tự động phát không bị tắt tiếng
23. Dùng :root cho Flexible Type
24. Để font-size trong Form Elements để có một trải nghiệm mobile tốt hơn
25. Dùng Pointer Events để kiểm soát mouse control
26. Đặt display: none trên ngắt dòng được sử dụng làm khoảng cách

Dùng CSS Reset

Css resets giúp thực thi tính nhất quán về kiểu dáng trên các trình duyệt khác nhau với một phương tiện chặn rõ ràng cho các yếu tố tạo kiểu.Bạn có thể sử dụng thư viện CSS Reset như Normalize,hoặc bạn có thể sử dụng phương pháp đặt lại đơn giản hơn:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Bây giờ các phần tử sẽ bị loại bỏ magins và padding, và box-sizing cho phép bạn quản lý bố cục bằng CSS box model.

Demo

Note: Nếu bạn làm theo Inherit box-sizing mẹo dưới đây, bạn có thể chọn không bao gồm box-sizing thuộc tính trong CSS reset của bạn.

^{back to table of contents}

Thừa kế box-sizing

box-sizing được thừa kế từ html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Điều này giúp bạn dễ dàng thay đổi box-sizing hơn trong các plugin hoặc các thành phần khác thúc đẩy hành vi khác.

Demo

^{back to table of contents}

Dùng unset thay vì đặt lại tất cả thuộc tính

Khi đặt lại thuộc tính của một phần tử, không cần thiết phải đặt lại từng thuộc tính riêng lẻ:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

Bạn có thể chỉ định tất cả các thuộc tính của một phần tử bằng cách sử dụng tất cả các viết tắt. Đặt giá trị thành không đặt sẽ thay đổi thuộc tính của phần tử thành giá trị ban đầu của chúng:

button {
  all: unset;
}

Note: all thì không được hỗ trợ trên IE11 và hiện đang được xem xét hỗ trợ trong Edge. unset thì cũng vậy.

^{back to table of contents}

Dùng :not() để Áp dụng / Không áp dụng các đường viền trên Điều hướng

Thay vì đặt trên border...

/* add border */
.nav li {
  border-right: 1px solid #666;
}

...và sau đó lấy nó ra khỏi phần tử cuối cùng...

/* remove border */
.nav li:last-child {
  border-right: none;
}

...dùng :not() pseudo-class để chỉ áp dụng cho các phần tử bạn muốn:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Ở đây, CSS selector được đọc như một con người sẽ mô tả nó.

Demo

^{back to table of contents}