Documentation

Rocket.Chat Less Styleguide

Comments

  • Prefer line comments (//) to block comments.
  • Prefer comments on their own line. Avoid end-of-line comments.
  • Write detailed comments for code that isn’t self-documenting:
    • Uses of z-index
    • Compatibility or browser-specific hacks

Formatting

  • Use tabs for indentation
  • Use dashes over camelCasing in class names.
  • Prefer to not use ID selectors
  • When using multiple selectors in a rule declaration, give each selector its own line.
  • Put a space before the opening brace { in rule declarations
  • In properties, put a space after, but not before, the : character.
  • Put closing braces } of rule declarations on a new line
  • Put blank lines between rule declarations, but not in nesting selectors.
  • Put nesting after all properties.
  • Try to not use !important.
  • Lowercase, always :)

Bad

blockquote {
	.clearfix;
	margin: .5em 0;
	&:first-child {
		margin-top: 0;
	}
	&:last-child {
		margin-bottom: 0;
	}
	padding-left: 10px;
	position: relative;
	&:before {
		content: ' ';
		width: 4px;
		position: absolute;
		border-radius: 2px;
		left: 0;
		top: -1px;
		bottom: -1px;
	}
}
.login-terms {
	font-size: smaller;
	width: 520px;
	padding: 10px;
	max-width: 100%;
	margin: auto;
	a {
		font-weight: bold !important;
		text-decoration: underline;
	}
}

Good

blockquote {
	.clearfix;
	margin: .5em 0;
	padding-left: 10px;
	position: relative;

	&:first-child {
		margin-top: 0;
	}

	&:last-child {
		margin-bottom: 0;
	}

	&::before {
		content: ' ';
		width: 4px;
		position: absolute;
		border-radius: 2px;
		left: 0;
		top: -1px;
		bottom: -1px;
	}
}

.login-terms {
	font-size: smaller;
	width: 520px;
	padding: 10px;
	max-width: 100%;
	margin: auto;

	a {
		font-weight: bold;
		text-decoration: underline;
	}
}

Selectors

Create an empty line before selectors.

Bad

.class {
	border: 0;
}
.second-class: {
	text-align: right;
}

Good

.class {
	border: 0;
}

.second-class: {
	text-align: right;
}

Use a single space after selectors.

Bad

.class{
	border: 0;
}

Good

.class {
	border: 0;
}

Add an empty line before nested selectors.

Bad

.class {
	border: 0;
	&.another-class {
		color: #ffffff;
	}
}

Good

.class {
	border: 0;

	&.another-class {
		color: #ffffff;
	}
}

Use an empty line before non-nested selectors.

Bad

.class {
	border: 0;

	&.another-class {
		color: #ffffff;
	}
}
.logo {
	display: block;
}

Good

.class {
	border: 0;

	&.another-class {
		color: #ffffff;
	}
}

.logo {
	display: block;
}

Don’t add whitespaces inside of the brackets within attribute selectors.

Bad

.input[ type="text" ] {
	border: 0;
}

Good

.input[type="text"] {
	border: 0;
}

Don’t add a whitespace between operators within attribute selectors.

Bad

.input[type = "text" ] {
	border: 0;
}

Good

.input[type="text"] {
	border: 0;
}

Always use a single space between the combinators of selectors.

Bad

.class>.button {
	font-size: 1rem;
}

Good

.class > .button {
	font-size: 1rem;
}

Add a newline after the commas of selector lists.

Bad

.class,  .another, .another-class {
	padding: 1.5rem;
}

Good

.class,
.another,
.another-class {
	padding: 1.5rem;
}

Don’t add a whitespace inside of the parentheses within pseudo-class selectors.

Bad

.class:not( .another ) {
	margin: 5px;
}

Good

.class:not(.another) {
	margin: 5px;
}

Double colon for applicable pseudo-elements.

Bad

.class:before {
	border-width: 2px;
}

.class:first-child {
	color: #000000;
}

Good

.class::before {
	border-width: 2px;
}

.class:first-child {
	color: #000000;
}

Properties

Don’t add empty line in first/last property or in between properties.

Bad

.room-list {

	border: 0;
	padding-left: 0;

	color: #ddfc32;

}

Good

.room-list {
	border: 0;
	padding-left: 0;
	color: #ddfc32;
}

Don’t add properties in single-line. Use one property per line.

Bad

.sumbit {color: #ffffff; background-color: #000000;}

Good

.sumbit {
	color: #ffffff;
	background-color: #000000;
}

No empty blocks.

Bad

.button {}

Good

.button {
	float: left;
}

Longhand properties must be combined into one shorthand property.

Bad

.class {
	padding-left: 12px;
	padding-top: 5px;
	padding-bottom: 8px;
}

Good

.class {
	padding: 5px auto 8px 12px;
}

Example

.class {
	border-color: #ffffff;
	border: 1px solid #000000;
}

Always add a trailing semicolon in the end of a declaration.

Bad

.another-class {
	color: #ffffff;
	padding: 2px
}

Good

.another-class {
	color: #ffffff;
	padding: 2px;
}

Add a newline after the colon of declarations.

Bad

.another-class {
	box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
}

Good

.another-class {
	box-shadow:
		0 0 0 1px #5b9dd9,
		0 0 2px 1px rgba(30, 140, 190, 0.8);
}

Don’t duplicate properties within declaration blocks.

Bad

.another-class {
	display: block;
	margin-top: 2rem;
	display: inline-block;
}

Good

.another-class {
	margin-top: 2rem;
	display: inline-block;
}

Don’t duplicate selectors along the file.

Bad

.some-class {
	display: block;
}
.another-class {
	position: absolute;
}
.some-class {
	margin-top: 2rem;
	display: inline-block;
}

Good

.some-class {
	display: block;
	margin-top: 2rem;
	display: inline-block;
}

Add a whitespace before bang (!) declaration.

Bad

.class {
	margin-left: 12px!important;
}

Good

.class {
	margin-left: 12px !important;
}

Use spaces around calc operators.

Bad

.class {
	width: calc(~"200px-1rem");
}

Good

.class {
	width: calc(~"200px - 1rem");
}

Remove units for zero lengths.

Bad

.button {
	padding: 10px 0px 0px 2px;
}

Good

.button {
	padding: 10px 0 0 2px;
}

Use a leading zero for fractional numbers less than 1.

Bad

.message-form {
	margin-right: .5rem;
}

Good

.message-form {
	margin-right: 0.5rem;
}

Don’t add trailing zeros in numbers.

Bad

.flex-tab {
	padding-bottom: 1.500rem;
}

Good

.flex-tab {
	padding-bottom: 1.5rem;
}

Don’t add newlines in strings.

Bad

.nav-link::before {
	content: "sample
		text";
}

Good

.nav-link::before {
	content: "sample text";
}

Colors

Lowercase, always.

Long notation.

Bad

.another-class {
	background-color: #FFF;
}

Good

.another-class {
	background-color: #ffffff;
}