CODEWITHSUNDEEP
htmlcsspropertiesoverriding
Jax Teller
Jax Teller

Reputation: 1467

Override CSS remove property

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
}

Upvotes: 5

Views: 15901

Answers (2)

p7adams
p7adams

Reputation: 662

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.

Upvotes: 0

yunzen
yunzen

Reputation: 33439

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.

Upvotes: 3

Related Questions