Rocket.Chat css 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 css 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;
}