Хорошие и плохие CSS-практики для начинающих
С появлением CSS3 мы получили возможность управлять медиа-выражениями, лучше работать с фоновыми изображениями и даже создавать анимации, которые быстрее загружаются на вашем веб-сайте. Эти особенности сделали жизнь каждого веб-дизайнера и разработчика гораздо проще.
Но стоит сказать, что не все веб-дизайнеры и разработчики следуют рекомендациям. Если вы хотите быть профессионалом, пишущим чистый, удобный в поддержке CSS то заведите привычку упрощать ваш код по мере разработки проекта.
Даже если вы разрабатываете веб-страницы уже какое-то время, вы не застрахованы от ряда плохих практик написания CSS, от которых лучше избавиться. Этот пост так же содержит некоторые техники, которые помогут вам получить максимальную отдачу от CSS и писать великолепные, простые в поддержке таблицы стилей.
Давайте начнем:
Плохие CSS-практики
Много раз использовать одно и то же правило
Многие начинающие используют одно и то же правило для каждого элемента. Если у вас есть необходимость создать одинаковое правило для нескольких элементов — поместите его в отдельный класс.
Примечание переводчика: спорный вопрос. Не стоит налегать на классы. Не заражайтесь классянкой.
Например, вместо того чтобы повторять правило color: blue для каждого тега и ID:
#intro1 {color: blue; font-size: 10px; font-weight: bold;}
header {color: blue; font-size: 20px; background-color: green;}
#banner {color: blue; font-size: 30px; background-image: url(images/static.jpg);}Используйте для этих целей класс:
.blue {color: blue;}Использовать одинаковый ID для нескольких элементов
Когда пишете CSS, присваивайте ID только одному элементу в HTML. Для нескольких элементов используйте атрибут класса.
Прим. переводчика: Проще говоря ID должен быть уникальным.
Например вместо:
<p id="big">This is a great heading.</p><p id="big">This is absolutely a greater heading.</p>
Вы должны написать:
<p class="big">This is a great heading.</p><p class="big">This is absolutely a greater heading.</p>
Когда уместно правило !important
Правило !important было создано во второй половине 90-х чтобы помочь веб-дизайнерам и разработчикам переопределять существующие стили. !important преобладает над всеми предыдущими стилями как бы говорит браузеру: “Я главнее, забудь обо всем другом CSS и используй меня!”. Используя его от собственной лени, вы рискуете заработать головную боль позже. Ваш код будет труднее поддерживать.
Например:
header {
color: red;
}header.intro {
color: blue !important;
font-size: 20px;
}header#capture {
color: green;
font-size: 20px;
}
В представленном выше примере тексту в header назначен красный цвет. Исключением будет header с классом intro и с ID capture. Важность правила (color или font-size в данном случае) достигается за счет специфичности селектора.
Если вы используете !important, то добавляйте его на уровне свойства, а не на уровне селектора. Это означает что свойство color имеет более высокий приоритет, чем размер шрифта. Свойство color более важное чем тот же color в правиле header#capture.
Рекомендация: Вы должны использовать правило !important только тогда, когда исправляете код сторонних разработчиков или инлайновые стили.
Частое использование правила !important является плохой практикой поскольку вносит беспорядок в один из основных механизмов CSS — специфичность (на русском, но лучше на английском).
Использование неэффективных CSS-селекторов
Используя селекторы помните, что чем длиннее он будет, тем выше его специфичность. Это может привести к поломке каскада и вы испортите стили всего сайта.
Этого можно избежать, если не использовать ID в селекторе, поскольку он имеет высокую специфичность.
Например посмотрите на эти длинные селекторы:
#header #intro h1.big a { ... }#header #intro h1.big a.normal { ... }
Мы можем укоротить их до двух или трех уровней глубины:
.big a { ... }.big .normal { ... }
Использовать тонны веб-шрифтов
Понятно, что типографика является фундаментальным элементом хорошего веб-дизайна, брендинга и улучшает читаемость.
Тем не менее, независимо от размеров экрана и его разрешения, веб-шрифты играют критическую роль в хорошем веб-дизайне и UX. Каждый шрифт является дополнительным ресурсом и не все веб-шрифты хороши при отрисовке текста.
Оптимизация шрифта и способ его загрузки могут влиять на размеры страницы и время отрисовки текста.
Рекомендуется использовать один или два (точно не больше трех) веб-шрифтов на вашем сайте и пользоваться значениями по умолчанию браузеров для оптимизации вашего сайта.
Использование встроенных (инлайн) стилей
Использование встроенных стилей, пожалуй, одна из самых плохих практик, которую многие веб-дизайнеры и разработчики допускают и по сей день. Главная цель, из-за которой мы используем CSS — отделить стили от HTML-структуры. А встроенные стили, в свою очередь, мешают достижению этой цели.
Считается хорошей привычкой держать ваши CSS и HTML отдельно друг от друга. Добавление встроенных стилей усложнит вам жизнь при изменении дизайна сайта, а так же затруднит поддержку вашего кода.
Тем не менее, использование встроенного CSS допустимо при верстке электронных писем, поскольку почтовые клиенты имеют множество ограничений. Это важная особенность при создании дизайна писем.
Помимо этого, помните, что встроенные стили находятся в самом низу каскада, они будут перекрывать все другие стили. Поэтому будьте осторожны с их использованием.
Хорошие CSS-практики
Теперь, когда мы закончили говорить о плохих приемах написания CSS, можем рассмотреть несколько хороших.
Используйте в CSS структуру контента
При создании новой таблицы стилей используйте некое подобие оглавления. Это поможет вам быстро находить нужные куски кода, когда его будет много. Организуйте ваши стили и вы будете писать более эффективный код.
За основу можете взять указанный ниже код:
/* Project Meta *//* reset *//* general *//* typography *//* grid *//* header *//* footer *//* Page template A *//* Page template B *//* Media Queries */
Сделайте CSS “читабельным”
“Читабельность” кода означает, что вы создаете чистые во всех отношениях наборы правил. Когда ваш CSS легко читать, то его проще и поддерживать в дальнейшем. Вы быстро можете найти каждое правило.
Есть два способа, при помощи которых вы можете сделать свой CSS пригодным для чтения.
1. В одну линию
.box {background: green; border: 1px solid black;}2. Стандартный вид
.box {
background: green;
border: 1px solid black;
}Прим. переводчика: как верно было замечено в комментариях, при большем количестве свойств вариант в одну строку становится не жизнеспособным. Используйте только второй вариант!
Отделите стили jQuery-плагинов
Если вы используете плагины jQuery, то вам стоит поместить стили для них в отдельный css-файл и назвать его легким и запоминающимся именем, например, JS-plugin.css. Это поможет вам поддерживать порядок среди вашего CSS, и вы вспомните добрым словом этот совет, когда вам потребуется изменить или добавить стили для плагинов.
Файл сброса стилей
Файл сброса стилей (или “Reset CSS”) представляет из себя краткий набор правил CSS, который сбрасывает основные стили html-разметки. Использование файла сброса уменьшает разницу отображения в разных браузерах и позволяет получить общий внешний вид.
MeyerWeb самый популярный и широко используемый файл сброса стилей, хотя наряду с ним популярен и normalize.css от Nicolas Gallagher. Это современные файл сброса, полностью соответствующие HTML5. Вы можете подключить отдельный файл со сбросом стилей на вашу страницу или скопировать всю таблицу в файл с вашими стилями.
CSS3 анимация в последнюю очередь
Рекомендуется добавлять CSS3 анимацию в самую последнюю очередь, чтобы избежать каких-либо проблем при редактировании стилей выше в файле. Это позволит браузеру загрузить важные и основные стили в первую очередь, затем перейти к обработке анимации.
Комбинируйте элементы
Если несколько элементов в таблице имеют одинаковые правила стилей, то вы легко можете объединить их, а не переписывать код снова и снова.
Например, h1, h2 и h3 элементы имеют одинаковое правило font-family и цвет текста.
h1, h2, h3 {
font-family: 'Lato', sans-serif;
color: #dadada;
}Используйте краткие записи свойств
Краткие записи (шорткаты) позволяют одновременно установить значения для несколько свойств CSS. Шорткаты сокращают ваш код и увеличивают читаемость.
Например, вместо того чтобы использовать margin-top, margin-bottom, margin-left и margin-right вы можете просто использовать одну строку.
#div {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 3px;
margint-left: 4px;
}#div {
margin: 10px 10px 3px 4px; // top, right, bottom left
}
Всегда комментируйте
Один из лучших методов написания CSS — размещение комментариев для каждой группы элементов. Это облегчит вам поиск и навигацию по файлу.
/* GENERAL RULE */html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
overflow: hidden;
}h1 {
color: #3498db;
text-align: center;
font-size: 35px;
margin: 100px 0px;
font-weight: 700;
}
Вендорные префиксы
При работе с несколькими браузерами настоятельно рекомендуется добавлять префиксы для нестандартных CSS свойств в целях профилактики разного поведения браузеров.
Цель вендорных префиксов — избежать неверного исполнения кода.
В CSS следующие префиксы:
- Chrome: -webkit-
- Firefox: -moz-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Например, если вы хотите добавить свойство transition в ваш код, скопируйте его пять раз и разместите соответствующие вендорные префиксы перед названием свойства.
Посмотрите на код ниже.
-webkit-transition: all 6s ease;-moz-transition: all 6s ease;-ms-transition: all 6s ease;-o-transition: all 6s ease;transition: all 6s ease;
Примечание переводчика: Для автоматической расстановки префиксов у нужных свойств воспользуйтесь Autoprefixer-online.
Сжатие CSS
Другой способ написания эффективного CSS — это уменьшение размера файла с использованием таких инструментов, как CSS compressor или Minify CSS. Помогите браузерам сократить время загрузки. Эти инструменты удалят пробелы, переносы строк, а так же повторяющиеся стили.
Чаще используйте HEX-цвета
Есть несколько мнений и аргументаций в интернете, когда речь заходит о выборе между HEX-цветами и цветами по их названию. Различные браузеры могут быть не в состоянии определить, что значат некоторые названия цветов. Значения HEX имеет палитру цветов, содержащую 16 777 216 оттенков, в то время как HTML и CSS имеет в своем арсенале всего 140. Там нет названий для всех 16 миллионов 24-разрядных цветов, поэтому HEX — лучший выбор, когда вы определяетесь с цветовыми вариациями.
Ознакомьтесь со спецификацией CSS Color Module Level 3 для получения дополнительной информации.
Валидация
Валидация CSS при помощи W3C free CSS Validator поможет вам проверить свой код и посмотреть, не допустили ли вы ошибок. Такие вещи, как незакрытую скобку или пропущенную запятую будет легко обнаружить с этим удобным инструментом.
Попробуйте!
Что дальше?
После обсуждения хороших и плохих CSS-практик настало ваше время — идите и применяйте полученные знания.
Признак простого в обслуживании HTML, CSS и JavaScript кодов — когда веб-дизайнер или разработчик могут легко и быстро изменить любую часть, не затрагивая других, не связанных фрагментов.
Что думаете? Какие плохие или хорошие практики вызывают у вас вопросы? Пожалуйста, оставляйте комментарии.
Перевод статьи Good and Bad CSS Practices for Beginners by Samuel Norton.
Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!
