Skip to content

Latest commit

 

History

History
243 lines (194 loc) · 4.8 KB

checklist.md

File metadata and controls

243 lines (194 loc) · 4.8 KB
Raw

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 `` tag's `href` property

Anchor links starts with the # symbol

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 .class and if needed with :pseudo-class, pseudo-element and [attribute]

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 *vertical* margins (Add only top or only bottom margin, but not both)

Vertical margins can be collapsed in some cases

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