Skip to content

Latest commit

 

History

History
374 lines (274 loc) · 4.54 KB

CSS.md

File metadata and controls

374 lines (274 loc) · 4.54 KB

CSS Code Style Guide

Tip: Use csscomb.js with our .csscomb.json to auto-format and CSSLint with our .csslintrc.

Table of Contents

Indentation

Use soft-tabs with two spaces:

CSScomb rule: "block-indent": " "

/* good */
.btn {
	color: #fff;
}

/* bad */
.btn{
		color: #fff;
}

Basic syntax

Always use double quotation marks:

CSScomb rule: "quotes": "double"

/* good */
.btn {
	background-image: url("textura.jpg");
	font-family: "Helvetica Neue", sans-serif;
}

/* bad */
.btn {
	background-image: url('textura.jpg');
	font-family: 'Helvetica Neue', sans-serif;
}

Include a space before opening the rule keys:

CSScomb rule: "space-before-opening-brace": " "

/* good */
.btn {
	color: #fff;
}

/* bad */
.btn{
	color: #fff;
}

Closes the keys on a new line:

CSScomb rule: "space-before-closing-brace": "\n"

/* good */
.btn {
	color: #fff;
}

/* bad */
.btn {
	color: #fff;}

Include a space after the : declarations:

CSScomb rule: "space-after-colon": " "

/* good */
.btn {
	color: #fff;
}

/* bad */
.btn {
	color:#fff;
}

Always use one ; At the end of the declarations:

CSScomb rule: "always-semicolon": true

/* good */
.btn {
	color: #fff;
}

/* bad */
.btn {
	color: #fff
}

Always keep one declarations per line:

CSScomb rule: "space-after-selector-delimiter": "\n"

/* good */
.nav,
.footer,
.btn {
	color: #fff;
}

/* bad */
.nav, .footer, .btn {
	color: #fff;
}

Separate the rules by a blank line:

/* good */
.btn {
	color: #fff;
}

.nav-item {
	color: #fff;
}

/* bad */
.btn {
	color: #fff;
}
.nav-item {
	color: #fff;
}

Always use lowercase:

CSScomb rule: "element-case": "lower"

/* good */
.nav-item {
	color: #fff;
}

/* bad */
.Nav-item {
	color: #fff;
}

Use dash to separate names:

/* good */
.nav-item {
	color: #fff;
}

/* bad */
.nav_item {
	color: #fff;
}

Whenever using hexadecimal values ​​always use reduced:

CSScomb rule: "color-shorthand": true

/* good */
.nav-item {
	color: #fff;
}

/* bad */
.nav-item {
	color: #ffffff;
}

Do not specify units when the value is zero:

CSScomb rule: "unitless-zero": true
CSSLint rule: zero-units

/* good */
.nav-item {
	padding: 0;
}

/* bad */
.nav-item {
	padding: 0px;
}

Do not use values ​​starting with zero:

CSScomb rule: "leading-zero": false

/* good */
.nav-item {
	transition: color .3s;
}

/* bad */
.nav-item {
	transition: color 0.3s;
}

Selectors

Use function-related names never style:

/* good */
.spacing-default {
	margin-left: 10px;
}

/* bad */
.margin-left {
	margin-left: 10px;
}

Never use ID for selectors:

CSSLint rule: ids

/* good */
.btn {
	color: #fff;
}

/* bad */
#btn {
	color: #fff;
}

Declarations

Declarations grouped by type:

CSScomb rule: "sort-order": [...]

/* good */
.container {
  font-size: 1em;
  font-weight: bold;

  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 130px);

  width: 100%;
  height: 100%;

  color: #000;
  border: 1px solid #000;
  background: #ff567e;
}

/* bad */
.container {
  display: grid;
  font-size: 1em;
  color: #000;
  grid-template-columns: repeat(7, 1fr);
  background: #ff567e;
  grid-template-rows: repeat(5, 130px);
  width: 100%;
  font-weight: bold;
  height: 100%;
  color: #000;
  border: 1px solid #000;
  height: 100%;
}

Custom Properties

Use function-related names never style:

/* good */
:root {
	--highlight-color: blue;
	--secondary-color: red;
}

/* bad */
:root {
	--blue: blue;
	--red: red;
}

Tips

  • Configure your editor to show blank spaces
  • Remove blank spaces
  • Use a .editorconfig to help keep the code convention:

References

<-- Back