CODEWITHSUNDEEP
css
Paul Wattellier
Paul Wattellier

Reputation: 23

Overwrite Css Files

I'm using uikit.css and I create others files for modify what I want. I'm confused because I charging the file in cascade but 0 effect 

<link href="{{ asset('css/uikit.css') }}" rel="stylesheet">
<link href="{{ asset('css/main.css') }}" rel="stylesheet">

With !important, it's be great but I wont use it always in all my file.

Css capture

uikit.css is main or library css. Trying to override some of style in main.css

If I want to add class for style my selector. How can I do this ? Because the class is overwrited by the uikit.css ?

Upvotes: 0

Views: 317

Answers (2)

Morten Pradsgaard
Morten Pradsgaard

Reputation: 184

By default, the CSS files get written from top to bottom. In your case that means, by default everything written in main.css will override uikit.css.

<link href="{{ asset('css/uikit.css') }}" rel="stylesheet"> this is written first

<link href="{{ asset('css/main.css') }}" rel="stylesheet"> this is written last

There is a big but to this.

It will only override what is exactly the same style or if you are being more specific with selectors.

Example uikit.css:

.uk-navbar-nav > li > a { 
  font-family: something; 
}

Example main.css:

.uk-navbar-nav > li > a { 
  font-family: something;  //this will override uikit.css
}

I have a simple trick up my sleeve, that I sometimes use. Watch my Gyazo video here: Tutorial; how to get class with DevTools

The trick works almost every time because it will always take the currently used selectors on the specific element. But the best way is to actually not override at all. Begin working with uikit in SCSS or SASS is my absolute best advice.

Upvotes: 1

Ivana Bakija
Ivana Bakija

Reputation: 344

Look into specificity of your css rules.

If in ui-kit you have something like:

.parent .child {
  width: 100%;
}

and in your main.css:

.child {
  width: 50%;
}

your css will get overriden by ui-kit.

Your css has to be at least as specific as the ui-kit to override it.

Upvotes: 4

Related Questions