Giới thiệu
Khi bạn viết CSS, việc tuân theo các thực hành tốt nhất và đảm bảo trang web của bạn dễ tiếp cận sẽ giúp trang web của bạn trông đẹp hơn, hoạt động tốt cho mọi người và dễ bảo trì hơn.
Trong bài viết này, tôi sẽ chia sẻ 13 thực hành CSS tốt nhất và mẹo tiếp cận để giúp bạn làm điều đó.
Trước khi bắt đầu, đừng quên đăng ký nhận bản tin của tôi!
Nhận những mẹo, công cụ và tài nguyên mới nhất để nâng cao kỹ năng phát triển web trực tiếp vào hộp thư đến của bạn. Đăng ký tại đây!
1. Phương Pháp Đặt Tên BEM
BEM (Block Element Modifier) là một cách để đặt tên cho các lớp CSS của bạn để mã của bạn luôn sạch sẽ và dễ hiểu.
- Block: Phần chính hoặc thành phần, như nút hoặc tiêu đề.
- Element: Một phần nhỏ bên trong block, như biểu tượng bên trong nút.
- Modifier: Một phiên bản hoặc trạng thái đặc biệt, như nút lớn hoặc nút bị vô hiệu hóa.
Ví dụ:
css
.button { /* Block: kiểu dáng nút cơ bản */ }
.button__icon { /* Element: biểu tượng bên trong nút */ }
.button__large { /* Modifier: phiên bản lớn của nút */ }Sử dụng BEM giúp CSS của bạn được tổ chức và tránh tên lớp gây nhầm lẫn hoặc xung đột kiểu dáng không mong muốn.
2. DRY CSS (Don’t Repeat Yourself)
DRY có nghĩa là bạn không viết cùng một mã CSS nhiều lần. Thay vào đó, hãy tạo các lớp và thành phần có thể tái sử dụng.
Ví dụ, thay vì tạo kiểu dáng riêng cho từng nút, hãy tạo một lớp .button và thêm các modifier cho các biến thể:
css
.button { padding: 10px; background: blue; }
.button__red { background: red; }Điều này sẽ tiết kiệm thời gian, giảm thiểu sai sót và làm cho mã của bạn dễ cập nhật hơn.
3. Trạng Thái Tập Trung & Quản Lý Đường Viền
Trạng thái tập trung cho thấy phần tử nào đang được chọn khi bạn sử dụng bàn phím (như khi nhấn Tab). Điều này rất quan trọng đối với những người không sử dụng chuột.
Trình duyệt thường thêm một đường viền màu xanh vào các phần tử được tập trung theo mặc định. Đừng loại bỏ hoàn toàn đường viền này, nó giúp người dùng biết họ đang ở đâu trên trang.
Thay vào đó, hãy thiết kế đường viền tập trung sao cho trông đẹp nhưng vẫn rõ ràng:
css
.button:focus {
outline: 3px solid purple;
outline-offset: 2px;
}4. prefers-reduced-motion & Giảm Độ Trong Suốt
Một số người cảm thấy chóng mặt hoặc khó chịu với quá nhiều hoạt ảnh hoặc hiệu ứng. Bạn có thể tôn trọng sở thích của họ bằng cách kiểm tra xem họ muốn ít chuyển động hơn.
Sử dụng truy vấn phương tiện CSS:
css
@media (prefers-reduced-motion: reduce) {
/* Tắt hoạt ảnh hoặc chuyển tiếp */
.animated {
animation: none;
transition: none;
}
}Tương tự, một số người dùng có thể ưu tiên ít độ trong suốt hơn để cải thiện độ rõ ràng. Tránh sử dụng nền trong suốt nặng nếu có thể.
5. Thực Hành Độ Tương Phản Màu Sắc
Độ tương phản tốt giữa văn bản và nền giúp nội dung của bạn dễ đọc cho mọi người, đặc biệt là cho những người có thị lực kém.
- Sử dụng văn bản tối trên nền sáng hoặc văn bản sáng trên nền tối.
- Kiểm tra màu sắc của bạn bằng các công cụ trực tuyến miễn phí như WebAIM Contrast Checker.
- Đặt mục tiêu có tỷ lệ tương phản ít nhất là 4.5:1 cho văn bản bình thường.
6. Hiển Thị: display: none vs visibility: hidden vs ARIA
Đôi khi bạn muốn ẩn các phần tử trên trang của mình, nhưng cách bạn ẩn chúng ảnh hưởng đến khả năng tiếp cận:
css
display: none;Phần tử sẽ hoàn toàn bị loại bỏ khỏi trang và không hiển thị cho các trình đọc màn hình. Sử dụng điều này khi bạn muốn ẩn nội dung khỏi mọi người.
css
visibility: hidden;Phần tử vẫn vô hình nhưng vẫn chiếm không gian, và các trình đọc màn hình vẫn có thể truy cập nó. Sử dụng điều này khi bạn muốn giữ không gian bố cục nhưng ẩn nó về mặt trực quan.
html
aria-hidden="true"Điều này cho các trình đọc màn hình biết để bỏ qua phần tử nhưng không ẩn nó về mặt trực quan. Sử dụng điều này để ẩn các phần tử trang trí khỏi các trình đọc màn hình.
Việc chọn phương pháp phù hợp phụ thuộc vào việc người dùng nên hoặc không nên thấy hoặc nghe gì.
7. Bố Cục Phản Ứng Có Thể Tiếp Cận
Thiết kế phản ứng có nghĩa là trang web của bạn trông đẹp trên điện thoại, máy tính bảng và máy tính để bàn.
Để làm cho các bố cục phản ứng có thể tiếp cận:
- Sử dụng lưới linh hoạt và các truy vấn phương tiện CSS để điều chỉnh nội dung cho các kích thước màn hình khác nhau.
- Đừng chỉ dựa vào màu sắc để truyền đạt thông tin. Sử dụng biểu tượng, văn bản hoặc hình dạng cũng vậy.
- Đảm bảo rằng người dùng bàn phím có thể điều hướng qua nội dung dễ dàng.
- Làm cho các nút và liên kết dễ dàng nhấn trên màn hình nhỏ bằng cách làm cho chúng đủ lớn.
8. Sử Dụng HTML Ngữ Nghĩa với CSS
Viết HTML của bạn với các thẻ thích hợp như <button>, <nav>, <header>, <main>, và <footer>. CSS sẽ định dạng các yếu tố này, nhưng cấu trúc HTML tốt cải thiện khả năng tiếp cận bằng cách giúp các trình đọc màn hình hiểu rõ hơn về trang của bạn.
9. Tránh Sử Dụng !important
Việc sử dụng !important có thể khiến CSS của bạn khó bảo trì vì nó ghi đè lên các kiểu khác. Thay vào đó, hãy cố gắng viết các bộ chọn rõ ràng và cụ thể hoặc sử dụng cấu trúc CSS đúng như BEM để quản lý kiểu dáng.
10. Giới Hạn Sử Dụng Kích Thước Cố Định
Kích thước cố định có thể làm hỏng bố cục trên các màn hình nhỏ hoặc lớn. Sử dụng các đơn vị tương đối như %, em, rem, hoặc vw/vh để làm cho thiết kế của bạn linh hoạt và dễ tiếp cận hơn.
11. Sử Dụng Biến CSS Để Đảm Bảo Tính Nhất Quán
Biến CSS (--primary-color, --font-size) giúp giữ cho các kiểu dáng của bạn nhất quán và dễ cập nhật. Chỉ cần thay đổi một biến sẽ cập nhật mọi nơi nó được sử dụng.
css
:root {
--primary-color: #007bff;
--font-size: 16px;
}
.button {
background-color: var(--primary-color);
font-size: var(--font-size);
}12. Cung Cấp Phản Hồi Hình Ảnh Rõ Ràng
Đảm bảo rằng các nút, liên kết và đầu vào biểu mẫu thay đổi về mặt hình ảnh khi được di chuột hoặc nhấp chuột. Điều này giúp tất cả người dùng hiểu cái gì đang tương tác và cái gì đang diễn ra.
css
.button:hover {
background-color: #0056b3;
}13. Tránh Sự Di Chuyển Nội Dung
Khi trang của bạn tải hoặc thay đổi kích thước, hãy cố gắng tránh sự di chuyển bố cục (như văn bản hoặc nút nhảy xung quanh). Điều này giúp những người có khuyết tật nhận thức và cải thiện trải nghiệm người dùng.
Sử dụng các thuộc tính CSS như min-height hoặc dự trữ không gian cho hình ảnh để giảm thiểu sự di chuyển.
Bằng cách tuân theo những thực hành CSS tốt nhất và tập trung vào khả năng tiếp cận, trang web của bạn sẽ dễ dàng xây dựng, dễ bảo trì và sử dụng cho mọi người, bao gồm cả những người khuyết tật.
Đó là tất cả cho hôm nay!
Nhân tiện, nếu bạn cần các mẫu website HTML miễn phí, tôi khuyên bạn nên kiểm tra HTMLrev, tôi sử dụng nó mọi lúc. Và khi tôi tìm kiếm cảm hứng thiết kế web, Websitevice là một trong những nguồn tài nguyên tôi thường xuyên truy cập.
Để hợp tác trả phí, hãy liên hệ với tôi qua: connect@shefali.dev
Nếu bạn thích công việc của tôi và muốn ủng hộ những gì tôi làm:
👉 Trở thành người ủng hộ Patreon
👉 Hoặc mua cho tôi một ly cà phêMọi cử chỉ nhỏ đều giúp tôi tiếp tục! 💛
