Skip to content

Latest commit

 

History

History
110 lines (99 loc) · 2.73 KB

checklist.md

File metadata and controls

110 lines (99 loc) · 2.73 KB
Raw
  1. [STYLES] - Get used to style all elements using classes. And don't increase selectors specificity unless completely necessary.
  2. [STYLES] - Remember to use fallback fonts - alternative font-family in case the main one doesn't work like this
  3. [CODE STYLE] - Add empty lines between multiline sibling blocks of HTML. But don't add empty lines 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>
  1. [TASK] - Make sure to reuse part of Stars task here, and keep it operational in case you change block modifier.
  2. [BEM] - Check your BEM structure using BEM-linter (npm run lint) and this list
  3. [BEM] - Don't make BEM structure too complicated. You don't need to create separate blocks for anything other than card itself and stars.
  4. [BEM & STYLES] - Don't add external styles (positioning or margins) to BEM-blocks. Use mix where necessary and move all external styles under element selector.

GOOD example

<!--index.html-->
<div class="container">
  <div class="container__card card">
    ...
  </div>
</div>
/*styles.css*/
.container__card {
  margin: 48px 24px;
}

.card {
  font-size: 16px;
  background-color: purple;
}

BAD example

<!--index.html-->
<div class="container">
  <div class="card">
    ...
  </div>
</div>
.card {
  margin: 48px 24px;
  font-size: 16px;
  background-color: purple;
}
  1. [STYLES] - Don't hardcode exact height size. Add necessary paddings according to mockup and let content dictate the container size.
  2. [STYLES] - Don't add new border to the element on hover. Add default transparent border of the same width, and change its color on :hover
  3. [STYLES] - Be consistent with your margins. Add only top or bottom, don't add both.
  4. [FILE STRUCTURE] - You should create separate file for each BEM block
  5. [SEMANTICS] - Use semantic tags like h2, p ...
  6. [SEO] - alt atribute should describe the image if the image contains information (better description you have - better for you :))

REALLY BAD example:

<img alt="image" />

STILL BAD example:

<img alt="phone" />

GOOD example:

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