Học viên: Phạm Thanh Huấn
Lớp: Web Frontend - React Js 29
Emai: HuanPT99@gmail.com
Link tham khảo: https://medium.com/@meghanathblogger/10-common-mistakes-in-css-ccc5eee1d686
10 lỗi sai thường gặp trong CSS
Cascading Style Sheet (CSS) là một trong những trang quan trọng nhất trong phát triển web, giúp các trang web trở nên rõ ràng và hấp dẫn hơn. Trong bài viết này sẽ giải thích về một số sai lầm mà những người mới bắt đầu với CSS có thể mắc phải khi viết các thuộc tính CSS và tạo kiểu code.
Dưới đây là những lỗi sai phổ biến mà hầu hết các developers web mắc phải, và cách xác định và tránh chúng có thể giúp bạn viết code tốt hơn và nhiều hơn nữa.
1. Sử dụng cách viết tắt (Use Shorthand)
CSS shorthand là một nhóm các thuộc tính CSS cho phép đặt giá trị của nhiều thuộc tính cùng một lúc. Các giá trị này được phân tách bằng dấu cách. Ví dụ, thuộc tính margin là shorthand cho các thuộc tính margin-top, margin-right, margin-left và margin-bottom.
//Not Using Shorthand
.example{
margin-top:10px;
margin-bottom:19px;
margin-left:10px;
margin-right:19px;
}
//Better way
.example{
margin:10px 19px;
}
2. Responsive design
Nếu trang web của bạn responsive, hãy tránh sử dụng đơn vị px mà hãy sử dụng phần trăm. Ví dụ dưới đây, class container với 1000px không chính xác vì các thiết bị màn hình khác nhau và trong trường hợp đó nó chỉ sẽ có kích thước cố định là 1000px. Thay vào đó, hãy sử dụng 100% để tốt hơn.
//Not correct way
.container{
width:1000px;
}
//correct way for responsive
.container{
width:100%;
}
3. Lặp lại cùng một mã (Repeating the Same Code)
Nếu bạn muốn chuyển đổi các thuộc tính sang class khác mà không muốn viết code mới, hãy sử dụng các class được phân tách bằng dấu phẩy (,).
Một điểm nữa là, nếu cần thêm thuộc tính bổ sung cho phần tử, hãy sử dụng class khác và viết CSS cho class đó. Điều này sẽ giảm mã trùng lặp.
//Not correct
.box1{
width:50%;
margin:20px;
}
.box2{
width:50%;
margin:20px;
}
//Correct
.box1,box2{
width:50%;
margin:20px;
}
5. Không có font chữ dự phòng (No font fallback)
Font chữ dự phòng (font fallback) là gì?
Một font dự phòng là một kiểu chữ được sử dụng khi kiểu chữ chính chưa được tải, hoặc thiếu có các glyph(ký tự) cần thiết để hiển thị nội dung trang. Ví dụ, CSS dưới đây cho biết rằng kiểu chữ Helvetica nên được sử dụng làm font dự phòng cho “Arial”.
//Not good
body{
font-family:Helvetica;
}
//Good
body{
font-family:Helvetica, Arial,Sans-serif;
}
Một số trình duyệt có thể không hỗ trợ một số kiểu chữ CSS, vì vậy chúng ta có thể sử dụng các font dự phòng để hỗ trợ các kiểu chữ tiếp theo thay vì mặc định.
6. Sử dụng tên màu (Using Color Names)
Cách tốt hơn nên sử dụng các mã màu hex thay vì tên màu:
```
//Not good
.example{
color:green;
}
```
```
//Good
.example{
color:#00ff00;
}
```
6 Làm phức tạp hóa Selectors (Complicating Selectors)
Khi bạn có thể sử dụng class trực tiếp cho một phần tử cụ thể, bạn không nên phức tạp bằng cách lồng nhau với các bộ chọn khác nhau.
```
//It is good some times, but better to don't go eith complicate
header .navigation ul.nav-links{
list-style-type:none;
}
```
Bạn chỉ cần sử dụng class để đơn giản hóa. Điều này cũng sẽ dễ đọc và dễ hiểu hơn.
```
//Better
.nav-links{
list-style-type:none;
}
```
7. Lỗi Z-Index (Z-Index mistakes)
Nhiều developers sử dụng giá trị z-index rất cao để đặt một phần tử ở phía trước.
Và điều này trở nên khó khăn khi bạn muốn đặt một phần tử khác phía trước các phần tử khác. Giá trị Z-Index bắt đầu tăng lên cao hơn rất nhiều.
```
.modal-container{
z-index:545;
}
.modal{
z-index:5345345;
}
```
Giải pháp là sử dụng các giá trị vừa phải, để không trở nên khó khăn trong tương lai.
```
.modal-container{
z-index:1;
}
.modal{
z-index:2;
}
```
8. Các tên mâu thuẫn (Inconsistency names)
Ý kiến của tôi dựa trên việc chuẩn bị nội dung trang web, class CSS hoặc tên id nên như vậy chỉ có điều này tốt hơn.
Lý do tôi đang nói như vậy nghĩa là, nếu chúng ta sử dụng như các developers khác có thể hiểu ngay lập tức, không cần tìm kiếm thêm.
```
<header class='header'></header>
.header{
font-size:2rem;
}
```
9. Khi nào nên sử dụng lớp và Id (When to use class and Id)
Khi chúng ta truy cập giá trị từ phần tử, nên sử dụng “id”. Khi chuẩn bị các thiết kế, chúng ta nên sử dụng class và id theo cách riêng biệt. Id là duy nhất, trong khi class có thể được sử dụng nhiều lần.
Id: Id là duy nhất nên truy cập dữ liệu dễ dàng. Nếu sử dụng class, chúng ta cần thêm chỉ số [0] vào phần tử đó.
<input id="name" type="text"/> let name = document.getElementById('name').value; console.log(name);Class: class có thể được sử dụng lại, vì vậy nên tuân thủ theo cách này.
<p class="classData">Paragrah</p> <div class="classData"></div> .classData{ margin:20px }
10. Bỏ qua tính tương thích trên nhiều trình duyệt (Ignoring Cross-Browser Compatibility)
Các trình duyệt khác nhau có thể hiểu các quy tắc CSS theo cách khác nhau, dẫn đến hiển thị hình ảnh không tương đồng trên các nền tảng khác nhau. Hãy kiểm tra code CSS của bạn trên nhiều trình duyệt và xem xét sử dụng prefixes CSS hoặc prefixes của nhà cung cấp để tương thích với các phiên bản trình duyệt cũ hơn.
Kết luận
Tóm lại, tránh những lỗi phổ biến trong CSS (Cascading Style Sheets) là rất quan trọng để tạo ra các trang web được thiết kế tốt và hiệu quả. CSS đóng một vai trò quan trọng trong việc kiểm soát cách trình bày và bố cục trực quan của nội dung web. Bằng cách tránh những lỗi này, bạn có thể đảm bảo code CSS của mình sạch sẽ, có thể bảo trì và tương thích trên các trình duyệt và thiết bị khác nhau.
Cảm ơn mọi người đã dành thời gian đọc bài dịch của mình!
Bình luận