Skip to content

Latest commit

 

History

History
344 lines (254 loc) · 6.01 KB

07-css-code-style.md

File metadata and controls

344 lines (254 loc) · 6.01 KB

CSS Code Style

Summary

  1. Git Flow
  2. Commits
  3. Architecture
  4. Dependencies
  5. Technologies
  6. Identation (code style)
  7. CSS (code style)
  8. Javascript (code style)

Lint

Pure Node.js Sass linting. Configuration file in the root project .sass-lint.yml.

See the rules

IDE Integration

Syntax

Use double quotes.

/* Good */
[type="..."]
[class^="..."]

.item:after {
  content: "";
}

/* Bad */
[type='...']
[class^='...']

.item:after {
  content: '';
}

Use a space after the selector.

/* Good */
.item {
  ...
}

/* Bad */
.item{
  ...
}

Use a space before the property value.

/* Good */
.item {
  color: #fff;
  margin: 10px;
}

/* Bad */
.item {
  color:#fff;
  margin:10px;
}

Use the semicolon after each value.

/* Good */
.item {
  color: #fff;
  margin: 10px;
}

/* Bad */
.item {
  color:#fff;
  margin:10px
}

Use a selector per line.

/* Good */
.item,
.box {
  color: #fff;
  margin: 10px;
}

/* Bad */
.item, .box {
  color:#fff;
  margin:10px
}

If the switch has only one property, use the same line (with space before and after the property value).

/* Good */
.item { color: #fff; }

/* Bad */
.item {
  color:#fff;
}

Use hexadecimal values ​​in tiny and if you can abbreviate.

/* Good */
.item { color: #fff; }

/* Bad */
.item { color: #FFFFFF; }

Not specify the drive for value 0, except for the property rotate.

/* Good */
.item {
  margin: 0;
  transform: rotate(0deg);
}

/* Bad */
.item {
  font-size: 0em;
  margin: 0px;
}

Naming

blockName-elemName--modName--modVal

  • Names are written in CamelCase.
  • An element name is separated from a block name by a single hyphen (-).
  • Modifiers are delimited by double hyphens (--).
  • The value of a modifier is separated from its name by a double hyphen (--).

Block

Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.

This style differs from the classic one in that it uses CamelCase instead of a hyphen for separating words within BEM entity names.

Ex: mainMenu

Element

Parts of a block and have no standalone meaning. Any element is semantically tied to its block.

Ex: mainMenu-list

Modifier

Flags on blocks or elements. Use them to change appearance, behavior or state.

Ex: mainMenu--dark

Important! Double hyphen within the comment (--) is perceived as part of the comment and therefore its presence lead to error during document validation. HTML5 Specification

Comments

The comments before the code will always be referred to.

/* Basic comment */

/**
 * Block comment
 *
 */

/* ==========================================================================
   Section
   ========================================================================== */

/* Sub-section
   ========================================================================== */

Declaration Order

The declaration of the property must be in alphabetical order. Plugin CSS Comb: Atom, Sublime text, Visual Studio Code. (configuration .csscomb.json in the project root)

/* Good */
.item {
  background: #fff;
  color: #ffcc00;
  margin: 0;
  position: absolute;
}

/* Bad */
.item {
  margin: 0;
  position: absolute;
  background: #fff;
  color: #ffcc00;
}

Performance

Do not use IDs

/* Good */
.mainMenu { ... }
.sidebar { ... }

/* Bad */
#mainMenu { ... }
#sidebar { ... }

Always give preference to object orientation through classes.

/* Good */
.container { ... }
.text { ... }

/* Bad */
div { ... }
p { ... }

Do not create complexity in the inheritance and always use classes.

/* Good */
.mainMenu-list { ... }
.mainMenu-item { ... }
.mainMenu-text { ... }

/* Bad */
.mainMenu ul { ... }
.mainMenu ul li { ... }
.mainMenu ul .mainMenu-item span { ... }

Use a maximum of 3 elements when you need to change the behavior of a class, through another class.

/* Good */
.sidebar .mainMenu { ... }
.page.on .mainMenu { ... }

/* Bad */
.page .sidebar .mainMenu a { ... }

Delete spaces and comments in the production environment.

/* Good */
.mainMenu{...} .mainMenu-item{...}

/* Bad */
.mainMenu {
  ...
}

.mainMenu-item {
  ...
}

Media Queries

Always start development in Mobile first

/* Good */
.mainMenu { ... }

@media (min-width: 768px) {
  .mainMenu { ... }
}

@media (min-width: 992px) {
  .mainMenu { ... }
}

/* Bad */
.mainMenu { ... }

@media (max-width: 767px) {
  .mainMenu { ... }
}

Keep the rules to a selector on mobile devices and so too dispositos, always together.

/* Good */
.mainMenu-item { ... }

@media (min-width: 992px) {
  .mainMenu-item { ... }
}

.mainMenu-link { ... }

@media (min-width: 992px) {
  .mainMenu-link { ... }
}

/* Bad */
.mainMenu { ... }
.mainMenu-item { ... }
.mainMenu-link { ... }

@media (min-width: 992px) {
  .mainMenu { ... }
  .mainMenu-item { ... }
  .mainMenu-link { ... }
}

⬆ back to the top