New school CSS best practices. No SASS, just CSS. Best used with css-next or comparable.


Naming things is hard, and with specificity in the mix it becomes even harder. By using the naming scheme below, many, if not all naming issues will be resolved. Short words and dashes between them are key.

.navbar              block
.navbar-item         block-element
.navbar-item-active  block-element_modifier


.foo .foo-bar .foo-bar_baz {}
.foo-bar_baz {}
[foo="bar"] {}

By using the second or third form, specificity issues will never happen.


Comments are useful to indicate new sections. Often times groups of selectors belong together, and comments are a great way to indicate that.


  • have a main color
  • light colors
  • dark colors
  • inverted colors
  • err, warn, success, action
  • have a complimentary color
  • head, body, mono fonts
  • z-indices, colors, fonts are always a variable
  • variables for everything
  • all variables in one file


Flex container (parent):

display           flex, inline-flex
flex-direction    row, row-reverse, column
flex-wrap         nowrap, wrap, wrap-reverse
flex-flow         <flex-direction> <flex-wrap>
justify-content   flex-start, flex-end, center, space-between, space-around
align-items       flex-start, flex-end, center, stretch, baseline
align-content     flex-start, flex-end, center, stretch, space-between, space-around

Flex items (children):

order             <integer>
flex-grow         <integer:0>
flex-shrink       <ufloat:1.0>
flex-basis        <length> | auto
flex              none | <flex-grow> <flex-shrink> || <flex-basis>
align-self        auto, flex-start, flex-end, center, stretch, baseline


Storing CSS in the right files is just as important as correctly naming classes. There are a few base files every site wants to start out with:

index.css       imports
vars.css        variable declarations
base.css        body classes & helpers, usually super tiny
typography.css  base text styles
buttons.css     base button styles
forms.css       base form styles
lists.css       base list styles

Attribute selectors

.show-grid [class*="span"] {} /* search children for class="span"*/
div[class^="something"] {}    /* search children for "begins with..." */
div[class$="something"] {}    /* search children for "ends with..." */

There are 2 approaches: blacklisting and whitelisting. Whitelisting is unwieldy to implement using CSS level 4, so blacklisting is the way to go.


Pick the elements you want to hide (sidebar, footer, etc) and set them to display: none.

Style input placholders

Supported by autoprefixer.

input::placeholder { }



box-shadow: [horizontal offset] [vertical offset]
            [blur radius] [optional spread radius] [color];

natural looking components

  • flexy, resizable things
  • grab the border between 1 and 2, change the flex-grow property.
  • components need a certain order (flex -> relative -> absolute) or else the full width won't be covered. ```

| 1| |2 |

## Web fonts
@font-face {
  font-family: 'Maison Neue Mono';
  src: url('assets/maison-mono.woff') format('woff');

Media Queries

@media (min-width: 700px) {

@media all and (min-width: 700px) {

Set selection color

*::selection {
  background: hotpink;

See also

results matching ""

    No results matching ""