Thư viện JavaScript nên đặt kiểu CSS mặc định như thế nào (có chữ "! Notimportant")?

Question

Khi thư viện JavaScript tạo <div>, thư viện thường đặt một lớp trên div để người dùng thư viện có thể tạo kiểu cho thư viện đó/mình. Tuy nhiên, cũng rất phổ biến đối với thư viện JS muốn đặt một số kiểu mặc định cho <div>.

Cách rõ ràng nhất cho thư viện để làm điều này sẽ là với phong cách nội tuyến:

<div style="application's default styles" class="please-style-me"> 
    ... 
</div> 

Tuy nhiên, điều này sẽ làm cho phong cách mặc định của ứng dụng trump phong cách của người dùng. Một cách giải quyết là sử dụng divs lồng nhau:

<div style="application's default styles"> 
    <div class="please-style-me"> 
    ... 
    </div> 
</div> 

này hoạt động tuyệt vời để có nhiều kiểu như 'chữ' nhưng không cho người khác như 'vị trí', nơi mà phong cách div bên trong sẽ không ghi đè lên bên ngoài div của.

Phương pháp hay nhất để tạo các phần tử có thể tạo kiểu người dùng với các giá trị mặc định trong thư viện JavaScript là gì? Tôi không muốn yêu cầu người dùng bao gồm tệp mặc định của CSS (thật tuyệt khi giữ thư viện của bạn tự chứa).

Answer 1

Khi thư viện JS có tập hợp kiểu mặc định sẽ được sử dụng, nhưng cũng phải được ghi đè, thư viện JS phải bao gồm biểu định kiểu riêng biệt.

JavaScript nên tránh thêm kiểu trực tiếp nhiều nhất có thể và trì hoãn tất cả kiểu dáng cho CSS ở nơi hợp lý.

Phổ biến cho các bộ kiểu được bật và tắt. Cách để xử lý các tình huống này một cách thanh lịch là với các lớp CSS.

Trường hợp có thể không hợp lý khi chỉ sử dụng biểu định kiểu bên ngoài là hoạt ảnh. Hoạt ảnh CSS chắc chắn có thể được sử dụng, nhưng đối với hỗ trợ đa trình duyệt, nội suy không đồng bộ được sử dụng để tạo kiểu động từ một giá trị này sang giá trị khác.

Answer 2

Không có !notimportant hoặc !unimportant trong CSS. Và tôi đã không chạy vào một thực hành tốt nhất được chấp nhận. Dường như một tệp CSS là tiêu chuẩn defacto cho các kiểu mà người dùng có thể sửa đổi được.

Nhưng nếu bạn muốn giữ mọi thứ trong một thư viện, tôi sẽ lấy ví dụ thứ hai của bạn, với phong cách mặc định của ứng dụng, sau đó nối thêm một lớp CSS và thêm một thứ gì đó duy nhất vào tên lớp. Sau đó, nếu người triển khai muốn ghi đè kiểu của bạn, người triển khai chỉ có thể sử dụng !important để ghi đè kiểu người dùng của bạn.

Thêm !important vào một hoặc hai kiểu trong tệp CSS không phải là một vấn đề lớn, nhưng nếu bạn đang tạo một loạt kiểu nội tuyến, đây có thể không phải là giải pháp tốt nhất.