Trong bài viết này, VietnamWorks inTECH sẽ tổng hợp những lỗi mà các dev thường mắc trong CSS, cùng tìm hiểu bên dưới để tránh ngay nhé!

1. Không sử dụng Shorthand

CSS Shorthand là một nhóm 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à viết tắt của 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 px thay vào đó hãy sử dụng phần trăm. 

Hãy theo dõi ví dụ bên dưới: khi sử class container với 1000px sẽ không đảm bảo độ chính xác, bởi vì các thiết bị màn hình sẽ có các kích thước khác nhau, nên trong trường hợp này nó sẽ chỉ cố định ở 1000px, tốt hơn hết bạn nên sử dụng 100%.

//Not correct way

.container{

width:1000px;

}

//correct way for responsive

.container{

width:100%;

}

3. Lặp lại cùng một đoạn code

Nếu bạn muốn chuyển thuộc tính sang các class khác thì hãy hạn chế lặp lại đoạn code, thay vào đó 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 cho phần tử, hãy sử dụng class khác và viết CSS cho class đó, việc này sẽ giảm trùng lặp các đoạn code với nhau.

//Not correct

.box1{

width:50%;

margin:20px;

}

.box2{

width:50%;

margin:20px;

}

//Correct

.box1,.box2{

width:50%;

margin:20px;

}

4. Không có font chữ dự phòng (No font fallback)

Phông chữ dự phòng (Font fallback) là một phông chữ được sử dụng khi phông chữ chính chưa được tải hoặc thiếu các ký tự cần thiết để hiển thị nội dung trang. 

Ví dụ: CSS bên dưới chỉ ra rằng nên sử dụng phông chữ Helvetica làm phông chữ dự phòng cho “Arial”.

   //Not good

      body{

     font-family:Helvetica;

      }

     //Good

     body{

       font-family:Helvetica, Arial,Sans-serif;

     }

5. Sử dụng tên màu (Color name)

Thay vì sử dụng tên màu thì bạn nên sử dụng mã Hex. Vì mã Hex cung cấp độ chính xác tốt hơn trong việc xác định màu sắc, đặc biệt là khi bạn muốn sử dụng các màu tùy chỉnh. Bên cạnh đó, chúng cũng cho phép bạn sử dụng các màu trong CSS3 và CSS4, trong khi tên màu chỉ hỗ trợ một số lượng giới hạn các màu.

//Not good

.example{

color:green;

}

//Good

.example{

color:#00ff00;

}

6. Phức tạp hóa 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 hóa bằng cách lồng các selector với nhau. Khi làm như thế bạn đang tạo ra các quy tắc CSS phức tạp hơn, vì chúng cần phải được áp dụng theo thứ tự chính xác. Điều này có thể dẫn đến việc mã CSS của bạn trở nên khó hiểu và khó bảo trì.

//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. 

//Better

.nav-links{

list-style-type:none;

}

7. Lỗi trong việc đặt giá trị Z-Index

Rất nhiều lập trình viên sử dụng giá trị z-index rất cao để đặt một phần tử phía trước. Và nó sẽ 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ử còn lại. Giá trị Z-Index bắt đầu tăng cao hơn rất nhiều và có thể dẫn đến việc các phần tử chồng lên nhau không đúng thứ tự, gây ra sự khó chịu cho người dùng.

.modal-container{

z-index:545;

}

.modal{

z-index:5345345;

}

Trong trường hợp này, bạn nên đặt các giá trị z-index vừa phải để có thể đảm bảo rằng các phần tử sẽ được xếp chồng lên nhau theo đúng thứ tự và mã CSS của bạn sẽ dễ hiểu hơn.

.modal-container{

z-index:1;

}

.modal{

z-index:2;

}

8. Khi nào nên sử dụng lớp và Id 

Nếu bạn muốn định dạng một phần tử cụ thể, hãy sử dụng ID. Nếu bạn muốn định dạng một nhóm các phần tử, hãy sử dụng lớp. 

Tuy nhiên, hãy cẩn thận khi sử dụng ID và lớp trong CSS. Sử dụng quá nhiều ID và lớp có thể làm cho mã CSS của bạn trở nên phức tạp và khó bảo trì. Hãy sử dụng ID và lớp chỉ khi cần thiết và hợp lý.

let name = document.getElementById('name').value;

console.log(name);

  1. ii) classes : classes can re-use, so better follow this way.

Paragrah

.classData{

margin:20px

}

9. Bỏ qua vấn đề tương thích giữa nhiều trình duyệt

Các trình duyệt khác nhau có thể diễn giải các quy tắc CSS khác nhau, dẫn đến giao diện trực quan không nhất quán trên các nền tảng. Kiểm tra mã CSS của bạn trên nhiều trình duyệt và cân nhắc sử dụng CSS prefixes hoặc prefixes dành riêng cho nhà cung cấp để tương thích với các phiên bản trình duyệt cũ hơn.

Lời kết

Tóm lại, việc tránh các lỗi phổ biến trong CSS (Cascading Style Sheets) là rất quan trọng để tạo các trang web với 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 mã 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.

VietnamWorks inTECH

TẠO TÀI KHOẢN MỚI: XEM FULL “1 TÁCH CODEFEE” - NHẬN SLOT TƯ VẤN CV TỪ CHUYÊN GIA - CƠ HỘI RINH VỀ VOUCHER 200K