# CSS best practices

## Общие требования

## code style

1. Использовать одинарные кавычки.

10. Имена.

Использовать `lower-case-hyphenated` (то есть не `mySuperAwesomeElement` и не `my_super_awesome_element`)

## design handover

5. Для всех интерактивных элементов (ссылки, кнопки, дропдауны, инпуты, селекты) дизайнер может прорисовать отдельные состояния и спрятать в ближайшем слое — всегда проверять для каждого элемента, есть ли отрисованное состояние.

6. Дизайнеры могут ошибаться — иногда надо делать запросы на изменение макета, если они нарисовали что-то переусложненное.

## testing

- check `a:visited` color
- check for dead css that aren't used in rendering

## best practices - basic
26. Use Shorthand `margin: 8px 7px 0px 5px`

15. mobile-first

- Имена должны отражать смысл, а не описание стилей (`"loading"`, а не `"big-yellow-spinny-thing"`)
2. Перед началом работы обязательно четко знать все приоритеты селекторов и все 4 вида возможных отношений.

Отношения элементов между собой могут быть:

    div p – элементы p, являющиеся потомками div
    div > p – только непосредственные потомки
    div ~ p – правые соседи: все p на том же уровне вложенности, которые идут после div
    div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть)

3. Все правила должны быть разбиты на разные файлы по страницам и блокам, каждый файл должен быть не длиннее, чем 1000 строк.

7. Пытаться по максимуму делать сайт резиновым (ставьте ширину в процентах и выставляйте `max-width`, `min-width`) — прибегайте к фиксированной ширине элемента, только если по макету от этого никак не уйти.

1. check for redudnant horziontal scrollbars

8. Все стили одного блока должны быть в одном месте и отсортированы по порядку их расположения на странице.
1. Не использовать `!important`.

4. avoid negative `margin` when possible

18. Avoid overly-specific selectors

    article.main p.box {
      border: 1px solid #ccc;
    }

20. Using Variables.

- `@use 'code'` instead of `@import`
23. Using [Maps and Lists](https://sass-lang.com/documentation/values/maps)
24. Using [Built-in Modules](https://sass-lang.com/documentation/modules)
38. Don't use MAGIC NUMBERS.

## best practices

#### animations
- Add CSS3 Animations last in class
- don't use `all` - split on props

#### general
2. Не использовать `position: absolute` для стилизации, где это можно заменить другими подходами.

3. Не двигать элемент при помощи `top`, `left`, `right` или `bottom` при `position: relative`, где это можно заменить другими подходами.

5. Избегать фиксирования высоты.

Почти всегда использование фиксированного в пикселях, процентах и других единицах `height` является признаком неправильного кода. Это делает очень неочевидным поведение элементов, которые следуют за зафиксированным по высоте.

Когда это все-таки может быть нужно:

У элемента надо ручками подстроиться под высоту потомков, которых "убрали" из общего потока. "Убрать" из потока можно через `position: absolute`, например. Это может быть слайдер, у которого потомки крутятся как раз через позиционирование, а не смещение margin-ом

6. Избегать фиксированных выравниваний.

Если блок должен быть отцентрирован (хоть по горизонтали, хоть по вертикали), то центрировать его динамически, а не фиксированным `margin-top`.

7. Прописывать дефолтный цвет фона, цвет шрифта, `font-size` и семейство шрифта у `html`.

9. Добавлять элементу `cursor: pointer`, если он кликабелен и по умолчанию этого не поддерживает.

12. При установке элементу `outline: none` обязательно выставить стили для `:focus` этому элементу.

13. Все использования `@media` должны идти сразу после основных правил элемента, для того чтобы можно было увидеть все правила и все возможные состояния элемента в одном экране без прокручивания.

16. start with general styles, eg `_content.scss`
* `body`
* `p`
* `h1`, `h2`, `h3`, `h4`, `h5`
* `ul` and `ol`
* The table properties
* Links

17. Использовать служебные классы (применять к множеству различных элементов)

    .left {float:left}
    .right {float:right}

22. Using [At-Rules](https://sass-lang.com/documentation/at-rules).
33. Extending Classes with @extend.
35. use leading zeros before, eg 0.5rem
39. uppercase constants
46. Maximum Nesting: Three Levels Deep
49. Use 0 instead of none.

    .foo {
      border: 0;
    }

## Шрифты

2. Разные начертания одного и того же шрифта подключайте под одним именем, но для разных font-weight и font-style.

    @font-face {
      font-family: "Lato";
      src: url("../fonts/lato-regular.woff2"), url("../fonts/lato-regular.woff");
      font-weight: 400;
      font-style: normal;
    }
    @font-face {
      font-family: "Lato";
      src: url("../fonts/lato-italic.woff2"), url("../fonts/lato-italic.woff");
      font-weight: 400;
      font-style: italic;
    }
    @font-face {
      font-family: "Lato";
      src: url("../fonts/lato-light.woff2"), url("../fonts/lato-light.woff");
      font-weight: 300;
      font-style: normal;
    }
    @font-face {
      font-family: "Lato";
      src: url("../fonts/lato-lightitalic.woff2"),
        url("../fonts/lato-lightitalic.woff");
      font-weight: 300;
      font-style: italic;
    }