Ответ 1

Взгляните на эти три слайд-шоу:

• Красивый поддерживаемый CSS
• Поддерживаемый CSS
• Эффективный, поддерживаемый, модульный CSS

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

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

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

#content {
    /* css */
}
    #content div {
        /* css */
    }
    #content span {
        /* css */
    }
    #content etc {
        /* css */
    }

#header {
    /* css */
}
    #header etc {
        /* css */
    }

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

Поймите и используйте cascade и specificity (поэтому сортировка ваших селекторов по алфавиту сразу).

Разделял ли я свой CSS в нескольких файлах и в каких файлах зависит размер и сложность сайта и CSS. У меня всегда есть reset.css. Это обычно сопровождается layout.css для общего макета страницы, nav.css, если меню навигации на сайте немного сложнее и forms.css, если у меня есть много CSS для стилей моих форм. Кроме этого, я все еще сам это понял. Я мог бы colors.css и type.css/fonts.css отделить цвета/графику и типографию, base.css, чтобы обеспечить полный базовый стиль для всех HTML-тегов...

Ответ 2

Я стараюсь упорядочить свой css следующим образом:

• reset.css
• base.css: Я устанавливаю макет для основных разделов страницы
  • общие стили
  • Заголовок
  • Nav
  • Содержание
  • сноска
• дополнительные- [page name].css: классы, которые используются только на одной странице

Ответ 3

Однако вам будет проще читать!

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

Некоторые вещи я скажу, хотя:

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

Лично я кодирую свой CSS следующим образом:

* { /* css */ }
body { /* css */ }
#wrapper { /* css */ }
#innerwrapper { /* css */ }

#content { /* css */ }
#content div { /* css */ }
#content span { /* css */ }
#content etc { /* css */ }

#header { /* css */ }
#header etc { /* css */ }

#footer { /* css */ }
#footer etc { /* css */ }

.class1 { /* css */ }
.class2 { /* css */ }
.class3 { /* css */ }
.classn { /* css */ }

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

Ответ 4

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

.class {border: 1px solid #000; padding: 0; margin: 0;}

Это самое дружелюбное, когда дело доходит до большого количества объявлений.

Mr. Снук писал об этом почти четыре года назад:).

Ответ 5

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

BEM (Блок, Элемент, Модификатор)

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

Блок

Автономная сущность, которая имеет смысл сама по себе, например:

header, container, menu, checkbox, input

Элемент

Части блока и не имеют отдельного значения. Они семантически привязаны к своему блоку:

menu item, list item, checkbox caption, header title

Modifier

Флаги на блоках или элементах. Используйте их для изменения внешнего вида или поведения:

disabled, highlighted, checked, fixed, size big, color yellow

OOCSS

Цель OOCSS - поощрять повторное использование кода и, в конечном счете, более быстрые и эффективные таблицы стилей, которые легче добавлять и поддерживать.

OOCSS основан на двух основных принципах:

• Разделение структуры с кожи

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

2. Разделение контейнеров и содержимого

По сути, это означает, что "редко используют стили, зависящие от местоположения". Объект должен выглядеть одинаково независимо от того, где вы его положили. Поэтому вместо стиля, специфичного для .myObject h2 {...}, создайте и примените класс, который описывает этот вопрос, например. Это дает вам уверенность в том, что: (1) все неклассифицированные s будут выглядеть тоже самое; (2) все элементы с классом категории (называемые mixin) будет выглядеть одинаково; и 3) вам не нужно создавать стиль переопределения для случая, когда вы действительно хотите .myObject h2 выглядеть как нормальный.

SMACSS

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

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

Существует пять типов категорий:

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

Base Содержит reset и стили стилей по умолчанию. Он также может иметь базовые стили для элементов управления, таких как кнопки, сетки и т.д., Которые могут быть перезаписаны позже в документе при определенных обстоятельствах.

Разметка Будет содержать всю навигацию, панировочные сухари, файлы Sitemap и т.д. И т.д.

Модули Содержите специфические для конкретной области стили, такие как стили контактной формы, плитки домашней страницы, список продуктов и т.д. И т.д. И т.д.

Государство Содержит классы состояний, такие как isSelected, isActive, hasError, wasSuccessful и т.д. И т.д.

Тема Содержит любые стили, связанные с тематикой.

Здесь слишком много подробностей, но посмотрите и на другие:

• SuitCSS
• AtomicCSS (не Atomic Design)
• oCSS (органический CSS)

Ответ 6

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

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

Ответ 7

Я иду с этим порядком:

• Общие правила стиля, обычно применяемые к голым элементам (a, ul, ol и т.д.), но они также могут быть общими классами (.button,.error)
• Правила макета страницы, применяемые к большинству/всем страницам
• Индивидуальные правила компоновки страниц

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

Ответ 8

Поскольку фактическое упорядочение является важной частью того, как применяется ваш CSS, кажется немного глупо идти вперед с предложением "по алфавиту".

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

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

Ответ 9

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

Например: reset.css, design.css, text.css и т.д. Когда я выпускаю конечный продукт, я перепутаю все стили в один файл.

Еще один полезный совет - сосредоточить читаемость на правилах, а не на стилях.

В то время как:

ul li
{
    margin-left: 10px;
    padding: 0;
}

Выглядит хорошо, вам нелегко найти правила, когда у вас есть, скажем, 100 строк кода.

Вместо этого я использую этот формат:

rule { property: value; property: value; }

rule { property: value; property: value; }

Ответ 10

Вот что я делаю. У меня есть страница индекса CSS без директив на ней и которая вызывает разные файлы. Вот краткий пример:

@import url("stylesheet-name/complete-reset.css");
@import url("stylesheet-name/colors.css");
@import url("stylesheet-name/structure.css");
@import url("stylesheet-name/html-tags.css");
@import url("stylesheet-name/menu-items.css");
@import url("stylesheet-name/portfolio.css");
@import url("stylesheet-name/error-messages.css");

Он начинается с полного reset. Следующий файл определяет цветовую палитру для удобства использования. Затем я создаю основной <div/>, который определяет макет, заголовок, нижний колонтитул, количество столбцов, где они подходят, и т.д. Теги html definses <body/>, <h1/>, <p/>, t и т.д.... Далее идут конкретные разделы сайта.

Он очень масштабируемый и очень понятный. Гораздо удобнее находить код для изменения и новые разделы dd.

Ответ 11

Я постоянно об этом беспокоился, но Firebug пришел на помощь.

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

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

Ответ 12

ITCSS

Гарри Робертс (CSS Wizardry)

Определяет глобальное пространство имен и каскад и помогает сохранить специфичность селекторов.

Структура

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

• (Настройки)
• (Инструменты)
• Общие понятия
• Элементы
• Объекты
• Компоненты
• Козыри

Ответ 13

Обычно я делаю это:

• <link rel="stylesheet" href="css/style.css">

• В style.css я @import следующее:

  @import url(colors.css);
  @import url(grid.css);
  @import url(custom.css); + some more files (if needed)
  

• В colors.css я @import следующее (при использовании пользовательских свойств CSS):

  @import url(root/variable.css);
  

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