Какой лучший способ организовать правила CSS?

Какие стратегии помогут вам отслеживать большое количество правил CSS? Как вы упорядочиваете свои файлы, блоки кода и свои правила?

Ответ 1

для большого файла правил css я бы организовал его таким образом

предоставлять любые правила CSS reset сначала
предоставлять общие/общие правила (например, p {color: # 553423;} next
разделите оставшийся документ по разделам страницы
помещает каждое правило в одну строку с общими правилами, за которыми следуют более конкретные правила.
алфавитные селектора внутри каждого правила

Пример:

/*****
/*  ~masthead
/*****

#masthead {background-color: #cc00ff; color: #fff; width: 950px; }
#masthead h1 { background: transparent url(logo.png) no-repeat; text-indent: -9000px; width: 200px; }

/*****
/*  ~content
/*****

#content { background-color: #fedefd; margin:0; width: 357px; }
#content h1 { font-size: 120%; font-weight: bold; margin: 50px 20px 50px 70px; }
#content p em { color: magenta; }

Таким образом вы можете

легко найти раздел (поиск ~ masthead и вы находитесь в верхней части раздела)
легко сканировать все правила для раздела сразу, чтобы определить, закрыто ли что-то или нет.
легко настраивать правила даже в длинных строках. Селекторы алфавита гарантируют, что "цвет" не появляется дважды в одном правиле.

Ответ 2

Мои 4 подсказки:

Упорядочить ваш css для дочерних элементов отступа, кроме остальных:

#main_side {
    width: 392px;
    padding: 0;
    float: right; }

    #main_side #featured_articles {
        background: #fff; }

    #main_side #frontpageads {
        background: #fff;
        margin: 8px 0; }

Использовать сокращения:

margin:5px 0 4px 10px;

Разделите таблицу стилей на определенные разделы:

Глобальные стили - (тело, абзацы, списки и т.д.), заголовок, структура страницы, заголовки, текстовые стили, навигация, формы, комментарии, дополнительные функции

Дополнительно: используйте компрессор для сжатия вашего кода в меньший размер файла.

Ответ 3

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

Кроме того, вам не следует называть классы css после их появления, например h1.blue или tr.55. Именование классов CSS таким образом полностью поражает цель использования CSS. Имейте в виду, что когда-нибудь вы захотите изменить все, что является синим, красным. Если вы назовете свои классы .blue и .red, вам нужно прикоснуться к разметке, чтобы выполнить свою задачу. Однако, если вы назовете свои классы .moduleHeader или аналогичные, вы можете изменить цвета этих модулейHeaders в файле css, не касаясь разметки.

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

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

В зависимости от размера сайта может быть хорошей идеей добавить структурные элементы в один файл и стилистические элементы (цвета, варианты шрифтов и т.д.) в другом файле css. Это позволяет вам иметь совершенно полезный сайт с ТОЛЬКО структурными элементами, а также позволяет "перепроектировать" сайт, только касаясь или заменяя "стилистический" css-лист.

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

В одном объявлении класса или идентификатора я также упорядочиваю свои атрибуты в алфавитном порядке. Я пробовал другие организационные структуры, но единственный, который, похоже, работает для других людей, без обучения, в алфавитном порядке.

Ответ 4

Как правило, я стараюсь, чтобы правила от общего к конкретным. Например, начало документа может иметь правила для body, div, h1 ect. После этого я перейду в специальные правила класса. После этого в конце правила выполняются по id.

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

Ответ 5

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

/Allan

Ответ 6

Мой основной подход - посмотреть на него с программной и стилистической точки зрения.

Избегайте повторения
Комментарий больших блоков кода
Если возможно, используйте сокращенные свойства css.
Ярлыки классов разумно, избегайте таких вещей, как class_001/tom_cruise, которые не имеют смысла.

Закажите ваши файлы CSS следующим образом:

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

Полезная ссылка: http://www.456bereastreet.com/archive/200610/useful_tips_for_writing_efficient_css/

Ответ 7

Используйте CleverCSS, небольшой язык разметки, который снимает боль с написания и организации CSS.

Ответ 8

Я наткнулся на этого органайзера через @smashmag на твиттере, работает лучше, чем я себе представлял - styleneat.com

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

Ответ 9

Помимо всех советов, упомянутых другими, я склонен делить мой CSS на несколько файлов. Один файл для основной навигации, один для нижнего колонтитула, один для основной типографии, один для форм, по одному для каждого отдельного "объекта" на странице.

Затем я создаю одну общую таблицу стилей, в которой @import все эти файлы. Когда я готов к развертыванию в производственной среде, крошечный Ruby script расширяет эти операторы @import в один файл, тем самым уменьшая количество требуемых HTTP-запросов.

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

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

#some_object {
  /*
   * What, where, why, how...
   */
  font-size: 1.2em; /* 12px */
}

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

/* @group My section title */
    #some_rule {
        ...
    }
/* @end */

Ответ 10

Если вы разделите свой CSS на отдельные файлы, и у вас их много, имейте в виду, что Internet Explorer имеет ограничение на 31 файл CSS. Он не будет загружать любые стили за пределами этого предела.

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

Ответ 11

Разделяйте правила компоновки по цветным и стилистическим правилам.

Ответ 12

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

http://milanadamovsky.blogspot.com/2010/04/advanced-css-style-order.html

Милан Адамовский

Ответ 13

Я сохраняю все стили непосредственно в тегах на самой верхней части моей таблицы стилей. Ниже приведены любые общие классы CSS.

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

#container { width: 600px; ... }
#container #header { .... }
#container #header h1 { font-size: massive; }

#container .column [ .. }
#container #left-column {.. }
#container #left-column #content { ... }

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

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

#content h2 { ... }
#content h3 { ... }
#content ol, 
#content ul, 
#content dl { ... }

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

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

Я использую сокращенное обозначение для полей (e.x. margin и border), потому что я должен TRouBLe запомнить их (верхний, правый, нижний, левый). Я избегаю использования сокращений для фона и шрифтов, потому что они немного сложнее запомнить.

Например:

.rule { 
  display: block; visibility; visible; 
  position: relative; float: left; z-index: 1; top: 3px; left: 10em; 
  width: 100px; height 30px; overflow: hidden; 
  margin: 1px 3px 5px 1px; border:3px dotted #ff0; padding: 5px; 
  background-color: #f0f; background-image: url(/foo/bar); color: #000; 
  text-align: left; text-decoration: none; line-height: 3px; word-spacing: 2px; letter-spacing: 1px; 
  font-family: sans-serif; font-weight: bold; }

Ответ 14

Я использую несколько методов:

Группа #ID/класс
Комментировать основные блоки, используя знак подчеркивания для легкого поиска (/* _IDName/*)
Использование сокращений CSS помогает уменьшить размер файла, что упрощает управление.

В сети есть несколько хороших статей, которые я использовал. Я попробую найти их снова.

Ответ 15

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

Ответ 16

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

Я также разбиваю отдельный файл для печати.

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

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

Ответ 17

Мне нравится хранить css в папке Content, которая содержит статический контент для сайта. Затем я обычно стараюсь иметь один файл css для "бизнес-контекста". Поэтому, если у меня есть раздел веб-сайта, где пользователи зарегистрированы для торговых выставок, URL может быть "[host]/shows/", а мой файл css будет "[host]/content/styles/shows.css". Если ситуация усложняется, а "показания" становятся слишком большими, я могу создать папку "content/shared/" и "content/shows/" для соответствия субдоменам "show". Проблемы с переименованием становятся тривиальными с помощью Resharper или "Find and Replace".

Ответ 18

Разбивается на разделы и подразделы с оглавлением вверху. Алфавитный.

Ответ 19

Я делаю файл по умолчанию для некоторых правил по умолчанию (применяется к большинству подстраниц)
Каждая подстраница имеет свою собственную таблицу стилей .css(если это необходимо)
Я использую короткие строки (background: #FFF url (../images/header_1.jpg) 0 0 repeat-x;)
Классы ony, если у меня есть несколько элементов с заданным классом (если один элемент - использовать id)
Избегайте повторения, если вы можете наследовать - сделайте это

Ответ 20

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

Я также обнаружил, что предпочитаю сохранять собственные правила css более или менее самостоятельно, вместо того, чтобы их разделять на более мелкие правила, а затем объединять их в определении класса. Мне легче поддерживать, если все коды для div, например, находятся в одном или двух правилах, а не во многих, которые мне, возможно, придется искать. Это может означать, что есть некоторое повторение кода и большой файл css, но разница не кажется такой большой, и я предпочитаю ремонтопригодность.

Ответ 21

Попробуйте ProCSSor или Styleneat, оба отличные.

Ответ 22

Я особенно ценю советы, приведенные в в этой статье.