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;
}

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

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

// 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

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

...

...

• 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.

• 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

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

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

• 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-namemodifier-name
block-nameelement-namemodifier-name

Search

unit-namemodifier-namemodifier-value
unit-name_element-namemodifier-name_modifier-value

Search

Searh

• 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: headerinput.js and headerthemeislands.css.

• 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

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

function HelloWorldComponent() { 
  return 
Hello World!
; 
}

scoped> 
.example { color: red; }

hi