SMACSS

SMACSS home: https://smacss.com/

SMACSS in russian: https://medium.com/tag/smacss-%D0%BD%D0%B0-%D1%80%D1%83%D1%81%D1%81%D0%BA%D0%BE%D0%BC

We have a few of style groups:

1. Basic - it is default styles for tags (as example h1, p, div, section etc.) in project
2. Layout - it is styles for layout components (menu, sidebar, header, footer etc.). It is components, that could be only one exemplar on the page at a time. Layout styles answer where and how displayed blocks. If we should to add styles to layout component, we use prefix "l-" (as example <div id="menu-left" class="l-menu-left"></div>)
3. Modules - it is reusable styles and elements (as example .popup, .table), for submodules or - use name with prefix with name of modele(as examplt, .popup-header, .popup-footer). Modules styles answer how look element.
4. States - it is styles, that we applyed from javascript or state pseudo-selectors. If we should to add state-styles, we could add class with prefix "is-". As example, ".is-hidden". Only in case of states we able to use "!important".
5. We don't use themes at this time.

Naming convention

1. For layout classes use prefix "l-"

.l-menu {
	...
}

2. For modules classes use name of module

.module {
	...
}

3. For submode classes use name of parent module as prefix

.parent {
	...
}
.parent-child {
	...
}

4. For state classes use prefix "is-"

.is-active {
	...
}

5. For state classes of modules, if not enough exists state classes use prefix "is-module-"

.btn {
	...
}
.is-btn-active {
	...
}

6. For styles, which used only in @extend, use prefix ".p-" (from "prototype").

.p-width-200px {
	width: 200px;
}
.new-module {
	@extend .p-width-200px;
	height: 10px;
}

Folders structure convention (proposal)

Main file of styles is site.css. On this level should be placed file variables, which contains scss variables (colors, font-size etc);

Layout styles should be placed in folder 'layout'.

Modules styles should be placed in folder 'modules'. Submodules writen in the same file as main module (?)

States styles should be placed in folder 'states'

Module states should be placed in folder 'states' in subfolder named as module. (or maybe in file named same as module?)

Each folder should contain file 'index.scss', which have instruction to import relevant parts.

All index files compiled to 'site.css'

Recomendations

1. Keep Selectors Short

Bad code

header nav ul li a {...}
button strong span {...}
button strong span .callout {...}

Correct code

.navigation-link {...}
.btn {...}
.btn-strong {...}
.callout {...}

2. Don't use selectors of elements.

Bad code:

<section class="module"> 
	<div>some</div>
</section>

.module {
	...
}
.module div {
	...
}

We don't know what is this style and what is level of container in module with applyed style. Use children subclass and apply it to child element.

Correct code:

<section class="module"> 
	<div class="module-header">some</div>
</section>

.module {
	...
} 
.module-header {
	...
}

In this case we know that it is a header of module on the first level of child, and could reuse module as child of same module without changes.

3. Use subclasses

Bad code:

#header > .logo { ... }
#footer > .logo { ... }

In this case we bind .logo to context of html.

Correct code:

.logo {}
.logo-large { ... }
.logo-small { ... }

In this case we could reuse small and large .logo without binding to context.

4. Use @extend instead @include if possible.

Bad code:

@mixin top-bar-icons {
  position: absolute;
  height: 100%;
  padding: $icon-button-padding;
  top: 0;
  margin-top: 0;
  right: 0;
  font-size: 14px;
}
.help {
  @include top-bar-icons();
  width: 45px;
}

Correct code:

.top-bar-icons {
  position: absolute;
  height: 100%;
  padding: $icon-button-padding;
  top: 0;
  margin-top: 0;
  right: 0;
  font-size: 14px;
}
.help {
  @extend .top-bar-icons;
  width: 45px;
}

5. If you should to specify the state style for any module, but you not have enough current created styles, use new submodule style instead of context selectors.

Bad code

.is-active {
	color: red;
}

.tab {
	background-color: blue;
}

.tab.is-active {
	background-color: green;
}

Correct code:

.is-active {
	color: red;
}

.tab {
	background-color: blue;
}

.is-tab-active {
	background-color: green;
}

or

.is-tab-active {
	@extend .is-active;
	background-color: green;
}

6. Do not use states for parent modules.

Bad code

<div class="sidebar is-active">
	<div class="sidebar-button">btn</div>
	<div class="sidebar-dropdown">...</div>
</div>

.sidebar > .sidebar-button {
	...
}
.sidebar > .sidebar-dropdown {
	...
}

Correct code

<div class="sidebar">
	<div class="sidebar-button is-active">btn</div>
	<div class="sidebar-dropdown is-active">...</div>
</div>

.is-active {...} 
.sidebar-button {...}
.sidebar-dropdown {...}

or

<div class="sidebar">
	<div class="sidebar-button is-sidebar-button-active">btn</div>
	<div class="sidebar-dropdown is-sidebar-dropdown-active">...</div>
</div>

.is-sidebar-button-active {...} 
.is-sidebar-dropdown-active {...}
.sidebar-button {...}
.sidebar-dropdown {...}

7. Use double quotas in @import directives.

Bad code

@import 'file.css';

Correct code

@import "file.css";