Material-Design-Lite, Override styleguide property

Question

I'm playing with Material-Design-Lite and I want to override a style but it won't work. Let say that I woudl like to change the padding on mdl-navigation__link which is actually 16px 40px to 0px.

I have overrided the property on my custom style sheet but without success. However some other styles are applied :

.my-navigation .mdl-navigation__link {
  padding: 0px;
  border: 1px solid red;
}

The border is applied but not the padding. And into teh web develope tools I see that my padding property is ignored (strikethrough) du to a styleguide.css that I never include !

I suppose that styleguide.css is included by the javascript file. So the only trick to apply my custom padding is to mark it as !important.

Is it a cleaner way to override styleguide.css properties ?

Edit : Here is the codepen : http://codepen.io/anon/pen/ZGjYqo

Answer 1

You just need to increase the specificity of your selectors. Check the specificity of what MDL provides. .mdl-layout__drawer .mdl-navigation .mdl-navigation__link. This is a 3-class specificity, so about 30. You are doing a two class selector, so roughly 20 specificity. Whether yours comes after or not, the high specificity wins.

Some good resources on specificity:

• Smashing Magazine
• MDN
• CSS tricks

Answer 2

Try doubling up the classes. Even if they are the same class the specificity will be greater than it was when selecting only one.

Perfect for allowing overrides without resorting to !important

for example:

.mdl-navigation__link.mdl-navigation__link {
  padding: 0px;
  border: 1px solid red;
}

More tricks like this for lower specificity at css-tricks

And my favorite guide on CSS Specificity