12 советов — Как оптимизировать CSS код

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

как оптимизировать CSS код

Чаще всего, несоблюдение требований при написании кода приводят к двум последствиям:

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

Избавиться от обоих недугов очень просто, достаточно соблюдать некоторые правила, вот они:

1. Не используйте глобальный сброс.

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

Плохо

Лучше

2. Не используйте хаки для IE

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

Например, следующий код, если его разместить в теге <head> заставит iestyles.css загружаться только для Internet Explorer версий 6 и меньше.

Об условных комментариях можно почитать подробнее в статье на quirksmode — CSS Conditional Comments (на английском)

3. Используйте значимые имена для Классов и ID

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

4. Используйте наследование правил CSS

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

Читайте также:  HTML форма обратной связи для сайта +PHP обработчик с защитой от спама

Плохо

Лучше

5. Объединяйте несколько селекторов

Вы можете объединять CSS селекторы в одном правиле если у них одинаковые свойства. Это сохранит вам и время и размер файла.

Плохо

Лучше

6. Используйте сокращенную запись

Возможность использования сокращенной записи поможет быстро писать CSS код и уменьшит размер файла. Сокращенная запись доступна для свойств margin, padding, border, font, background, а также для значений цвета.

Плохо

Лучше

7. Организуйте CSS код

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

Вот пример организации кода:

8. Делайте CSS читаемым

Написание читаемого CSS облегчит поиск и редактирование стилевых правил. Можно группировать стили селектора в одну строку или выделять для селектора отдельную строку. Конечно можно и комбинировать эти техники.

9. Добавляйте комментарии

Комментарии можно использовать для разделения секций CSS кода

Читайте также:  Лучшие плагины для создания мобильной версии Wordpress сайта

10. Сортируйте CSS свойства по алфавиту

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

11. Используйте внешние таблицы стилей

Всегда нужно стремиться отделять содержимое от представления. Размещайте весь свой CSS код во внешних таблицах стилей и затем используйте <link> для подключения их к своей странице. Размещение кода во внешних файлах позволит вам легко изменять его в одном месте, а не изменять его во всех файлах где он использовался.

Плохо

Лучше

12. Сжимайте CSS код

После того как ваш код будет готов к эксплуатации, его необходимо сжать, например, с помощью cy-pr.com/tools/css/, так вы уменьшите время загрузки сайта, за счет уменьшения размера файла.

Заключение

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(9 голосов, в среднем: 5 из 5)