SMACSS

1. Base
2. Layout
3. Module
4. State
5. Theme

html, body, form { margin: 0; padding: 0; }

#header, #article, #footer {
  width: 960px;
  margin: auto;
}
.l-grid {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.sidebar {}
.callout {}

.sidebar-menu {}

.sidebar {}
.sidebar.is-collapsed {}

//module-name.css
.mod {
  border: 1px solid;
}
//theme.css
.mod {
  border-color: blue;
}

Meaningful CSS

button,
[role=button] {
  ...
}

What’s Your Name

Enter

Functional CSS

• Simplicity — simple styles are easier to remember and use.
• Reusable classes — it means that the number of rules in classes is minimal, because more rules leads to poor re-usability.
• Classes have no side effects — the same class always performs the same role and does not change anything it was not designed for.

// CSS
.questionCard {
  position: relative;
  margin-top: $ scale1;
  padding: $ scale2;
  background-color: #fff;
  box-shadow: $ boxShadow-2;
}
// HTML
... div>


Turns into:



// CSS
.u-relative {
  position: relative;
}
.u-mt1 {
  margin-top: $ scale1;
}
.u-p2 {
  padding: $ scale2;
}
.v-bg-white {
  background-color: #fff;
}
.b-bs2 {
  box-shadow: $ boxShadow-2;
}
// HTML
...


BEM
BEM (Block, Element, Modifier) — a component-based approach to web development. Its fundamentals include separation of an interface into separate components. It allows you to develop interfaces of any complexity quickly and easily and reuse existing code, avoiding copy pasting.

Block


Functionally independent, reusable component in a page. In HTML, blocks are represented using the “class” attribute.



A block’s name describes its meaning (“what is it?” — “menu”, “button”), not visual state (“does does it look like?” — “red”, “big”). 


Here’s an example:



...



...



A block must not have an effect on its environment, i.e you should not set any external geometry for units (margins, border and other properties that affect its dimensions) and positioning.
In BEM, it is not recommended to use tags or id based selectors.
Blocks can be nested.
Any nested structure is allowed.


Element


An element is a part of a block that cannot be separated from it.




An element’s name describes its meaning ( “what is it?” — “Item”, “the text”: text), not visual state ( “what does it look like?” — “Red”, “big”).
The structure of the full name of an element is: block-name__element-name. The element’s name is separated from the block’s name with two underscores: “__”.




 
 
 
 Search


When should I create a block and when an element?




If the code can be reused and doesn’t depend on the implementation of other components on the page, it should be a block.
If the code cannot be used independently without a parent (block), you should probably create an element.



The exception is elements that, in order to simplify development, require separation into smaller parts, or sub-elements. The BEM methodology does not allow for creation of elements with elements. In this case, instead one has to create a utility block.

Modifier


Modifiers determine the appearance, state or behavior of a block or element.




A modifier’s name describes the appearance (“what size?”, “what theme?”, etc. — “size”: size_s, «theme»: theme_islands), state (‘how different from the rest? “-” off “: disabled, “focused»: focused) and behavior (“how should it behave?”, “how should it interact with users?” — “direction”: directions_left-top).
A modifier’s name is separated from the block’s name by one underscore: “_”.


Types of Modifiers


Boolean




Used when the presence or absence, and not the value, of a modifier is important. For example: “off”: disabled. It is agreed that the presence of a boolean modifier is equivalent to its value being set to true.
The structure of the full name of a boolean modifier follows the following convention:



block-name_modifier-name
block-name__element-name_modifier-name


Here’s a full example:




  
  
  Search

Key-Value


Used when a modifier’s value is important. For example, “menu with theme islands»: menu_theme_islands. The structure of the full name of a key-value modifier follows the following convention:



unit-name_modifier-name_modifier-value
unit-name__element-name_modifier-name_modifier-value


Full example:




  
  
  Search





  
  Searh

File Structure


The CSS naming conventions used in BEM can also be applied to your project’s directory and file structure .


Blocks, elements and modifiers are split into separate files, allowing us to include them only when needed. The key points are:




One block— one directory.
Block names correspond to their directores. For example, a “header” block — directory “/header”, “menu” block — directory “/menu”. The implementation of the blocks is split into separate files, for example: header.css and header.js.
A block directory is the root directory for all sub-directories of included elements and modifiers.
An element’s directory name starts with double underscores: “__”. For example: “header/__logo/” or“menu/__item/”. A modifier’s directory name begins with a single underscore. For example, “header/_fixed/” or “menu/_theme_islands/”.
The Implementation of modifiers and elements is split into separate files. For example: header__input.js and header_theme_islands.css.


Namespaces in CSS


It’s also worth mentioning CSS Namespaces. Namespace can be added to all of the above conventions.


0- — objects

c- — components, finished UI elements

u- — utilities

t- — themes

s- — scopes. Just like themes, but deal less with visuals.

is-, has- — state of the elements
_ — for hacks and workarounds.

js- — JavaScript related classes

qa- — classes that are used for quality assurance and tests


Summary


To summarize: while interesting from an educational point of view, Meaningful CSS and Functional CSS seem a little awkward to use in practice. While Meaningful CSS requires us to change our HTML and makes it tricky to customize individual components, Functional CSS results in a very long and hard to decipher values for “class” attributes.


SMACCS gives us a solid pragmatic foundation for naming, but doesn’t offer much in the way for naming conventions of classes inside components (or modules). BEM does take care of this, but seems a bit verbose and heavy. As such, SMACCS is probably a good fit for smaller projects, while BEM is ideally suited for larger codebases.


It’s also worth noting that all front end frameworks now tend to encourage the use of components and offer different means of co-locating the styles with the component HTML and logic. This approach eliminates a common problem of having left over, unused CSS selectors. For example in React, one can inline styles defined in JS:



const divStyle = { 
  color: 'blue', 
  backgroundImage: 'url(' + imgUrl + ')', 
}; 


function HelloWorldComponent() { 
  return 
Hello World!
; 
}


In Vue.js on the other hand, the style and code are separated and scoped:



scoped</strong>> 
.example { color: red; }

 
  
hi
 



The scoping means that you can use the same class name in different components, since the class names are transformed during the build process. This is similar to style encapsulation in Web Components. So, if you end up using these frameworks, then the CSS naming conventions in use can be drastically simplified.