Верстающий Фатеж

Топ 5 ошибок в CSS

20 июня 2015

Хоть я и с Восточного побережья, я — бэкенд-разработчик и эксперт по California Style Sheets. Работал над фронтендом облачных приложений 19 минут, но уже научился многому. Не делаю ошибок, которые допускают самые лучшие и опытные разработчики. Вот топ 5 ошибок в C.S.S, которых следует избегать, чтобы сберечь время.

Недостаточно специфичные селекторы

Классы — для одинаковых элементов. Одинаковые элементы — это большая проблема с избыточностью данных. Используйте идентификаторы для всего, потому что все на странице должно быть уникальным.

/* Плохо */
.pull-quote {
  font-style: italic;
}

/* Хорошо */
#first-pull-quote-about-pizza-with-sausage {
  font-style: italic;
}

Виртуальные единицы измерения

px, pt, em — виртуальные единицы измерения. Ими не измерить объекты из реального мира. Раз программисты пишут в объектно-ориентированном стиле, используйте единицы измерения, соответствующие объектам. Если картинка в длину ровно три хот-дога, то и в C.S.S используйте эту единицу измерения. Семантика, старичок!

/* Плохо */
img#first-image-of-three-hot-dogs-laid-end-to-end {
    width: 50px;
}

/* Хорошо */
img#first-image-of-three-hot-dogs-laid-end-to-end {
    width: .5threehotdogslaidendtoend;
}

Лаконичные имена у идентификаторов

Мы создаем более семантичный Интернет, поэтому код должен рассказывать больше о контенте. Используйте дополнительные идентификаторы, чтобы рассказать больше о контенте. Даже если не пользуетесь ими в C.S.S или JarvisScript, используйте их ради доступности сайта:

<!-- Плохо -->
<img src="hotdogs.bmp" id="three-hot-dogs-laid-end-to-end" />

Почему именно три хот-дога? Что произошло? Пользователю нужно больше информации. Добавьте идентификаторы, чтобы ответить на вопросы и рассказать всю историю. Разделяйте их пробелами, как учил нас сэр Тим Бернерс-Ли:

<!-- Хорошо -->
<img src="hotdogs.bmp" id="three-hot-dogs-laid-end-to-end because-they-fell-that-way after-my-cat-tripped-me" />

Весь CSS в одном месте

Нерадивые программисты советуют держать весь C.S.S в одном файле. Если этот файл будет недоступен, то сайт останется без дизайна. Чтобы избежать этого, раскидайте C.S.S по разным файлам и добавьте их в <head> и в <style>.

Правила без приоритетов

Часть правил C.S.S особенно важна. Используйте !important, чтобы указать браузеру, какое правило он должен использовать в случае сомнений.

Кроме того, если вы не используете !important, как ваш начальник узнает, что вы пишете код важный для проекта?