7 lỗi CSS cần tránh khi mới bắt đầu
Làm việc với Cascading Style Sheets (CSS) có thể khó đối với người mới bắt đầu. Sử dụng CSS, bạn có thể cấu trúc, cập nhật và duy trì giao diện ứng dụng của mình. Nhưng ngôn ngữ này đòi hỏi kỹ năng thao tác với trang HTML để có được bố cục mong muốn.
Dưới đây là một số sai lầm cần tránh khi làm việc với CSS. Chúng sẽ giúp bạn tiết kiệm thời gian và giảm bớt quá trình phát triển của bạn.
Mục Lục
1. Sử dụng px cho Cỡ chữ
Đơn vị “px” đại diện cho pixel. Bạn có thể sử dụng nó để thể hiện các độ dài khác nhau trên một trang web, từ chiều rộng và chiều cao của một thành phần cho đến kích thước phông chữ của nó.
Tuy nhiên, px khóa thiết kế của bạn ở một kích thước cố định cho tất cả các màn hình. Một hình ảnh tính bằng px có thể chiếm toàn bộ chiều rộng của một màn hình và chỉ một phần nhỏ của màn hình khác. Nếu bạn muốn một phần tử tỷ lệ hơn, hãy sử dụng các phép đo tương đối như rem hoặc phần trăm (%).
Phép đo tương đối tốt nhất để sử dụng là rem. Đơn vị này đề cập đến kích thước phông chữ của phần tử gốc mà người đọc thường có thể đặt trong cài đặt trình duyệt của họ. Bạn có thể thấy tác động của px và rem đối với một phần tử trong ví dụ sau:
<!DOCTYPE html>
<HTML>
<head></head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Bạn có thể tạo kiểu cho kích thước phông chữ trong tài liệu này bằng đơn vị px với CSS sau:
h1 {
font-size: 50px;
}h2 {
font-size: 30px;
}
p {
font-size: 15px;
}
Trang kết quả có vẻ chấp nhận được khi bạn xem nó trên màn hình lớn:
Nhưng nó không hiển thị trên màn hình nhỏ hơn, như trên điện thoại:
Tiếp theo, áp dụng rem trên cùng một nội dung. Chỉ định kích thước phông chữ cơ sở trên phần tử html và kích thước các phần tử khác bằng cách sử dụng rems, như minh họa bên dưới:
html {
font-size: 16px;
}h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
Lưu ý sự khác biệt giữa màn hình lớn và nhỏ. Với rem, nội dung có tỷ lệ tốt hơn bất kể kích thước màn hình. Các phần tử sẽ không bao giờ vượt quá kích thước màn hình đã đặt. Đó là lý do tại sao nên sử dụng độ dài tương đối hơn là pixel.
Trên màn hình máy tính để bàn:
Trên màn hình nhỏ, văn bản ở đơn vị rem vẫn có thể đọc được:
2. Đặt tất cả các kiểu của bạn vào một tệp
Sử dụng một tệp CSS cho một dự án lớn có thể tạo ra một mớ hỗn độn. Bạn sẽ có một tệp với các dòng mã dài sẽ gây nhầm lẫn khi cập nhật. Hãy thử sử dụng các tệp khác nhau cho biểu định kiểu CSS cho các thành phần khác nhau.
Ví dụ: bạn có thể có các tệp khác nhau cho điều hướng, đầu trang và chân trang. Và một cái khác cho các phần trên cơ thể. Việc tách các tệp CSS của bạn giúp cấu trúc Ứng dụng của bạn và khuyến khích khả năng sử dụng mã.
3. Sử dụng CSS nội tuyến không phù hợp
Trong vanilla CSS, bạn có thể viết các kiểu trên các trang HTML giống như trên các khung CSS như Bootstrap và TailwindCSS. CSS nội tuyến cho phép bạn áp dụng một kiểu duy nhất cho một phần tử HTML. Nó sử dụng thuộc tính style của phần tử HTML.
Đoạn mã sau là một ví dụ về CSS nội tuyến.
<h2 style="color:green;">This is a Green Heading</h2><p style="color:red;">This is a red paragraph.</p>
Văn bản sẽ xuất hiện như vậy:
Tuy nhiên, HTML chỉ với CSS nội tuyến có thể lộn xộn. Vì không có vị trí nào khác cho CSS nên tất cả CSS tồn tại trong cùng một tệp với HTML. Nó sẽ trông đông đúc. Chỉnh sửa một tệp như vậy rất khó, đặc biệt nếu đó không phải là mã của bạn.
Ngoài ra, với CSS nội tuyến, bạn phải viết mã cho từng phần tử. Điều này làm tăng sự lặp lại và giảm việc sử dụng lại mã. Luôn sử dụng kết hợp biểu định kiểu bên ngoài và CSS nội tuyến để tạo kiểu cho trang web của bạn.
4. Lạm dụng !quan trọng
Trong CSS, !quan trọng quy tắc tăng thêm tầm quan trọng cho một thuộc tính/giá trị. Nó ghi đè các quy tắc tạo kiểu khác cho thuộc tính đó trên phần tử đó.
Bạn chỉ nên có một vài !quan trọng quy tắc trong mã của bạn. Chỉ sử dụng nó khi cần thiết. Không có điểm nào trong việc viết mã và sau đó ghi đè lên nó. Mã của bạn sẽ trông lộn xộn và gây ra sự cố khi chạy trên một số thiết bị.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p> I am orange </p>
<p class="my-class"> I am green </p>
<p id="my-id"> I am blue. </p>
</body>
</html>
CSS:
#my-id {
background-color: blue;
}.my-class {
background-color: green;
}
p {
background-color: orange !important;
}
Kết quả là như vậy:
5. Không theo quy ước đặt tên
CSS có các quy ước đặt tên hướng dẫn các nhà phát triển cách viết mã chuẩn. Điều này là cần thiết nếu bạn kết thúc việc gỡ lỗi tệp CSS vào một ngày trong tương lai.
Một trong những tiêu chuẩn này bao gồm việc sử dụng dấu gạch ngang để phân tách các từ được nhóm lại. Một cách khác là đặt tên cho bộ chọn theo chức năng của nó. Nên ai nhìn vào sẽ khỏi phải đoán. Nó cũng làm cho việc đọc, bảo trì và chia sẻ mã trở nên dễ dàng hơn. Ví dụ:
Thay vì điều này:
.image1 { margin-left: 3%; }
Viết nó như vậy:
.boy-image { margin-left: 3%; }
Khi nhìn vào stylesheet, bạn sẽ biết chính xác đoạn mã đó dành cho hình ảnh nào. Hướng dẫn về phong cách HTML/CSS của Google liệt kê nhiều quy ước khác mà mọi nhà phát triển nên biết.
Viết bình luận là kỹ năng bị đánh giá thấp nhất trong lập trình. Nhiều người quên viết bình luận để giải thích mã của họ. Nhưng nó tiết kiệm thời gian. Nhận xét là điều cần thiết để đọc và duy trì mã.
Vì CSS có cấu trúc lỏng lẻo và bất kỳ ai cũng có thể phát triển các quy ước của riêng mình nên các nhận xét rất quan trọng. Sử dụng các nhận xét có cấu trúc tốt để giải thích biểu định kiểu của bạn là một cách thực hành tốt. Bạn có thể viết nhận xét giải thích các phần của mã và chức năng của chúng.
.video {
margin-top: 2em;
}
.salutation {
margin-top: 1em;
}
7. Không thiết kế trước
Nhiều người làm điều đó, nhưng đó là một sai lầm nghiêm trọng khi bắt đầu viết mã mà không có kế hoạch. CSS xác định cấu trúc giao diện người dùng của bạn trông như thế nào. Thiết kế nói rất nhiều về kỹ năng lập trình của bạn.
Một thiết kế cho trang web của bạn làm rõ tầm nhìn của bạn và các tài nguyên cần thiết để đưa bạn đến đó. Có một bức tranh tinh thần về dự án của bạn. Sau đó thiết kế nó trên giấy hoặc sử dụng bộ công cụ thiết kế như Canva để trực quan hóa những gì bạn muốn.
Khi bạn có một bức tranh hoàn chỉnh về dự án, hãy tập hợp tất cả các tài nguyên của bạn và bắt đầu viết mã. Nó sẽ giúp bạn tiết kiệm thời gian và dự phòng.
Tại sao bạn nên xem xét các khuyến nghị này
Nếu bạn đang phát triển ứng dụng trên web, bạn sẽ sử dụng CSS. Làm việc tốt với CSS yêu cầu thực hành và tuân theo các quy ước tiêu chuẩn. Các quy ước không chỉ làm cho mã của bạn dễ đọc mà còn có thể bảo trì được.
Viết mã chuẩn sẽ giúp bạn tiết kiệm thời gian và công sức. Thời gian bạn dành để định dạng giao diện người dùng, bạn có thể dành cho các tính năng phức tạp hơn. Nó cũng đảm bảo bạn có thể sử dụng lại mã và chia sẻ nó với những người khác. Viết mã tốt hơn bằng cách tuân theo các quy ước đã đặt và trở thành nhà phát triển giỏi hơn.