Đặt lại CSS chỉ áp dụng cho #widget

Question

Giả sử tôi có tiện ích con sử dụng CSS phức tạp và phải được nhúng trong nhiều trang web đều có CSS ​​của chúng.

Nếu tôi tiền tố tất cả các quy tắc CSS của tiện ích con với "#widget", chúng sẽ không áp dụng cho bất kỳ thứ gì ở bên ngoài, do đó, một sự cố đã được khắc phục. Thật không may các quy tắc CSS của trang web vẫn có thể làm hỏng tiện ích.

Nếu tôi đặt lại tất cả CSS bên trong #widget với các quy tắc đặt lại đúng, thì hy vọng chúng sẽ ghi đè tất cả các quy tắc bên ngoài, phải không? (vì quy tắc của tôi sử dụng #id và các quy tắc bên ngoài không biết bất kỳ id nào bên trong tiện ích con của tôi, chúng không thể ghi đè chúng, phải không?! quan trọng mặc dù)

Cách tốt nhất để đặt lại tất cả CSS thành trạng thái đã biết là gì? Hầu hết các cài đặt lại CSS bắt đầu từ mặc định của trình duyệt, chúng không đặt lại các CSS tùy ý. Có bất kỳ thiết lập lại CSS hoạt động không có vấn đề gì?

Answer 1

Tôi sử dụng cài đặt lại của Eric Meyer được tải lại để đặt lại kiểu CSS. Liên kết: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 2

Có, css của bạn nên ghi đè mọi thứ được khai báo bên ngoài tiện ích, nhưng việc đặt lại của bạn phải khá toàn diện. Tôi khuyên bạn nên sử dụng phiên bản sửa đổi của http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, nhưng bạn sẽ phải tự sửa đổi tất cả các bộ chọn.

tôi sẽ bị cám dỗ để tăng cường selectors bạn cũng nên chứ không phải

#widget tagname{} 

Sử dụng

html body #widget tagname{} 

selectors của bạn bây giờ sẽ có trọng lượng cao hơn nhiều.

Answer 3

Tôi đã xem qua cleanslate.css trong khi cố gắng để giải quyết cùng một vấn đề:

https://github.com/premasagar/cleanslate

tôi đã không sử dụng nó trong sản xuất, nhưng nó dường như bước ra khỏi sự phát triển của BBC World Service tiện ích.

Answer 4

Sử dụng namespace & reset & LESS

#my-ns { 
    @import ".../reset.less"; 

    ... your other styles ... 
}