CSS-библиотека awsm.css делает HTML-страницы красивыми: добавляет отступы и поля, устанавливает размеры шрифтов, реализует адаптивность для разных устройств. Стили определяются для HTML-тегов без использования классов или id.

Очень удобно для быстрого оформления простых страниц.

Василий Половнёв дает совет о группировке правил в CSS:

Вместо того, чтобы сортировать CSS свойства, можно сгруппировать их по типу. Например, ребята из Яндекса используют 7 групп:

• позиционирование (position, top, …, z-index);
• блочная модель (display, float, …, overflow);
• размеры (width, height, margin, padding, …);
• таблицы/списки (border-collapse, list-style, …);
• визуальщина (transition, transform, cursor, text-transform, …);
• цвета (opacity, color, border, background, …);
• шрифт (font-*, line-height).

Такой CSS удобно читать и редактировать. Связанные свойства (position и z-index, margin и padding, font-size и line-height) находятся рядом. Важные группы идут первыми: позиционирование, раскладка, размеры. Когда работаешь с одной конкретной группой свойств, легче заметить дублирующиеся: повторяющийся font-size бросается в глаза в блоке из 3 свойств.

Адам Сильвер описывает свой подход к написанию поддерживаемого CSS. Основные идеи:

1. Код надо делить на модули. Модуль — это заголовок, подвал, форма поиска, текст поста. Один модуль может находиться внутри другого, но они не должны зависеть друг от друга.
2. Классы должны иметь семантические имена. Не должно быть классов red, pull-left, clearfix.
3. Вообще повторно использовать правила для разных модулей плохо. Если в двух блоках должны быть красный текст, нужно не вешать на оба класс red, а повторить нужное правило в описании каждого блока. Иначе будут появляться регрессии (изменение класса red затронет сразу все компоненты, использующие его), проблемы с состояниями (:hover, :focus) и другие проблемы. Если несколько разных компонентов всё-таки должны быть одинаковыми, селекторы можно перечислить через запятую.
4. Не нужно использовать ID для определения стилей. Их можно использовать на формах или в джаваскрипте. В CSS они не приносят пользы и только мешают, потому что правило, определенное по ID, нельзя переопределить правилом для класса.

5. Правила именования классов могут быть любыми, но они должны быть едиными. Здесь предлагают такую структуру:

   <moduleName>[-<componentName>][-<state>]

6. Имена классов для состояний и модификаторов должны содержать название модуля или компонента.

Неправильно:

<p class="myModule-title isDisabled">

Правильно:

<p class="myModule-title myModule-title-isDisabled">

Похожий подход описывают и в других местах. В стайлгайде Трелло пишут в целом то же самое, хотя есть и отличия. Например, они всё-таки дают состояниям и модификаторам имена вроде isDisabled, но при этом запрещают определять правила только для .isDisabled без указания модуля.

Хейдон Пикеринг рекомендует воздерживаться при верстке от четырех вещей:

1. Разделение на несколько CSS-файлов. В CSS важен порядок объявления правил. Поэтому если файлов будет много, придется следить, в каком порядке они подключаются.
2. Вложенность (в Sass). Файлы стилей обычно и так организованы хаотично, а вложенность даст беспорядоку еще одно измерение.
3. Размеры в пикселях. Если установить размер шрифта в пикселях, пользователь не сможет менять размер текста. Кроме того, прописать размеры элементов в em и rem проще, чем задавать разные значения в пикселях в зависимости от размера экрана.
4. Подстройка под конкретные устройства. Не надо затачивать верстку только под размеры экранов айфонов. Устройств много, у всех разные размеры, и адаптивный сайт должен хорошо отображаться везде. Точки переключения (breakpoints) должны стоять там, где этого требует контент.