О вёрстке. Рассказывает Вера Шныренкова.

1. < Подходы к верстке />

2. <Логическая организация CSS>
- базовые (сброс браузерных стилей и вид по
умолчанию)
- общая раскладка ( сетка, основная глобальная
разметка страницы)
- переиспользуемые модули и модификаторы к ним
(элементы формы, типография и др.)
- неуниверсальные ,определенные в рамках
конкретных страниц или частей сайта блоки.

3. Разделяйте классы оформления от классов,
использующихся в JavaScript.
Можно при помощи префикса js-

4. <О внутренней организации>
Структура в именах классов:
.component-name
.component-name-modifier-name
.component-name__sub-object

5. Пример для элементов формы
.control-grp - блок(компонент)
.control-label - элемент-лейбл
.control - элемент c полем формы внутри
.control-l-size- модификатор длины поля

6. Как можно избавиться от “классянки”
?

7. Порядок сортировки css свойств
1. позиционирование, раскладка
2. поля,отступы, размеры
3. визуальное форматирование (фон, выравнивание
элементов)
4. свойства текста (шрифт, цвет, стиль и др.)

8. Пример
.component {
position:relative;
float:left;
margin: 1em 0;
padding: 1.5em;
width:25%;
border:1px solid #fff;
background:#0087c9;
text-align:center;
color:#fff;
}

9. Краткие записи:
➢ Cокращаем код цвета ( #ffffff -- > # fff)
➢ Отбрасываем единицы измерения у 0
➢ Краткая запись свойств для margin, padding и пр.

10. Определяем базовую единицу отсчета
вody {
font-size: 62.5% (10px)
or
font-size: 75% (12px)
}

11. ➢ Не привязываемся к id
➢ Не используем ! important или используем в
очень редких случаях
➢ Валидируем
➢ Тестируем