css.md

This is an variation of BEM/SUIT/RSCSS methodologies.

Utilities

You will not always need utility classes, but if you want to use then, do in this way.

Syntax: u-<utilityName>

.u-utilityName {}

Components

Syntax: <componentName>[-elementName][.-modifierName]

.block {}
.block-element {}
.block.-modifier {}
.block-element.-modifier {}

States

Another option is if you have dynamic states set by javascript and want a better control of it, you can use modificators with state prefixes.

This way you know which modificators are managed trough javascript.

Syntax: [-is-|-has-]<stateName>

.-is-globalState {}
.-has-something {}

Component states (scoped to component)

.block.-is-stateOfBlock {}
.block-element.-is-stateOfElement {}

Variables

Syntax: <property>-<value>, [componentName-]<property>-<value>

//
// Colors
//

$color-primary: #428BCA;
$color-primary-hover: lighten($color-primary, 6%);
$color-primary-active: darken($color-primary, 6%);

$color-secondary: #196E76;
$color-secondary-hover: lighten($color-secondary, 6%);
$color-secondary-active: darken($color-secondary, 6%);

$color-gray: #666;
$color-gray-light: lighten($color-gray, 20%);
$color-gray-dark: darken($color-gray, 10%);

$color-error: #A94442;
$color-success: #3C763D;

//
// Typography
//

$color-titles: $color-primary;
$color-text: $color-gray;
$color-link: $color-gray-dark;
$color-link-hover: $color-primary;

$base-font-size: 62.5%;   // 1.6rem = 16px
$base-line-height: 1.4;
$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

$font-size-h1: 2.5rem;
$font-size-h2: 2rem;
$font-size-h3: 1.75rem;
$font-size-h4: 1.5rem;
$font-size-h5: 1.25rem;
$font-size-h6: 1rem;

// Components

$padding-sm: 5px;
$padding:    10px;

// Components Specific

$nav-color-gray: $color-gray-light;
$nav-padding: 15px;

Be careful using component variables

Folder's Structure

The suggested folder structure, but here you can use the way you want, you can treat widgets as smart/specific components.

├── styles
│   ├── base
│   │   ├── _button.scss
│   │   ├── _container.scss
│   │   ├── _form.scss
│   │   ├── _table.scss
│   │   ├── _thumb.scss
│   │   ├── _typography.scss
│   │   └── _viewport.scss
│   ├── helpers
│   │   ├── _mixins.scss
│   │   ├── _placeholders.scss
│   │   ├── _utilities.scss
│   │   └── _variables.scss
│   ├── components
│   │   ├── _sidebar.scss
│   │   ├── _footer.scss
│   │   └── _header.scss
│   └── style.scss

Examples

.u-capitalize {}
.u-pullLeft {}
.u-textCenter {}
.u-textMuted {}
.u-hidden {}
.u-disabled {}

.btn {}
.btn.-primary {}
.btn.-large {}
.btn.-outline {}
.btn.-clear {}
.btn.-block {}

.nav {}
.nav.-fixed {}
.nav-item {}
.nav-item.-featured {}
.nav-item.-is-active {}

.article {}
.article.-large {}
.article-title {}
.article-image {}
.article-image.-rounded {}  // or .article-image.u-rounded {}
.article-body {}

.tabs {}
.tabs.-vertical {}
.tabs-tab {}
.tabs-tab.-is-expanded {}

.formArea {}
.formArea.-has-errors {}
.formArea-field {}
.formArea-field.-is-valid {}