How to override CSS in Material Design Lite(MDL) or any other CDN

Image for post
Image for post
Photo by Tim Gouw on Unsplash

TLDR(I understand )

just add an id and move your stylesheet to the bottom

For those that like stories…

So I had a super annoying problem where the drawer button would be overlapped with content

Image for post
Image for post
responsive menu that overlaps content argh

Yep… so I did what any other CS student or programmer would do. Delay everything until I found a solution :)

It only took me 1.5 hours but in the process I learned a few little hacks

Basically, when you are using a CDN, you cannot just simply override the style sheet. The browser will give preference to the style sheet with more specificificy(spelt wrong on purpose).

What the hell is specificity?

official definition and documentation on MDN

my definition:

every selector has its own numerical ‘weight’:

If you want to override, you got to hit the boss level and pass señor CDN, and the easiest way to do that is to give yourself a 100 point bonus by throwing in an overrides id.

You will also need to move your stylesheet to the bottom, so it is the last one read.

I tried both of these separately, and they didn’t work that way.

So to summarize…

  1. Wrap the area you want to change or the whole document with a custom id to override.
Image for post
Image for post
create an override id

2. Move stylesheet to the bottom.

Image for post
Image for post
move stylesheet to the bottom
Image for post
Image for post
works

3. Bask in glory

I hope you guys got a good laugh out of this and learned something. I know I did. Comments questions? Drop em *dabbing out*

Written by

bio in beta

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store