Полезные приемы CSS, которые следует использовать, и ошибки, которых стоит избегать

Создание легко управляемого набора кодов CSS может стать нелегкой задачей.

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

Применяя различные приемы, вы сможете уберечь себя от ошибок. В этой статье мы собираемся описать, лучшие приемы CSS, которым стоит следовать, а также ошибки, которых не следует допускать.

Итак, приготовьтесь и давайте начнем.

Лучшие приемы CSS

Используйте переключение CSS

Несовместимость с браузером является одной из самых значительных проблем в настоящее время. Стили рамок, отступов, размеры строки, заголовков, размер шрифта и так далее могут выглядеть по-разному в различных браузерах.

Цель таблицы переключения стилей заключается в том, чтобы решить проблему несовместимости с браузером, предоставив общие стили, которые можно редактировать и расширять.

Одним из лучших примеров переключения стилей CSS является normalize.css, современный HTML5 набор переключения CSS.

Все, что вам нужно сделать, это включить его перед вашими собственными параметрами стилей в разделе Head файла HTML. В противном случае, эти стили заменят ваши собственные стили.

Обеспечьте наличие информации о таблице стилей

Включите название, автора, теги, описание, URL-информацию и так далее о вашей таблице стилей.

Это даст пользователю / разработчику возможность связаться с контактным лицом, если ему понадобится поддержка касательно ваших стилей:

/*
Название: Simple Parallax Website
Описание: Эффект Simple Parallax Scrolling 
Автор: Samuel Norton
URI автора: http://www.1stwebdesigner.com/

Теги: Parallax, Website
*/

Организуйте элементы в таблице стилей сверху вниз

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

Имеет смысл размещать их начиная с общих стилей (например, body, H1, p и тому подобное), а потом от заголовка до подвала.

В качестве примера рассмотрим приведенную ниже структуру кода:

/****** Общие стили *********/
	 
body {...}
h1, h2, h3 {..}
p {...}
a {...}
	 
/****** Стили заголовка *********/
#header {...}
	 
/****** Стили меню навигации *********/
#nav {...}
	 
/****** Стили футера *********/
#footer {...}

Оптимизируйте размер файла CSS с помощью CSS-компрессоров

Это действительно отличная идея уменьшить размер файла CSS. Удалить пробелы, переносы строк и лишние стили. Благодаря этому, вы можете ускорить загрузку ваших CSS-кодов в браузере.

Использование таких инструментов, как CSS Compressor и CSS Compressor & Minifier позволит сделать это наилучшим образом:

Группируйте идентификаторы и классы, которые относятся к тем же элементам

Если у вас есть элемент, содержащий различные идентификаторы и классы, вы можете сгруппировать их, чтобы они были организованными, и их можно было быстро найти в случае необходимости.

Например, у вас есть класс контейнера, который содержит тег DIV с идентификатором логотипа и другой тег DIV с идентификатором иконок:

</pre>
<div>
<div id="logo"></div>
<div id="tagline">< /div></div>

Вы можете сгруппировать их в своем CSS следующим образом:

.
container {width: 960px; margin: 0;  padding: 0;}.
container #logo {font-family: Arial, sans-serif;  font-size: 30px; color: red;}.
container #tagline {font-family: Verdana; font-size: 10px;}

Используйте аннотации / комментарии для описания наборов CSS

Другой полезный прием для CSS кодирования заключается в составлении комментариев для каждой группы CSS.

Это позволит вам легко находить конкретную группу, если вы обнаружите какие-нибудь ошибки:

/****** Общие стили *********/
	 
	body{
	    margin: 0;
	    padding: 0;
	    width: 100%;
	}
	 
	h1, h2, h3 {
	    font-family: Arial, sans-serif;
	    font-weight:normal;
	    font-size: 55px;
	    text-align: center;
	    color: #fff;
	    margin: 0;
	    padding: 0;
	}

Структура конвенции имен

Использование соответствующих конвенций имен идентификаторов и классов будет вам также полезно. Это поможет сделать работу проще и быстрее, если вам нужно добавить определенные элементы или изменить дизайн сайта.

Например, имя класса title-red не будет иметь смысла, если вы измените цвет заголовка. Так почему бы просто не назвать его title.

Всегда называйте свои элементы должным образом в зависимости от их применения, а не их свойств, таких как цвет или размер шрифта элемента.

Используйте шестнадцатеричный код вместо названия цвета

Согласно результатам теста производительности, проведенного Шоном Конноном, главой отдела веб-разработки Alien Creations, Inc, шестнадцатеричные коды работают на 4/5 быстрее.

Поэтому мы рекомендуем использовать шестнадцатеричные коды, а не названия цветов:

Используйте вендорные префиксы CSS

Если вы знаете о новых возможностях CSS3, вам также должно быть известно, что каждый браузер имеет свои собственные спецификации относительно распознавания стилей.

Вот почему используются префиксы браузеров, чтобы убедиться, что браузер поддерживает определенные элементы / стили, которые вы хотите применить.

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

Существуют следующие CSS префиксы браузеров:

• Chrome: -webkit-
• Firefox: -moz-
• iOS: -webkit-
• Opera: -o-
• Safari: -webkit-

Например, вы хотите добавить CSS3 переход в свой CSS-код. Вам нужно просто использовать свойства перехода с вендорным префиксом.

Как показано в приведенном ниже коде:

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

Проверяйте свой CSS-код

Использование бесплатного W3C CSS Validator поможет вам проверить, надлежащим ли образом структурирован ваш CSS-код. Еще одно преимущество использования данного инструмента заключается в том, что с его помощью вы сможете найти ошибку в своих стилях.

Это сэкономит ваше время, ведь вам не придется искать ошибку вручную:

Ошибки, которых нужно избегать

Создание лишнего CSS

Использование стилей снова и снова для определенных элементов не является хорошим решением. Очень важно вычищать код и удалять лишние стили.

Например, если у вас есть тег параграфа и тег span, в которых заданы тот же размер и цвет шрифта, вы можете просто сгруппировать их через запятую.

Посмотрите на приведенный ниже код:

Плохое решение

span {font-size: 12px; color: red;}
p {font-size: 12px; color: red;}
Правильное решение
span, p {font-size: 12px; color: red;}

Смешивание имен тегов с именами идентификаторов и классов

Добавление имени тега к имени идентификатора или класса является не очень хорошим решением, так как это приведет к замедлению процесса обработки кода.

Взгляните на приведенные ниже коды:

Плохое решение

p#container {color: red; font-size: 8px;}
Правильное решение
#container {color: red; font-size: 8px;}

Раздельное определение рамки и отступа

Использование отдельных CSS-кодов для определения рамки и отступа сверху, снизу, справа или слева это не очень хорошая идея.

Минимизация кода и сведение его в одну строку сделает ваш код более читабельным, и загружаться в браузере он будет быстрее.

Плохое решение

Например, у вас есть блок идентификатора контейнера, и вы задаете все значения отступов раздельно.

Смотрите код ниже:

#container {
margin-top: 10px;
margin-right: 2px;
margin-left: 5px;
margin-bottom: 14px;
}

Правильное решение

Вы можете просто объединить все эти стили в одну строку.

Смотрите код ниже:

#container {margin: 10px 2px 5px 14px;}

Использование нижнего подчеркивания (нижнего тире) в именах идентификаторов и классов

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

Настоятельно рекомендуется использовать для этого дефис.

Например:

Плохое решение

.
left_col {margin: 0; padding: 0;}
Правильное решение
.
left-col {margin: 0; padding: 0;}

Заключение

В этой статье я описал вам некоторые приемы и основные принципы правильного составления кода CSS, а также ошибки, которых нужно избегать.

Следуя этим правилам при составлении CSS, вы сможете писать чистые коды и убережетесь от многих ошибок. Проверяйте свой код с помощью W3C CSS Validator. Это также поможет вам избежать ошибок.