CSS / BEM

sass

_variables.scss
	$blue: #...;
_mixin.scss
	@include mquery($phone) {
		...
	}
_function.scss
	rem(16px);

filesystem layout

- abstracts
- base
-- resets
-- typography
-- utilities
-- vendor

architecture

avoid specificity conflicts

{block}__{element}--{modifier}
{block}__{element}
{block}--{modifier}
{block}

namespace

TYPES
  .c-{name} : component
  .u-{name} : utilities are allowed to be !important
  .t-{name} : typography
  .l-{name} : layout
  .p-{name} : page
  .j-{name} : javascript handle

layouts

// _grid.scss
.l-grid {
	display: grid;
	&--2col {
		grid... 1fr;
		@respond(tablet) {
			grid.... 1fr;
		}
	}
	&--2col-fixed {
	}
}

example

.p-home-hero
	.c-hero
		.l-container
			.l-grid.l-grid--2-col
				.l-grid__item.l__flex.l-left__column
					.t-heading-1
					.t-paragraph.c-hero__paragraph
					.c-btn