Последнее время спецификации 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 строк не редкость. Просто записать, а тем более поддерживать их в работоспособном состоянии стало утомительным. Здесь может помочь препроцессор. позволяет использовать то, чего нет в классическом CSS, например, и многое другое.
предлагает много возможностей, которые позволят быстро писать и сделают ваш CSS легче поддерживаемым. Самое главное, что весь язык очень прост. Ниже приведен пример использования переменных в Sass:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Выглядит привлекательно, не так ли? Если вы еще не , то уже, вероятно, поняли, что это необходимо сделать сегодня!
Правильно используйте идентификаторы и классы
Для того, чтобы избежать избыточности в таблицах стилей, важно надлежащим образом использовать идентификаторы и классы. Идентификаторы необходимы для определения отдельного элемента, например, логотипа:
#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;
}
Элемент может иметь как идентификатор, так и принадлежать к одному или нескольким классам, как показано ниже:
Это полезно, когда вы применяете общий класс к элементу, а уникальный идентификатор для определения уникальных свойств. Для получения дополнительной информации об идентификаторах и классов просмотрите эту с от мастера CSS Криса Койера.
Объединяйте таблицы стилей
Каждый раз ваша ссылка на CSS-файл в HTML-странице заставляет браузер клиента делать HTTP-запрос для загрузки этого файла. Постольку поскольку каждый HTTP-запрос занимает много времени, вы всегда должны объединять все таблицы стилей в одну и, тем самым, сделать свой сайт намного быстрее.
Для объединения нескольких CSS-файлов доступно множество различных инструментов. Я использую онлайн и до сих пор с хорошими результатами.
Обязательно прочитайте:
Используйте специализированный редактор
Большинство людей для создания CSS-файлов используют очень простые обычные редакторы. В то же время, использование специализированного редактора CSS может сделать всю работу намного быстрее и проще. Для всех платформ есть множество различных платных и бесплатных редакторов. Мой личный выбор — , бесплатный для Windows и Mac, который обеспечивает предварительный просмотр в реальном времени в различных браузерах и многие другие супер полезные функции. Если вы хотите больше для выбора своего идеального редактора CSS кода, посмотрите .
Для оптимизации и очистки CSS используйте бесплатные инструменты
Тонну бесплатных инструментов, которые могут помочь вам добиться лучшего качества CSS, доступны в Интернете.
очищает и организует ваш CSS так, как вы хотите. Это позволяет определить отступы, стиль скобок, пустое пространство и т.д. Идеально подходит для согласованности CSS кода при совместной разработке.
представляет собой интернет — инструмент для украшения, преуменьшать, формат, или сжимать файлы CSS, а также другие форматы, такие как JS или HTML.
Как вы можете догадаться по его названию, является инструментом, который исследует все ваши страницы и удаляет временные и неиспользуемые CSS, а затем позволяет загружать оптимизированные файлы. Отличный инструмент, чтобы держать свои таблицы стилей чистыми и до настоящего времени!
Минимизировать или GZip ваших файлов
Отличный способ оптимизации скорости загрузки сайта и экономики на пропускной способности — минимизация или сжатие CSS файлов. При минимизации удаляются пробелы, комментарии и ненужные точки с запятой. Уменьшенный CSS будет составлять примерно 80% своего первоначального размера. Файлы CSS могут быть легко , а также онлайн.
Gzipping уменьшает время отклика за счет сокращения размера ответа HTTP. Со сжатыми таблицами стилей, как правило, примерно на 70% сокращается время отклика. Можно активировать Gzip, добавив следующий код в файл на сервере:
# BEGIN GZIPAddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript # END GZIP
Источник перевода:
Хорошая практика рациональной разработки и обслуживания CSS, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.
Респект и уважуха
