Khi làm việc với CSS, một trong những yếu tố quan trọng nhất cần quan tâm là responsive. Để làm được điều này thì việc sử dụng Flexbox layout sẽ tối ưu và đơn giản hơn so với inline và float.
Về cơ bản, Flexbox là một kiểu dàn trang mà nó sẽ tự cân đối kích thước của các phần tử bên trong để có thể hiển thị đầy đủ nội dung trên mọi thiết bị.
Take a Selfie With JavaScript
table {
width: 600px;
border: 1px solid #505050;
margin-bottom: 15px;
color:#505050;
}
td{
border: 1px solid #505050;
padding: 10px;
}
Vấn đề xảy ra là có quá nhiều thuộc tính border ở khắp mọi nơi, lặp đi lặp lại. Và rất khó để chúng ta quản lý được border cho bảng trong trường hợp này.
Cách tốt nhất để giải quyết là thêm border-collapse: collapse vào table như sau:
table {
width: 600px;
border: 1px solid #505050;
margin-bottom: 15px;
color: #505050;
border-collapse: collapse; // line add border-collapse: collapse;
}
td{
border: 1px solid #505050;
padding: 10px;
}
Thành quả:
Sử dụng kebab-case
Một trong những lưu ý dành cho người mới tập làm CSS là về cú pháp:
- Các chữ trong tên class và id phải được nối với nhau bằng dấu gạch ngang [-] nếu có chứa nhiều hơn một chữ.
- CSS không phân biệt chữ hoa và chữ thường.
- Thời gian đầu, dấu gạch dưới [_] được sử dụng, nhưng ngày này không còn được hỗ trợ nữa. Thay vào đó dấu gạch ngang mới là tiêu chuẩn [-]
/* Đúng */
.footer-column-left { }
/* Sai */
.footerColumnLeft { }
.footer_column_left { }
Sử dụng comment hiệu quả trong CSS
Một trong những chìa khóa thành công của những web developer khi sử dụng CSS đó là họ sử dụng CSS linh hoạt mà vẫn quản lý chặt chẽ file CSS của mình. Để quản lý được file CSS phục vụ cho việc xem lại và chỉnh sửa code, bên cạnh việc tổ chức file CSS hợp lý thì bạn cần có thói quen sử dụng comment hiệu quả. Khi đó, nếu cần xem lại code, bạn sẽ biết mọi thứ nằm ở đâu, nó dùng để làm gì, và cần làm gì để cải thiện.
Đối với các phần quan trọng trong CSS, chẳng hạn như thành phần chính hoặc media queries, hãy sử dụng comment được cách điệu để dễ nhận ra. Ví dụ:
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
Những chi tiết nhỏ và ít quan trọng hơn, hãy comment đơn giản. Ví dụ:
/* Button ở Footer */
.footer button { }
.footer button:hover { }
Ngoài ra, hãy nhớ rằng CSS không có 1 dòng // comment, vì vậy khi comment, bạn vẫn cần chú ý sử dụng cú pháp / / syntax.
/* Nên */
p {
padding: 15px;
/*border: 1px solid #222;*/
}
/* Không nên */
p {
padding: 15px;
// border: 1px solid #222;
}
Theo BizFly Cloud tổng hợp
>> Có thể bạn quan tâm: Dàn trang linh hoạt hơn với CSS Flexbox
BizFly Cloud là hệ sinh thái điện toán đám mây được vận hành bởi VCCorp - Công ty dẫn đầu trong lĩnh vực công nghệ và truyền thông tại Việt Nam. Với đội ngũ kỹ thuật viên trình độ cao và kinh nghiệm lâu năm làm việc trên các công nghệ khác nhau như cloud, mobile, web..., chúng tôi có đủ khả năng để hỗ trợ đưa ra những giải pháp và công nghệ toàn diện giúp doanh nghiệp chuyển đổi số thành công. Dành cho độc giả quan tâm tới các dịch vụ đám mây do BizFly Cloud cung cấp có thể truy cập tại đây.