CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để định dạng và trang trí các trang web. CSS cung cấp các thuộc tính để thiết lập màu sắc, kích thước, khoảng cách, vị trí và hình dạng của các phần tử trên trang web, giúp cho trang web trở nên đẹp mắt và dễ đọc hơn.
Sau đây hãy cùng Thế giới JS tìm hiểu một số lưu ý và sai lầm khi làm việc với CSS sau đây.
1.Một số lưu ý khi lập trình với CSS
- Sử dụng kỹ thuật “cascading”: CSS cho phép chúng ta kế thừa các thuộc tính từ phần tử cha, tạo ra một kết quả động cho các trang web. Vì vậy, hãy sử dụng kỹ thuật “cascading” để áp dụng các thuộc tính đồng thời cho nhiều phần tử trên trang web của bạn.
- Sử dụng file CSS riêng: Hãy tạo một file CSS riêng cho trang web của bạn, và liên kết đến file đó từ các trang HTML của bạn. Điều này giúp cho mã của bạn trở nên dễ bảo trì hơn, vì bạn có thể chỉnh sửa các thuộc tính CSS một cách dễ dàng mà không ảnh hưởng đến mã HTML của bạn.
- Đặt tên class và id hợp lý: Hãy đặt tên class và id cho các phần tử trên trang web của bạn một cách hợp lý, sao cho dễ hiểu và dễ bảo trì. Hãy tránh sử dụng các tên class và id quá dài và phức tạp, và hãy đảm bảo rằng các tên này phù hợp với mục đích của chúng.
- Không sử dụng quá nhiều inline CSS: Hãy tránh sử dụng quá nhiều inline CSS trong mã HTML của bạn. Thay vào đó, hãy sử dụng các file CSS riêng để định dạng các phần tử trên trang web của bạn. Điều này giúp cho mã của bạn trở nên dễ bảo trì hơn, và giảm thiểu khả năng xảy ra lỗi.
- Kiểm tra tính tương thích trên các trình duyệt khác nhau: Hãy đảm bảo rằng các thuộc tính CSS của bạn hoạt động tốt trên các trình duyệt khác nhau. Sử dụng các tiền tố và hậu tố trình duyệt khi cần thiết để đảm bảo tính tương thích của mã CSS của bạn trên các trình duyệt
2.Một số lỗi cơ bản khi lập trình với CSS cần tránh
- Quá nhiều !important: Sử dụng !important quá nhiều có thể khiến mã CSS của bạn trở nên rối rắm và khó hiểu. Hãy sử dụng nó chỉ khi thật sự cần thiết.
- Không đặt tên class và id một cách hợp lý: Đặt tên class và id quá dài, không rõ ràng hoặc không phù hợp có thể làm cho mã CSS khó hiểu và khó bảo trì. Hãy đặt tên class và id ngắn gọn, dễ hiểu và phù hợp với mục đích của chúng.
- Lỗi chính tả: Lỗi chính tả trong các lệnh CSS có thể gây ra lỗi khi tải trang web. Hãy đảm bảo rằng bạn đánh chính xác các thuộc tính và giá trị CSS.
- Quên thêm các tiền tố và hậu tố trình duyệt: Các tiền tố và hậu tố trình duyệt là rất quan trọng để đảm bảo mã CSS của bạn hoạt động tốt trên các trình duyệt khác nhau. Hãy sử dụng các tiền tố và hậu tố này khi cần thiết để đảm bảo tính tương thích của mã CSS của bạn trên các trình duyệt khác nhau.
- Sử dụng px thay vì em hoặc rem: Sử dụng đơn vị px thay vì em hoặc rem có thể khiến mã CSS của bạn không linh hoạt và khó bảo trì trên các thiết bị khác nhau. Hãy sử dụng em hoặc rem để đảm bảo mã CSS của bạn linh hoạt và dễ bảo trì.
3.Một số hình ảnh dễ nhớ dễ hiểu về các sai lầm chung thường gặp
Not Using shorthand
Repeating same code
No Font fallbacks
Using Color names
Nếu bạn thấy bài này hữu ích hay cho chúng tôi 1 like vs 1 share kiến thức hay tới mọi người, cùng chia sẻ cùng phát triển cộng đồng Javascript VN.
Nếu bạn cảm thấy hữu ích và yêu thích Thế giới JS, hãy tham gia và theo dõi chúng tôi để nhận thêm nhiều kiến thức MIỄN PHÍ hơn nữa nhé:
Share to learn more than!
