Специфика CSS и нормализация ваших стилей после сжатых сроков - PullRequest
Новая
       16

Специфика CSS и нормализация ваших стилей после сжатых сроков

1 голос
/ 10 февраля 2009

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

Может кто-нибудь предложить метод методического прохождения этой таблицы стилей, чтобы объединить мои повторяющиеся свойства и т. Д.? Я сомневаюсь, что есть какие-то инструменты, чтобы сделать это для меня, но мне интересно, как другие справляются с этой ситуацией?

Спасибо.

Ответы [ 2 ]

1 голос
/ 10 февраля 2009

На самом деле есть инструменты для рефакторинга CSS , которые были довольно хорошо освещены в SO.

Я не могу ручаться за них, так как я всегда делаю рефакторинг вручную. Моя техника состоит в том, чтобы разделить существующие стили на:

  • Компоновка
  • Типография
  • Цвета (Look & Feel)
  • Хаки

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

После этого наличие оглавления в верхней части страницы облегчает поиск ваших разделов и, как правило, их поиск.

1 голос
/ 10 февраля 2009
  1. Объедините CSS с их сокращенными свойствами, если это возможно.
  2. Используйте уникальные идентификаторы доменов для применения стилей к дочерним элементам этого элемента.
  3. Вы можете использовать несколько классов CSS для одного и того же элемента, например, class = "somestyle some-other-style". Используя это, вы можете взять дублированные стили CSS и определить их в одном.
  4. Используйте селектор * для применения стилей ко всем дочерним элементам.
  5. Если все это в одном большом CSS-файле, разделите код на разделы, в которых стили релевантны страницам вашего сайта, т.е. / * MEMBERS PAGE * /
  6. Запустите стиль через онлайн-компрессор, чтобы уменьшить размер кода. Некоторые даже автоматически комбинируют элементы, добавляя меньше сложности.

Это должно начать вас. Трудно добавить дальше, это действительно зависит от того, как изложены ваш HTML-код и структура. Если бы вы могли представить идею, мы могли бы помочь в дальнейшем.

...