Как мне реорганизовать мой CSS?

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

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

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

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

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

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

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

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

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

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

ИЗМЕНИТЬ

Вещи меняются и развиваются навсегда; Что касается подхода OOCSS/SMACSS, я с удовольствием следил за ним, методология Yandex BEM для CSS, я хотел бы добавить его как дополнительная рекомендация к вышеуказанным

Ответ 3

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

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

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

Ответ 4

Основываясь на этом текущем раунде работы, вот что я получил до сих пор:

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

• У вас есть система для обработки нот To-Do в вашем HTML и CSS. Многие IDE поддерживают это напрямую, или глобальная функция поиска будет очень удобной. Помимо проблем с тегами, вы хотите отметить приоритет и, возможно, даже функциональную область (но держите ее простой, а не нагрузкой).
• Не начинайте пересматривать код. Сначала используйте свою систему To-Do.
• Сделайте краткий список ваших общих целей.
  
  • Рассмотрим общие силистические изменения, такие как цвет или схема шрифтов.
  • Обзор передовой практики для CSS. Определите области, в которых ваш подход неэффективен, или где эффективный подход может применяться более последовательно. Примеры:
    • Консолидация классов
    • Исключить случайное использование встроенных стилей
    • Удалите стили, которые не используются или дублируются или конфликтуют
    • Улучшить общую согласованность; применить набор условных обозначений
    • Улучшение единиц измерения
    • Используйте имена классов и идентификаторов, которые отражают контент, а не формат
  • Решите, какую часть рынка браузеров вы хотите поддерживать, и насколько обниматься или полагаться на новейшие стандарты.
  • Решите, есть ли какие-либо новые подходы, которые вы хотите принять. Примеры:
    • Использование таблицы стилей reset для стандартизации представления браузера
    • Использование рамки CSS
    • Использование специализированной библиотеки, например, для помощи с формами
    • Динамический CSS (недавно я посоветовал использовать PHP для обработки моего CSS, чтобы я мог динамически контролировать свою цветовую схему. Но я вернулся к прямому CSS, потому что мне нравится представление CSS-кода в моей среде IDE и гибридный метод messed это вверх.)
• Просмотрите список целей и решите, что следует преследовать сейчас. Любые крупномасштабные изменения следует рассматривать как отдельные, если это возможно. Если макет столбца беспорядок, не время узнать, как CSS может элегантно заменить ваш javascript. То же самое касается лучших практик, стилистических изменений и т.д.
• Если у вас настроены ваши файлы CSS для скорости (например, сжатый размер или все CSS в одном файле), измените это. Разделите код в управляемом человеком формате. Позже, когда вы закончите, попробуйте провести сравнительный анализ, чтобы узнать, достаточно ли более понятная версия для производства.
• Отправьте свой CSS в validator. Обратите внимание на любые нарушения, которые вы хотите исправить.

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

  Работа

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

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

Ответ 5

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

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

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

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

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

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

Ответ 6

Этот ответ касается примечания; "Я использую 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/

Ответ 7

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

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

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

element,
otherlement
{
  margin:10px;
}

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

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

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

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