Skip to content

Latest commit

 

History

History
695 lines (546 loc) · 13.1 KB

html-css-code-style-rules.md

File metadata and controls

695 lines (546 loc) · 13.1 KB

HTML Formatting

Use 2 spaces for indentation in your file (not a tab character)

to make sure your formatting will look the same everiwhere

Remember about correct indentation between parent and child elements

Each level of nesting, including text, contained inside the element, requires 2-space offset. Also blank line shouldn't be between parent and child elements.

GOOD example

<body>
  <div>
    <p>
      Awesome text
    </p>
  </div>
</body>

BAD example

<body>
<div>
<p>
Awesome text
</p>
</div>
</body>
Add empty lines between multiline sibling blocks of HTML

To add some "air" and simplify reading. But don't add them between parent and child elements.

GOOD Example

<ul>
  <li class="nav__item">
    <a href="#home">Home</a>
  </li>

  <li class="nav__item">
    <a href="#shop">Shop</a>
  </li>

  <li class="nav__item">
    <a href="#contacts">Contacts</a>
  </li>
</ul>

BAD Example

<ul>

  <li class="nav__item">
    <a href="#home">Home</a>
  </li>
  <li class="nav__item">
    <a href="#shop">Shop</a>
  </li>
  <li class="nav__item">
    <a href="#contacts">Contacts</a>
  </li>

</ul>
Keep your attributes correctly formatted

If the HTML-element has long attribute values or number of attributes is more than 2 - start each one, including the first, on the new line with 2-space indentation related to tag. Tag’s closing bracket should be on the same level as opening one.

GOOD Example

<input
  type="text" 
  name="surname" 
  id="surname"
  required
>

BAD Examples

<input type="text" name="surname" 
       id="surname" required>

<input type="text" 
       name="surname" 
       id="surname"
       required>

<input
type="text" 
name="surname" 
id="surname"
required>

<input
  type="text" 
  name="surname" 
  id="surname"
  required>
Lines of code have 80 chars max

It is just easier to read such lines

HTML Content

Use semantic tags where possible

Like header, section, article, p. It improves your page SEO and helps screen readers. div and span does not have any meaning

alt attribute should describe the image content

GOOD example

<img alt="Samsung Galaxy S22 2022 8/128GB Green" />

REALLY BAD example

<img alt="image" />

STILL BAD example

<img alt="phone" />
Class names represent the meaning of the content (not the styles or tag names)

GOOD example

<nav class="nav">
  <ul class="nav__list">
    ...
    <li class="nav__item">
      <a href="#apple" class="nav__link">Apple</a>
    </li>
  </ul>
</nav>

BAD example

<nav class="no-padding">
  <ul>
    ...
    <li class="li">
      <a href="#apple" class="a-last-no-decoration">Apple</a>
    </li>
  </ul>
</nav>
Don't use spaces in links

Have you seen any link with literal space in it on the Internet? Remember, anchor links start with #

CSS

Don't use * selector (it impacts performance)

Set styles only for elements that require them. Zeroing out your margins, paddings or other styles with '*' is still inefficient for browser.

Don't use tag names for styling (except html and body)

Style all elements using .classes and if needed with :pseudo-classes, pseudo-elements and [attributes]

HTML Example

<nav class="nav">  
  <ul class="nav__list">  
    ...  
  <ul>  
</nav>

GOOD CSS Example

.nav__list {
  list-style: none
}

BAD CSS Examples

ul {
  list-style: none
}

nav ul {
  list-style: none
}
Remember to use fallback fonts - alternative font-family in case the main one doesn't work

Explanation

Be consistent with your margins (Add only top or bottom, but not both)

To avoid potential margin collapse

Don't fix container size (if there is no such a requirement)

Let the content size dictate it. To avoid overflow or accidental scroll bar

Hightlight clickable element with cursor: pointer and some :hover styles

It improves UX, and help users understand the page better

BEM

Create a separate file per each styles block
  • If styles block has the same name as BEM block - create separate file for it
Follow naming convention block__element--modifier 
<div class="block-name block-name--modifier-name--modifier-value">
  <p class="block-name__element-name block-name__element-name--modifier-name">
    text
  </p>
</div>

SASS

Check your import syntax. It's differs from plain CSS 
/* CSS */
@import url("filename.css");
/* SCSS */
@import "filename";
Use variables for the main values
  • Create variables only when value repeats more than once.
  • Use descriptive names.
Don't use loops for styles that stay the same
  • display and position are perfect examples for styles that stay the same.
Use mixins, functions, etc.
  • These are powerful tools to get rid of repeatable code, but don't use them everywhere.
Use nesting
  • Write pseudo-class, pseudo-element selectors inside general selector. As well as media queries.

GOOD Example

&__buy-link {
  display: flex;
  margin-top: 20px;

  &:hover {
    color: blue;
  }
}

BAD Example

&__buy-link {
  display: flex;
  margin-top: 20px;
}

&__buy-link:hover {
  color: blue;
}

Typical BEM Mistakes in HTML

An Element of Another Element

An element belongs to a block, not to another element. That's why the prefix — is the name of a block, not the name of another element.

<div class="example">
  <ul class="example__list">

    <!-- Wrong -->
    <li class="example__list__item">...</li>
    
    <!-- Correct -->
    <li class="example__item">...</li>

  </ul>
</div>
Using an Element Without Its Block's Prefix

The name of an element MUST contain the name of its block.

<!-- Wrong -->
<ul class="menu">
  <li class="item">
    Only if it's not a standalone block
  </li>
</ul>

<!-- Correct -->
<ul class="menu">
  <li class="menu__item">...</li>
</ul>
Using a Modifier Instead of an Element

Double underscore is used to separate the name of a block and the name of an element.

<!-- Wrong -->
<ul class="menu">
  <li class="menu--item">...</li>
  <li class="menu_item">...</li>
</ul>

<!-- Correct -->
<ul class="menu">
  <li class="menu__item">...</li>
  <li class="menu__item">...</li>
</ul>
Using a Modifier Without the Belonging Class

A modifier must not be used without the class it modifies.

<!-- Wrong -->
<ul class="menu--mobile">
  <li class="menu__item--active">...</li>
</ul>

<!-- Correct -->
<ul class="menu menu--mobile">
  <li class="menu__item menu__item--active">...</li>
</ul>
Using a Block Modifier on an Element

A block modifier must not be used on the block's elements.

<!-- Wrong -->
<ul class="menu">
  <li class="menu__item menu--active">...</li>
</ul>

<!-- Correct -->
<ul class="menu">
  <li class="menu__item menu__item--active">...</li>
</ul>
Using a Modifier Without a Prefix

An element modifier must be preceded by the name of the element, the same is true for block modifiers.

<!-- Wrong -->
<nav class="nav fixed">
  <a class="nav__link active" href="#">
    Wrong
  </a>
</nav>

<!-- Correct -->
<nav class="nav nav--fixed">
  <a class="nav__link nav__link--active" href="#">
    Correct
  </a>
</nav>
Using an Element Inside Another Block

An element of the parent block must not be used inside a child block.

<div class="parent">
  <!-- Wrong -->
  <div class="child">
    <p class="parent__element">Text</p>
  </div>
  
  <!-- Correct -->
  <div class="child parent__element">
    <p class="child__element">Text</p>
  </div>
</div>
Using an Element Outside a Block

An element must not be used outside the block it belongs to.

<!-- Wrong -->
<div class="block">
  Content
</div>

<p class="block__element">Text</p>

<!-- Correct -->
<div class="block">
  <p class="block__element">Text</p>
</div>
Using Different Naming Conventions Within One Project

Using different naming conventions within one project is not allowed.

<!-- Wrong -->
<div class="ParentBlock ParentBlock_mobile">
  <div class="child-block child-block--active ParentBlock-element"></div>
</div>

<!-- Correct -->
<div class="ParentBlock ParentBlock_mobile">
  <div class="ChildBlock ChildBlock--active ParentBlock-element"></div>
</div>

<!-- Correct -->
<div class="parent-block parent-block--mobile">
  <div class="child-block child-block--active parent-block__element"></div>
</div>

Typical BEM Mistakes in CSS

Styling an Element in the Context of Another Element

Styles of one element must not depend on its relations with other elements.

<ul class="nav__list">
  <li class="nav__item"></li>
</ul>
/* Wrong */
.nav__list .nav__item {
  padding: 0;
}

/* Correct */
.nav__item {
  padding: 0;
}
Styling an Element Depending on its Context

Styles of an element must not depend on the state of another element. BUT styling can depend on the state of the block.

<ul class="nav__list nav__list--active">
  <li class="nav__item"></li>
</ul>
/* Wrong */
.nav__list--active .nav__item {
  padding: 0;
}

/* Correct */
.nav--active .nav__link { /* Can be styled based on the state of the block */
  padding: 0;
}

.nav:hover .nav__link {
  padding: 0;
}
<nav class="nav nav--active">
  <a class="nav__link" href="#">1</a>
</nav>
Increasing an Element Specificity

You must not add the block selector to an element selector not to increase specificity. Element must always be placed inside its block in HTML.

<nav class="nav">
  <ul class="nav__list">...</ul>
</nav>
/* Wrong */
.nav .nav__list {
  padding: 0;
}

/* Correct */
.nav__list {
  padding: 0;
}
Increasing Modifier Specificity

You must not use the main class together with a modifier in a selector not to increase specificity. Modifier must always be added in addition to the main class in CSS in HTML.

/* Wrong */
.burger-menu.burger-menu--active {
  background-color: transparent;
}

/* Correct */
.burger-menu--active {
  background-color: transparent;
}
Styling a Block in the Context of Another Block

The styles of a block must not depend on where it is located.

<div class="parent">
  <div class="child"></div>
</div>
/* Wrong */
.parent .child {
  margin-bottom: 10px;
}

/* Correct */
.parent__element { /* use mix */
  margin-bottom: 10px;
}
<div class="parent">
  <div class="child parent__element"></div>
</div>
Setting the Block's External Geometry or Positioning

A block must not set its position or have margins.

<div class="parent">
  <div class="child">...</div>
</div>
/* Wrong */
.child {
  position: absolute;
  top: 0;
  margin: 10px;
  padding: 10px;
}

/* Correct */
.parent__element { /* use mix */
  position: absolute;
  top: 0;
  margin: 10px;
}

.child {
  padding: 10px;
}
<div class="parent">
  <div class="child parent__element">...</div>
</div>