Modularize, keep separation of concerns, use BEMIT classes for repeated items such as layouts, use tachyons classes for individual items. If something is repeated, but exists in a single partial, such as a navbar: default to using tachyons classes rather than bemit classes.

BEMIT Syntax

https://smacss.com/ https://css-tricks.com/bem-101/ https://github.com/rstacruz/rscss https://medium.freecodecamp.org/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849

BEM:

.block__element–modifier {}

BEM w/ Namespaces:

.namespace-block__element–modifier {}

BEM w/ Namespaces & Responsive Suffixes:

.namespace-block__element–modifier\@suffix {}

Namespaces

Object

.o-object-name[|] {}

Component

.c-component-name[|] {}

Utility

.u-utility-name {}

Theme

.t-theme-name {}

Scope

.s-scope-name {}

State

.[is|has]-state {}

Hack

._hack-name {}

Javascript

.js-component-name {}

Quality Assurance

.qa-node-name {}

Responsive Suffixes

Breakpoints

.o-object-name\@sm {} .o-object-name\@md {} .o-object-name\@lg {}

Media type

.u-utility-name\@print {}

Files

• layouts.css
• social.css
• navigation.css
• modularscale

Using modularscale

Z-Index gotchas

https://stackoverflow.com/questions/23349394/z-index-inherits-parents-z-index-or-not https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Absolute positioning

Centering, vertical & horizontal:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/