Cách tiếp cận html5 để tạo mẫu nhanh css
hoặc: <style>thẻ không còn chỉ dành cho người đứng đầu nữa!
Hack CSS
Giả sử bạn đang gỡ lỗi và muốn sửa đổi css trang của mình, hãy tạo một phần nhất định chỉ trông đẹp hơn. Thay vì tạo các kiểu của bạn theo cách nhanh chóng và bẩn thỉu và không thể bảo trì, bạn có thể làm những gì tôi làm trong những ngày này và thực hiện một cách tiếp cận theo giai đoạn.
Không có thuộc tính kiểu nội tuyến
Không bao giờ tạo nội tuyến css của bạn, theo ý tôi là: <element style='color:red'>hoặc thậm chí <img style='float:right'>Nó rất thuận tiện, nhưng không phản ánh tính đặc hiệu của bộ chọn thực tế trong tệp css thực sau này và nếu bạn giữ nó, bạn sẽ hối tiếc về tải bảo trì sau này.
Nguyên mẫu <style>thay thế
Nơi bạn đã sử dụng css nội tuyến, thay vào đó sử dụng <style> các yếu tố trong trang . Hãy thử nó! Nó hoạt động tốt trong tất cả các trình duyệt, vì vậy rất tốt để thử nghiệm, nhưng vẫn cho phép bạn duyên dáng di chuyển css đó ra các tệp css toàn cầu của bạn bất cứ khi nào bạn muốn / cần! (* chỉ cần lưu ý rằng các bộ chọn sẽ chỉ có độ đặc hiệu ở cấp độ trang, thay vì độ đặc hiệu ở cấp độ trang web, vì vậy hãy cảnh giác vì quá chung chung) Cũng sạch như trong các tệp css của bạn:
<style>
.avatar-image{
float:right
}
.faq .warning{
color:crimson;
}
p{
border-left:thin medium blue;
// this general of a selector would be very bad, though.
// so be aware of what'll happen to general selectors if they go
// global
}
</style>
Tái cấu trúc css nội tuyến của người khác
Đôi khi, bạn thậm chí không phải là vấn đề và bạn đang xử lý css nội tuyến của người khác và bạn phải cấu trúc lại nó. Đây là một cách sử dụng tuyệt vời khác cho <style>trang trong, để bạn có thể trực tiếp loại bỏ css nội tuyến và đặt nó ngay trên trang trong các lớp hoặc id hoặc bộ chọn trong khi bạn tái cấu trúc. Nếu bạn đủ cẩn thận với các công cụ chọn của mình khi bạn đi, thì bạn có thể di chuyển kết quả cuối cùng sang tệp css toàn cầu ở cuối chỉ bằng một bản sao và dán.
Thật khó để chuyển từng bit css ngay lập tức sang tệp css toàn cầu, nhưng với <style>các phần tử trong trang , giờ đây chúng ta có các lựa chọn thay thế.