04-css.md

CSS

Summary

1. Global
2. Identation
3. Commits
4. English
5. Task number
6. Status
7. Message convention
8. HTML
9. Syntax
10. Comments
11. Character Encoding
12. Attribute Order
13. Performance
14. Base Code
15. CSS
16. Syntax
17. Comments
18. Declaration Order
19. Name
20. Performance
21. Media Queries
22. Javascript
23. Syntax
24. Comments
25. Variables
26. Performance

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

⬆ back to the top

Comments

The comments before the code will always be referred to.

/* Basic comment */

/**
 * Block comment
 *
 */

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

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

⬆ back to the top

Declaration Order

The declaration of the property must be in alphabetical order.

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

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

⬆ back to the top

Name

Use camelCase compound names.

/* Good */
.mainMenu { background: #fff; }

/* Bad */
.mainmenu { background: #fff; }

For easy reading, the children are identified with the - (hífen).

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

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

For the name modifiers, use the --.

/* Good */
.mainMenu {
  background: #fff;
  margin: 10px;
}

.mainMenu--dark { background: #000; }

/* Bad */
.mainMenu { ... }
.mainMenu-dark { ... }

Choose names that give meaning its function.

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

/* Bad */
.mm { ... }
.sb { ... }

⬆ back to the top

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 {
  ...
}

⬆ back to the top

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