覆盖CSS remove属性

Question

I'm using a lib and i want to remove a property on a class. What is proper way to do it ?

Example : Lib.css

div {
    width: 100%;
}

and custom.css

div {
    width: none; //something like that
}

Answer 1

Every rule in CSS has a different default value. Many might have none or auto as default. Check MDN for Reference. Search for 'Initial value'

Example

https://developer.mozilla.org/en-US/docs/Web/CSS/width
Initial value: auto

Edit

You can also use the special value initial , if you don't need to support MSIE browsers.

Answer 2

I encourage you to read about CSS specificity here in the docs: CSS Specificity: Mozilla Developers and check my answer down below.

There are several ways to overwrite CSS properties from external libraries.

Case 1: if you're using Bootstrap or Zurb Foundation via npm package, you need to change a variable value that is responsible for given property and place it after importing all library files to ovewrite correctyly eg.

import 'files from library.sass';

// my settings
$default-width: 80%;

Case 2: if you're using CDN to deliver your library you can use a more specific CSS selector to overwrite given property eg:

to overwrite div selector

div {}   ----> div.my-class {}

The second technique, but for sure not recommended is to use !important declaration. But remember, using !important declaration often causes many problems during the development process. It is always better to find a more specific selector than use !important.

Answer 3

我不知道您的项目的结构，但我会在jQuery中使用CSS函数