CSS Tips

My favorite box shadow

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

CSS Selectors

I need to use this reference more!

https://www.w3schools.com/cssref/css_selectors.asp

Clean up unused CSS

https://unused-css.com/

CSS Inheritance

Example here.

[class*=“button-“] {
    /* Base button styles */
    user-select: none;
}
button-blue {
    background: blue;
    color:white;
}

This prevents you from having to write class="button button-blue" and allows instead for just class="button-blue". Nifty!

CSS Variables

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
https://davidwalsh.name/css-variables-javascript

Remember to put your font imports above the :root{} rule!

Set a variable

:root {
  --main-bg-color: #7b0025;
}

Use a variable

.myClass {
  background: var(--main-bg-color);
}

Get a variable in JS

getComputedStyle(document.documentElement).getPropertyValue('--main-bg-color');

Set a variable in JS

document.documentElement.style.setProperty('--main-bg-color', '#7b0025');

Find 4- or 8-character rgba hex values

Internet Explorer doesn't understand these, so it may be worth replacing your #fff8's and ffffff80's with rgba(255, 255, 255, 0.5)'s.

Do a regex search for: #[0-9A-Fa-f]{4}[; ]|#[0-9A-Fa-f]{8}[; ]