Search code examples
cssmaterialize

why my css is overriden by scss which is even not included

I was working on materialize css and using this library https://materializecss.com/

I compile the sass and included the css file in my html but when i was trying to do some custom css i found the strange thing.

when i inspect the element i saw chrome is taking css from .scss files that i still dont used in my html.

enter image description here

while i was only including two css files.

<link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css"/>
Solution

  • You are chasing a ghost. The problem is not the SCSS, but rather has to do with CSS Specificity as pointed out in the comments. Ignore the fact that the rule is coming from .scss files, and focus on the CSS specificity.

    Why you see .scss files in the inspector:
    The materialize.css file, which you are including, includes a reference (called a "source map") to the materialize SCSS files (if you view the materialize.css file, you'll see the sourcemap reference listed at the bottom of the file). Because of that source map, when you inspect items in your browser's developer console, it actually shows you the SCSS line(s) that are applying styles. This is a good thing, and if you ever develop in SCSS yourself, you'll be very thankful for it.

    The Real Problem:
    The point is, however, that the materialize.css styles are taking effect, and your styles.css styles are not having effect, because of CSS Specificity.

    Note in the materialize styles the selector is:

    .side-nav .collapsible-body li a, .side-nav .nav.fixed .collapsible-body li a { ...

    These are specific. They are only addressing a elements that are within an li, that are within .collapsible-body, that is within .side-nav (in the second selector, there is of course the additional .nav.fixed element).

    In your styles, your padding is being ignored because it contains a more general (aka Less Specific) selector:

    .collapsible-body li a { ...

    This is not specific. It is generally addressing any a elements that are within an li that are within .collapsible-body. These will not override styles that have been set more specifically, like the materialize padding style you are attempting to override.

    If you want your styles to override the materialize styles, you'll need to use styles that are at least as specific. For example:

    .side-nav .collapsible-body li a,
.side-nav .nav.fixed .collapsible-body li a {
    padding-left: 50px;
    font-weight: 400;
}

    Hope this helps. If you are going to continue to work with materialize, or bootstrap, or any other framework, you really would benefit from reading some articles on CSS specificity.