HTML/CSS/SCSS rules

Supported browsers

By default, we only support modern versions of Chrome, Firefox, Edge, Safari, and modern versions of mobile browsers.

TIP

Use https://caniuse.com to make sure the CSS property you want to use has sufficient browser support.

Basic syntax

Stick to the following basic syntax:

.nav-top,
.nav-bottom {
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.5rem 1rem;
	margin: 0;
	font-weight: bold;
	background: url(../images/example.png);
}

Pay attention to the following nuances:

• The syntax of the class name is aaa-bbb-ccc
• There is a space after each colon
• At the end of each line there is a ;
• Quotes are not used in url()
• Each selector starts on a new line (.nav-top, .nav-bottom)

Use SCSS and Bootstrap

Always use SCSS instead of CSS.

Since Bootstrap is also written in SCSS, you have the ability to customize the design by simply changing the available Bootstrap variables, as well as using mixins from Bootstrap.

Your code is good if:

• You always use nesting.
• Your code is based on variables and mixins - both from Bootstrap and your own.
• You never override the properties of any class with CSS if you can do it through Bootstrap variables.
• You know well what variables and mixins exist in Bootstrap and only create your own when they don't have an equivalent in Bootstrap.

TIP

The list of variables available in Bootstrap should always be at hand - put them in Bookmarks or pin them in tabs.

Units of measurement

All values, except for the exceptions below, must be specified in rem or %.

Exceptions:

• Grid breakpoints and container width must be set in px
• Borders and shadows can be set in px
• line-height must be set without units of measure
• Zero values should be set without units of measure

TIP

To convert px to rem, you can use PX to REM calculators.

If you're not sure which units to use, just open any page from the official Bootstrap documentation in the Chrome Dev Tools and see how it's done.

Correct:

.aaa {
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.5rem 1rem;
	margin: 0;
	border: 1px solid #ccc;
}

Names of classes and identifiers

Always use syntax like aaa-bbb-ccc for CSS class names and identifiers. This syntax is the industry standard and provides the best readability:

Correct:

.aaa-bbb-ccc {}

Wrong:

/* Wrong: words "demo" and "image" are not separated */
.demoimage {}
  
/* Wrong: using underscore instead of hyphen */
.error_status {}

/* Wrong: using camelCase instead of hyphen */
.errorStatus {}

Semantics

Use HTML the way it was meant to be. Use the elements as intended:

<h1-h5> for headings, <p> for paragraphs, <a> for links, etc.

This makes the code easier to read, edit, and maintain.

Wrong:

<div onclick="goToRecommendations();">All recommendations</div>

Correct:

<a href="recommendations/">All recommendations</a>

Style attribute

Using style attribute for styling is strictly forbidden as you mix styles and markup and end up with hard to read code and very hard to make changes.

All styles should be applied using CSS selectors and be stored in appropriate files.

Correct:

html

<div class="content-container">
	...
</div>

css

.content-container
{
	width: 172px;
	padding: 10px 10px 15px 10px;
}

Wrong:

<div style="width: 172px; padding: 10px 10px 15px 10px;">
	...
</div>

Use the style attribute only to implement JavaScript effects (for example, dynamically changing the position of an element, animation, etc.)

Formatting

Create a new line for each block, table, or list element, and indent each child element.

Also put indents for all elements nested in a block or table element.

Correct:

<blockquote>
	<p><em>Space</em>, the final frontier.</p>
</blockquote>

Code smells in CSS

Be sure to read the following articles about common mistakes when writing CSS styles:

• Code Smells in CSS
• Code Smells in CSS Revisited