Очистка кодовой базы CSS. Удаление неиспользуемых CSS стилей

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

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

1. Type-o-Matic

Type-o-matic представляет собой Firebug -плагин, который умеет анализировать шрифты, использованные на страницах сайта. Этот плагин выводит отчет в виде таблицы с информацией о свойствах используемых шрифтов (семейство, размер, цвет и другое ).

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

2. CSSCSS

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

3. CSS Lint

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

4. CSS Colorguard

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

5. CSS Dig

CSS Dig — это скрипт, написанный на Python , который запускается локально, и позволяет проанализировать свойства и значения CSS практически любого сайта, независимо от того, располагаются ли стили в отдельном файле или в коде страницы. Инструмент также помогает изменять, стандартизировать и оптимизировать CSS -код.

6. Dust Me

Dust-Me – плагин для Firefox и Opera , который выводит неиспользуемые селекторы из таблицы стилей. Инструмент берет весь CSS вашего сайта, и показывает, какие именно селекторы используются, а какие лишние.

7. Devilo.us

Devilo.us – продвинутый движок для сжатия и оптимизации CSS -кода, который теперь поддерживает CSS3 .

8. PurifyCSS

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

9. Atomic CSS

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

10. Clean CSS

CleanCSS представляет собой многофункциональный CSS -оптимизатор. Инструмент берет ваш CSS -код и делает его чище и меньше в объеме. Вы можете оптимизировать код, написанный на разных языках: javascript , json , python , html и т. д.

11. PubCSS

Инструмент облегчает форматирование CSS -кода страниц академических изданий. Это библиотека CSS -стилей для форматирования документов под печать и публикацию в интернете.

12. CSSO

CSSO (CSS Optimizer) ¬– это инструмент, который производит структурную оптимизацию ваших CSS -файлов.

13. Helium

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

14. Strip Comments

Strip CSS Comments значительно облегчает следующие задачи: удаление комментариев из CSS -файлов, уменьшение размеров файлов. Он также доступен в виде плагина для gulp/grunt/broccoli .

15. CSS Shrinks

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

Возможно, у вас на примете есть еще какие-нибудь полезные CSS -инструменты? Пожалуйста, поделитесь ими в комментариях!

Перевод статьи “15 CSS Tools to Audit and Optimize Your CSS Code ” был подготовлен дружной командой проекта

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

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

Как появилась технология CSS Reset и как ею пользоваться

CSS Reset – это список свойств каскадных стилевых таблиц, которые сбрасывают запрограммированные стандарты в браузерах по умолчанию.

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

На сегодняшний день существует множество вариантов реализации reset библиотек или можно их еще назвать фреймворками.

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

Что касается истории, то впервые похожая технология была использована Креспанисом Эндрю в 2004 году. В своих технических публикациях он советовал верстальщикам в начале документа со стилями использовать универсальный селектор, т.е. *, и в нем обнулять отступы объектов, которые задаются в каждом браузере по умолчанию.

Программная реализация такого приема выглядит так:

Пример работы подхода Э. Креспаниса

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

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

Так, в одном из подходов используется дополнительное обнуление всех границ веб-объектов (добавляется строка border: 0; ), а в другом – сброс параметров границ и внешнего контура элементов (к первому варианту добавляется outline: 0; border: 0; ).

Однако все они обладают рядом недостатков. Так как это самые первые версии стилевого «контроля» браузеров, они не идеальны. Взять даже текст с параграфами. При использовании первой реализации reset-а, исчезнут отступы между абзацами. В этом случае каждый раз css-разметку придется корректировать.

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

Осторожно! Веб-мафия! Убьет любой браузерный стандарт стилей!

Итак, что же мы имеем с CSS Reset? Данное решение не использует универсальный селектор, а задает стилевую разметку через теги. При этом в коде предусмотрена обработка «проблемных» зон как, например, border-collapse, который в некоторых браузерах функционирует плохо.

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

Вернемся к Эрику Мейеру и его CSS Reset. В своем решении он прописывает правила для почти всех элементов языка css, начиная от контейнеров и заканчивая такими мелкими тегами, как strong, var, mark и другие. Вот тут расположена официальная вторая версия этого документа: http://meyerweb.com/eric/tools/css/reset/index.html

После появления выше описанного варианта подгонки дизайна сайта «под одну гребенку» во всех браузерах, многие крупные фирмы создали свои модификации.

Например, Yahoo! создали YUI CSS Reset, который они выложили в свободный доступ (можно посмотреть по этой ссылке: http://yui.github.io/yui2/#start ).

Крис Потит с единомышленниками разработал Siolon`s CSS Browser Reset (http://www.siolon.com/blog/browser-reset-css/ ). И так можно перечислять очень долго.

Здесь я хочу перечислить некоторые важные правила и рекомендации использования CSS Reset:

1. Как я уже и говорил, первое, что должно отработать в css-коде, это сброс параметров. Хоть это и интуитивно понятно, но очень часто новички и разработчики с опытом спотыкаются об эту ошибку;
2. Считается хорошим тоном использовать отдельный css-документ для CSS Reset. К тому же такой файл становится универсальным инструментом девелопера и может быть использован в разных веб-проектах;
3. Не бойтесь внедрять персональные модификации или создавать свои собственные reset-фреймворки;
4. Старайтесь не слепо использовать готовые решения по сбросу стилей и после переопределять некоторые параметры. Это грозит избыточностью кода. А такое айтишники не любят. Поэтому в случае с Yahoo CSS Reset если вам в этих свойствах: caption, th {text-align: left;} нужно выравнивание по центру, а не слева, то смело пишите ключевое слово center.

Что касается меня, то я использую свой CSS Reset, который включает в себя основные общие правила шаблонов и мои поправки.

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

Пока-пока!

С уважением, Роман Чуешов

Прочитано: 114 раз

Вы только что присоединились к существующему проекту для замены уходящего разработчика. А может просто занялись своим старым проектом спустя несколько лет. Вы ощущаете ужас и отвращение при взгляде на код. Вы можете сделать только одно: расчистить весь этот бардак. Вы уже сталкивались с чем-то подобным? Почти наверняка, рано или поздно с этим сталкиваются все.

Вы знаете, что очистка кода CSS это объемная задача. Нужно сделать многое за ограниченное время - особенно, когда клиенты/начальники/коллеги настойчиво советуют не трогать то, что работает. Вы даже не знаете с чего начать.

Линтинг это наше все

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

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

В Sass есть написанный на Ruby линтер, называемый SCSS-lint . Вы можете настроить его самостоятельно или скачать конфигурацию, рекомендованную Sass-Guidelines , чтобы начать прямо сейчас. Также в Node.js есть sass-lint , они не на 100% совместимы и могут работать по-разному.

Попробуйте запустить SCSS-Lint в своем каталоге с файлами Sass для выявления ошибок. Очень высоки шансы на то, что на вас вывалится тонна ошибок. Обычно после этого хочется прекратить эксперименты по очистке кода. Наберитесь терпения. Сейчас вы можете попытаться сделать конфигурацию менее строгой в отношении правил, не очень важных для вас (типа формата задания цвета) или взять быка за рога и использовать всю мощь линтинга.

Исправление найденных ошибок

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

Предположим, вы хотите добавить отсутствующий ноль во всех числах с плавающей запятой (то есть от 0 до 1), ошибки такого типа выявляются с помощью правила LeadingZero в SCSS-lint. Для этого надо использовать для поиска регулярное выражение \s+\.(\d+) (все цифры, следующие за пробелом с точкой), а для замены \ 0.$1 (пробел, ноль, точка и найденное число). А если вы озаботились правилом линтера BorderZero , то вы можете заменить в вашем редакторе с помощью поиска/ замены все правила border: none на border: 0 . Проще простого!

Я недавно создал на GitHub репозиторий scss-lint-regex , чтобы собрать все регулярные выражения для линтинга в одном месте. Обязательно взгляните на него, если у вас проблемы с линтингом в большом проекте. И будьте аккуратны с поиском/заменой, временами он приводит к неожиданным побочным эффектам. После каждой замены выполняйте git diff , чтобы выявить, что изменилось, это гарантирует, что вы не добавите багов в свой код.

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

Примечание переводчика

Некоторые из этих вещей можно сделать с помощью плагинов SassBeautify в текстовых редакторах, например, sublime или atom .

Пересмотр структуры проекта

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

Не столь значим выбор методологии проекта, главное, чтобы она у вас была и не вызывала у вас дискомфорт. Это может быть SMACSS , 7-1 или ITCSS - выбор за вами. Попытайтесь реструктурировать свой код в соответствии с выбранной методикой. Я, как правило, использую паттерн 7-1, который мы разработали в Sass Guidelines, поэтому я дам вам несколько советов, которые помогут, если вы выбрали этот путь.

Затем перейдем к каталогу abstracts . Все переменные, миксины, функции и плейсхолдеры должны находиться здесь. Вы вольны упорядочивать их как пожелаете, пока вы не разберетесь со всеми переменными и миксинами в вашей кодовой базе. Я на этой стадии также выявляю необязательные переменные (и миксины), ведь часто приходиться сталкиваться с переменными, используемыми один или два раза.

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

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

В качестве примера правильного и небольшого компонента могу привести следующий:

Quote { padding: 10px; } .quote__attribution { font-size: 80%; } .quote > :first-child { margin-top: 0; } .quote > :last-child { margin-bottom: 0; }

Старайтесь мыслить модулями. Меньше. Проще. Независимее.

Удаление лишнего

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

Прошло уже 3 года, но этот твит Николаса Галахера остается моим любимым вопросом о CSS:

Устаревание это настоящая чума CSS. При написании стилей мы часто ходим туда и обратно, пробуя новые правила - в итоге мы, как правило, оставляем несколько совершенно ненужных деклараций. Например, overflow: hidden , потерявший необходимость или font-size , не изменяющий размер шрифта. Оставляя их, мы увеличиваем технический долг . В этом нет ничего хорошего.

При написании CSS я привык открывать инструменты разработчика в браузера и поочередно отключать каждую декларацию CSS перед отправкой готового кода, чтобы проверить, на что они влияют. Если они не на что не влияют, то я в первую очередь спрашиваю себя: “Зачем они здесь?”. Если они оказываются бесполезными, я удаляю их. С такой простой методикой как эта, я гарантирую отправку в репозиторий только полезного кода без мусора.

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

Parent { /* ...stuff here... */ } .child-A { color: red; } .child-B { color: red; }

Очевидным способом оптимизации является перемещение декларации color: red в родительский селектор, после чего каскадирование сделает за нас остальное. Конечно, реальные примеры обычно более сложны, но и этот пример показывает о том, что не стоит забывать возможности „C“ в аббревиатуре CSS .

CSS умный и вы должны быть не хуже

Также очень часто встречается нехватка понимания значений inherit , initial и currentcolor . Предположим, вы хотите, чтобы ссылки были того же цвета, что и основной текст (они уже достаточно выделены подчеркиванием). Вот как не надо это делать:

A { color: black; /* Nope */ }

Причина того, что это решение является неудачным, очевидна: если вы измените цвет body , цвет ссылки будет рассинхронизирован с ним. Если вы думаете об использовании переменной, то это лишь сделает все излишне сложным. И, наконец, если ссылка будет размещена внутри элемента с собственным стилем (например, в цитате), она не будет совпадать с ним по цвету.

В CSS есть встроенный способ решения этой проблемы, это значение inherit:

A { color: inherit; /* Yay! */ }

Точно также при возвращении свойству дефолтного значения будет плохой идеей задание фиксированного значения. В CSS для таких случаев есть значение initial . Обычно оно не имеет отличий от задания фиксированных значений, но есть случаи, когда действительно играет свою роль, например, при определении направления текста в свойстве text-align . При сбросе text-align , значение left может испортить текст на RTL-языках (направленных справа налево), выходом будет именно initial (еще лучше start , но это значение не поддерживается в IE9)/.

Последнее в списке, но не последнее по важности значение это currentcolor , очень многие разработчики о нем не знают. Если вы относитесь к их числу, не переживайте, просто спросите у себя: “Если вы не задавали цвет границы элементы, то почему он автоматически совпадает с цветом шрифта элемента?”. Да, это происходит потому, что по умолчанию свойству border-color задано значение currentcolor (спецификация). Согласитесь, все очевидно из названия.

На мой взгляд, если вы хотите использовать цвет шрифта элемента, надо использовать currentcolor вместо фиксированного значения или переменной Sass.

Element { color: deeppink; border: 1px solid; /* Color is implicit with `currentcolor` */ } .element svg { fill: currentcolor; /* Fill color will be same as text */ }

Это все базовые возможности CSS. Они делают CSS таким как есть. И эти возможности используются на удивление редко. Поэтому, если вы решили улучшить код компонента, не стоит пренебрегать ими.

Ваш Git должен быть в порядке

Рефакторинг кодовой базы CSS это большая по объему работа. Вам придется обновлять десятки файлов. И вполне вероятно, что вы что-нибудь сломаете в процессе. Давайте будем честны - все делают ошибки и было бы нереально круто, если вам удастся завершить такую работу без какой-нибудь маленькой оплошности.

Поэтому я настойчиво рекомендую вам старательно работать с системой контроля версий (логично предположить, что в этой роли выступает Git). Это значит, что все коммиты делают одну единственную вещь - обеспечивать возвращение на шаг назад от кода с багом без мучений с конфликтами.

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

Заключение

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

Очистка проекта CSS/Sass сложна потому, что трудно сразу оценить все последствия изменения или удаления строки CSS. Это все в основном из-за плохой тестируемости CSS. Поэтому вам надо быть внимательными.

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

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

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

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

Последнее, но не менее важное - не забудьте отпраздновать, когда все закончится. Удачи!

• Перевод

Данная статья - первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset .

Зачем это нужно?

Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей.

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание . Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом . Именно исходя из этого, если вы установите базовое значение стилей для элемента a , то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.

Но теперь у нас вообще нет никаких отступов, в том числе между отдельными параграфами! Что делать? Не врать и не бояться: ниже нашего сброса мы опишем нужное нам правило. Сделать это можно разными способами: указать отступ снизу или сверху параграфа, указать его в процентах, пикселях или в em.

Самое главное, браузер теперь играет по нашим правилам, а не мы по его. Я решил сделать подобным образом:

* { margin: 0; padding: 0; } p { margin: 5px 0 10px 0; }

В итоге у нас получилось то, что можно увидеть в третьем примере .

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

Чтобы помочь вам правильно сделать выбор, приведу ещё пару ссылок:

1. Less is more - my choice of Reset CSS (Эд Эллиот).

2. Ваш CSS Reset - это первое, что должен увидеть браузер

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

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

Некоторые могут задать логичный вопрос: почему так происходит? Ответ прост: правила, записанные ниже по тексту CSS-файла (и даже ниже по их порядку подключения в документе), перезаписывают правила, объявленные ранее.

Давайте не будем сильно отходить от темы и продолжим. Применим стили Эрика Мейера к нашему примеру, но после описания наших свойств, как показано в 4 примере . Математики бы сказали следующее: «Что и требовалось доказать».

3. Используйте отдельный CSS-документ для CSS Reset

Я должен (нет, меня отнюдь не вынудили) упомянуть этот совет. Использование отдельного файла для CSS Reset - это обычная практика, которую поддерживает большое число разработчиков.

На самом деле я придерживаюсь позиции создания одного большого CSS-файла из-за большей производительности подобного подхода. Но в данном вопросе я склонен согласиться с большинством: CSS Reset следует вынести в отдельный файл (обычно его называют reset.css). В таком случае вы можете использовать его в различных проектах, не прилагая при этом никаких усилий по его отделению от других правил CSS.

4. Старайтесь избегать использование универсального селектора

Несмотря на то, что эта концепция работает, её применение чаще всего не является желательным из-за несовместимости с некоторыми браузерами (например, данный селектор некорретно обрабатывается в Internet Explorer). Вам следует использовать этот приём только для простых, небольших, статичных и предсказуемых страниц (если уж вам пришлось делать это).

Данный совет особенно важен тогда, когда вы разрабатываете такие решения, как темы для CMS. Вы не можете заранее предсказать, как она будет использована и как её будут модифицировать. Лучше описать фундаментальные CSS-правила для всех элементов, чем использовать для этого непредсказуемый (пусть и меньший по объёму) механизм универсальных селекторов.

5. Избегайте избыточных описаний свойств при использовании CSS Reset

Ещё одна причина, по которой мне не нравится отдельный файл для CSS Reset - это потенциальная избыточность последующих деклараций CSS-свойств. Повторение отдельных ваших стилей среди всего набора CSS-файлов - это моветон и его следует избегать. Разумеется, иногда мы слишком ленивы, чтобы кропотливо пройтись по набору стилей и совместить некоторые из них, но следует хотя бы попытаться!

Вернёмся к CSS Reset от Эрика. Он устанавливает значения по умолчанию для line-height, color и background элемента body следующим образом:

body { line-height: 1; color: black; background: white; }

Допустим вы уже знаете, как будет выглядеть элемент body :

1. background-color: #cccccc;
2. color: #996633;
3. Вы хотите по горизонтали повторять определённую фоновую картинку.

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

body { line-height: 1; color: #996633; background:#ccc url(tiled-image.gif) repeat-x top left; }

Не бойтесь модифицировать сам CSS Reset. Подстройте его под себя, заставьте его работать на себя. Изменяйте, перестраиваейте, убирайте и добавляйте так, как это нужно в вашем конкретном случае.

Эрик Мейер по этому поводу сказал следующее: «это не тот случай, когда всем следует использовать CSS Reset без изменений».