# CSS misc.

# Browser Compatibility

cross-browser-compatibility:

# Static site generators etc

Hugo (opens new window)

Jekyll

# ::before / ::after

..before / :: after - CSS tricks (opens new window)

# DefaultCSS & Reset

CSS Default Values - w3schools (opens new window)
CSS Reset - meyerweb (opens new window)
normalize CSS (opens new window)
Sanitize CSS (opens new window)
a tale of css resets (opens new window)
Bootstrap reboot (opens new window)
mini resets (opens new window)
SH reboot
sh_sanitize
simple reset:

box-sizing: border-box;
margin: 0;
padding: 0;

/* evtl: margin: 0; for body */

# CSS Variables

declare in:

 :root {
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px
    }

use it:

img {
	padding: var(--spacing);
}

# BEM Naming Convention

block__element--modifier

The block is the larger section that you want to display, e.g. a form. The element is an element of it, e.g. a button. The modifier specifies a variant of this element, e.g. a highlighted button. It is optional. In the HTML, this would look like this:

<button class=”form__button--highlighted”>Submit</button>

in CSS:

.form__button--highlighted {
...
}

# Minify / Unminify

← Animation CSS LINKS →