Как мне провести рефакторинг моего CSS?

Разделите ваш css на отдельные файлы.

1. Поместите в один файл сброс CSS (если вы его используете)
2. Затем создайте файл global.css, в который вы поместите глобальные стили, применимые ко всем страницам.
3. Затем создайте отдельные файлы для своих отдельных страниц.

Затем начните стилизовать свои страницы. Каждый раз, когда вы находите правило стиля, которое можно повторно использовать на многих страницах, сделайте его классом CSS и поместите в файл global.css. Избегайте использования css ID. Вы обнаружите, что чаще используете вещи повторно или будете повторно использовать их в будущем. В этом случае вы, конечно, используете классы CSS.

В конце концов вы обнаружите, что в вашем global.css вы найдете в основном правила классов CSS и правила тегов html.

В файлах CSS отдельных страниц вы найдете определенные стили для каждой страницы.

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

мой 2p стоит об очистке css из предыдущего аналогичного вопроса: Советы по очистке и обслуживанию большого файла css

надеюсь, что это поможет вам вместе с ответами других людей!

1. начать ветвление проекта (здесь я предполагаю, что вы используете инструмент управления версиями) - это позволит вам независимо играть с кодом и отмечать любую веху, которую вы достигнете.

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

3. попробуйте определить неиспользуемый / избыточный CSS и избавиться от него.

4. вы можете попытаться сделать ваши селекторы короче (например, .main .foo .bar может подойти как .bar) - это улучшит читаемость и повысит производительность, но отнеситесь к этому с долей скепсиса и будьте готовы вернуться, если что-то начнется ломаться на каждом шагу.

5. постарайтесь исключить, если возможно, все! important - при необходимости сделайте селектор более конкретным. Сброс css мог бы помочь в этом, если бы большинство! Important утверждений было сделано для исправления проблем, связанных с браузером, в противном случае введение сброса css сейчас потенциально может добавить больше проблем, чем решить их - это, если в вашем приложении нет сброса css в все.

6. разбить и перегруппировать CSS в разные модули (и файлы, если это помогает) - объектно-ориентированный CSS - это возможный метод, позволяющий поддерживать более удобное обслуживание, он работает лучше всего, если вы начинаете с него, но он также может помочь вам в рефакторинге. https://github.com/stubbornella/oocss/wiki действителен, но есть альтернативы, которые вы можете рассмотреть, например SMACSS.

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

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

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

РЕДАКТИРОВАТЬ

Вещи меняются и развиваются к лучшему; Что касается подхода OOCSS / SMACSS, я какое-то время с удовольствием следил за методологией БЭМ Яндекса для CSS я хотел бы добавить его в качестве дополнительной рекомендации к приведенному выше

Первое, что я сделаю, - это разделю CSS по назначению. Может быть, сначала общий макет страницы (DIV, блоки, ...), затем стиль (шрифты, заголовки H1 / H2 /.../ Hn), затем более специализированный CSS (CSS для таблиц, для форм, для определенных компонентов сайта).

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

Когда у вас есть «отдельные страницы», все становится беспорядочно; их расположение так отличается? Вероятно, вам придется абстрагироваться от общих функций страниц (например, блока контейнера основного содержимого), насколько это возможно. Затем подумайте о большей специализации макета (1 столбец, 2 столбца) и так далее. Если у вас есть опыт программиста, просто подумайте о классах и наследовании, концепции - да, я знаю, что это совершенно другая область ... - но концепция может быть полезна при разработке вашего CSS.

Основываясь на текущем раунде работы, вот что у меня есть на данный момент:

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

1. Имейте систему для обработки нотаций To-Do в вашем HTML и CSS. Многие IDE поддерживают это напрямую, в противном случае подойдет функция глобального поиска. Помимо проблем с тегами, вы хотите отметить приоритет и, возможно, даже функциональную область (но не усложняйте задачу).
2. Не начинайте пересматривать свой код. Для начала используйте свою систему To-Do.
3. Make a concise list of your overall goals.
   
   • Consider overall sylistic changes such as color or font scheme.
   • Review best practices for CSS. Identify areas where your approach is ineffective, or where a good approach can be applied more consistently. Examples:
     • Consolidate classes
     • Устранение случайного использования встроенных стилей
     • Удалите неиспользуемые, повторяющиеся или конфликтующие стили.
     • Улучшение общей согласованности; применять набор соглашений
     • Улучшение единиц измерения
     • Используйте имена классов и идентификаторов, которые отражают контент, а не формат
   • Решите, какую часть рынка браузеров вы хотите поддерживать, а в какой - принимать или полагаться на новейшие стандарты.
   • Decide if there are any new approaches you want to adopt. Examples:
     • Use of a reset style sheet to standardize browser presentation
     • Использование CSS-фреймворка
     • Использование специализированной библиотеки, например, для помощи с формами
     • Динамический CSS (недавно я последовал совету использовать PHP для обработки моего CSS, чтобы я мог динамически управлять своей цветовой схемой. Но я вернулся к обычному CSS, потому что мне нравится представление кода CSS в моей среде IDE, а гибридный метод испортил это вверх.)
4. Просмотрите свой список целей и решите, какие из них следует сейчас преследовать. Любые крупномасштабные изменения по возможности следует рассматривать как отдельные. Если у вас беспорядок в макете столбцов, не время изучать, как CSS может элегантно заменить ваш javascript. То же самое касается лучших практик, стилистических изменений и т. Д.
5. Если у вас есть файлы CSS, настроенные на скорость (например, сжатый след или весь CSS в одном файле), измените это. Разбейте код в формате, управляемом человеком. Позже, когда вы закончите, попробуйте провести тест, чтобы увидеть, достаточно ли эффективна более разборчивая версия для производственного использования.
6. Отправьте свой CSS в валидатор. Отметьте любые нарушения, которые вы хотите исправить.

7. Найдите экземпляры встроенных стилей в своем HTML (выполните поиск по атрибуту style). Обратите внимание на все, что следует переместить в таблицу стилей.

   работа

8. Следуйте за своим To Do-менеджером. Делайте резервные копии на основе здравого смысла. По ходу тестируйте свою работу в нескольких браузерах.

9. Если вы занимаетесь регулярными выражениями, имейте в виду: регулярные выражения часто неэффективны или не безопасны для переписывания CSS. (Не так опасно, как для HTML, но все же). Regex может быть полезным для отправки изменений CSS в HTML, но опять же будьте осторожны.
10. Если у вас много настроек полей и отступов, попробуйте глобально сбросить их все на 0px (хорошо, используйте здесь регулярное выражение). Затем систематически наращивайте их. Таким образом можно разрешить множество недоразумений. Конечно, не включайте в этот процесс какие-либо библиотеки или таблицы стилей фреймворка.
11. Снова отправьте свой CSS в валидатор.

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

... пока я настраиваю отдельные страницы ...

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

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

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

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

Этот ответ относится к примечанию; «Я использую CSS-фреймворк, и мне сложно согласовывать отступы и поля». Только.

Использование препроцессора css решит эту проблему. Потому что css не имеет возможности назначить наследование, и поэтому мы должны повторять 'margin: 10px' снова и снова.

с препроцессором вы просто делаете

@margin {10px}
@padding {10px}

тогда

.mySelector{
    margin: @margin;
    padding: @padding;
}

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

См. Также http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

Это больше советов о том, как сделать ваш css поддерживаемым, чем Q о том, как управлять процессом.

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

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

element,
otherlement
{
  margin:10px;
}

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

Также не забудьте добавить различные классы к тегу body для создания объектно-ориентированного наследования - скажем, у вас есть 3 основных раздела вашего сайта - назначьте тегу body класс на основе этих разделов. Точно так же, если у вас есть 1000 страниц продукта, вы можете присвоить тегу body класс вроде «product485», а затем создать стили, применимые только к этой странице. Например:

h1 {
  margin: 10px;
}
.product485 h1,
.product484 h1
{
  margin: 5px;
}
.contact h1 {
  margin: 15px;
}

Все это может быть в файле с именем "margins.css", который определяет только поля.