Хорошая практика рациональной разработки и обслуживания CSS

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

Всегда создавайте оглавление

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

/* reset  */

/* general */

/* typography */

/* header */

/* footer */

/* sidebar */

/* Home Page */

/* About Page */

/* Media Queries */edia Queries * /

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

Пишите свой CSS стандартным способом

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

Есть два «стандартных» способы записи CSS. Первый и самый распространенный использует «блоковый» стиль:

#element{
	margin: 0 auto;
	width:80%;
	display: block;
}

 
Второй стиль «линейный»:

#element{ margin: 0 auto; width:80%; display: block; }

 
На мой взгляд, «линейный» стиль отлично подходит для записи не более 3/4 свойств. Если больше, то он может стать трудночитаемым.

Используйте SASS

Классический CSS обыкновенно довольно прост, но со временем это проходит и добавляются всё больше и больше функций, возможностей для дизайнеров и веб-разработчиков, позволяющих создавать удивительные сайты. Сегодня таблицы стилей размером более 500 строк не редкость. Просто записать, а тем более поддерживать их в работоспособном состоянии стало утомительным. Здесь может помочь препроцессор. Saas позволяет использовать то, чего нет в классическом CSS, например, переменные, вложенность, полиморфизм, наследование и многое другое.

Saas предлагает много возможностей, которые позволят быстро писать и сделают ваш CSS легче поддерживаемым. Самое главное, что весь язык очень прост. Ниже приведен пример использования переменных в Sass:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 
Выглядит привлекательно, не так ли? Если вы еще не установили Sass, то уже, вероятно, поняли, что это необходимо сделать сегодня!

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

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

#logo{
	width: 250px;
	height:90px;
	display: block;
	float:left;
}

 
С другой стороны, классы применяют для определения стиля целого семейства различных элементов:

.box{
	background: #E4F0FC;
	margin: 1em 0px 1.5em;
	padding: 9px 10px 9px 15px;
	color: #555;
	text-shadow: none;
	font-weight: bold;
}

 
Элемент может иметь как идентификатор, так и принадлежать к одному или нескольким классам, как показано ниже:

<li id="comment-27299" class="item">

 
Это полезно, когда вы применяете общий класс к элементу, а уникальный идентификатор для определения уникальных свойств. Для получения дополнительной информации об идентификаторах и классов просмотрите эту статью с от мастера CSS Криса Койера.

Объединяйте таблицы стилей

Каждый раз ваша ссылка на CSS-файл в HTML-странице заставляет браузер клиента делать HTTP-запрос для загрузки этого файла. Постольку поскольку каждый HTTP-запрос занимает много времени, вы всегда должны объединять все таблицы стилей в одну и, тем самым, сделать свой сайт намного быстрее.

Для объединения нескольких CSS-файлов доступно множество различных инструментов. Я использую онлайн CSS компрессор и до сих пор с хорошими результатами.

Обязательно прочитайте: Google PageSpeed ​​Insights: Как я настроил свой медленный веб-сайт

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

Большинство людей для создания CSS-файлов используют очень простые обычные редакторы. В то же время, использование специализированного редактора CSS может сделать всю работу намного быстрее и проще. Для всех платформ есть множество различных платных и бесплатных редакторов. Мой личный выбор — редактор Stylizer, бесплатный для Windows и Mac, который обеспечивает предварительный просмотр в реальном времени в различных браузерах и многие другие супер полезные функции. Если вы хотите больше для выбора своего идеального редактора CSS кода, посмотрите этот список.

Для оптимизации и очистки CSS используйте бесплатные инструменты

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

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

Clean CSS представляет собой интернет — инструмент для украшения, преуменьшать, формат, или сжимать файлы CSS, а также другие форматы, такие как JS или HTML.

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

Минимизировать или GZip ваших файлов

Отличный способ оптимизации скорости загрузки сайта и экономики на пропускной способности — минимизация или сжатие CSS файлов. При минимизации удаляются пробелы, комментарии и ненужные точки с запятой. Уменьшенный CSS будет составлять примерно 80% своего первоначального размера. Файлы CSS могут быть легко минимизирован, а также unminified онлайн.

Gzipping уменьшает время отклика за счет сокращения размера ответа HTTP. Со сжатыми таблицами стилей, как правило, примерно на 70% сокращается время отклика. Можно активировать Gzip, добавив следующий код в .htaccess файл на сервере:

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

 

Источник перевода: GOOD PRACTICES FOR EFFICIENT AND MAINTAINABLE CSS

CC BY-NC 4.0 Хорошая практика рациональной разработки и обслуживания CSS, опубликовано waksoft, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.


Респект и уважуха

Добавить комментарий