Трехслойная архитектура OOCSS

Question

Я ищу обсуждение структуры / архитектуры для трехуровневого руководства по стилю, которое следует принципам OOCSS (inuit.css, smacss и т. Д.). Если вы знакомы с inuit.css, вы будете знать, что фреймворк построен для двух слоев. Нижний слой (фундамент) будет представлять собой ядро ​​inuit.css. В основном объекты и абстракции, которые никогда не должны быть изменены. Второй уровень включает расширение базового уровня, то есть скинов и тем, специфичных для данного приложения. Тот же самый базовый ценовой принцип отделения базовых объектов от скиннинга / тематики передается в OOCSS для Николь Салливан. При этом я ищу обсуждение сценария с тремя вариантами размещения. Первый слой представляет базовые объекты. Второй слой представляет скин / тематику / расширения базовых объектов на локальном уровне. Третий слой представляет скин / тематику / расширение до локального уровня на уровне приложения.

|+Application (specific to a single application) 
 |+Local (specific to a bundle of applications)
  |+Global  (non specific. Shared by any/every current future application)

Давайте предположим, что есть компания с 50 различными приложениями. Мне нужно все 50 приложений для наследования глобального руководства по стилю. Во-вторых, давайте предположим, что 25 из 50 приложений должны быть унифицированы, а также наследовать одно и то же руководство по стилю. Это будет местный уровень. Наконец, каждое из 25 приложений может иметь определенные темы, необходимые для переопределения локальных и глобальных руководств. Я должен также упомянуть, препроцессор SASS должен быть включен в архитектуру. Каждый исходящий уровень должен иметь возможность переопределять ранее установленные переменные (пример: глобальные переменные base-font-size для переменных назначаются в 16px. Локальные приложения переопределяют base-font-size в 15px. Одно из локальных приложений переопределяет локальный уровень в base-font -размер, чтобы быть 12px.

Любопытно узнать, как люди будут форматировать структуру каталогов, и я с нетерпением жду ответов!

Answer 1

CSS является структурированным языком по своей природе.

Если вы последовательно включили три таблицы стилей на свою страницу, например:

<link type="text/css" rel="stylesheet" href="global.css">
<link type="text/css" rel="stylesheet" href="local.css">
<link type="text/css" rel="stylesheet" href="application.css">

стили из последних файлов будут переопределять стили из предыдущих файлов.

Например, вы можете иметь .logo { font-size: 1.5em; } в вашем global.css, Если вы делаете .logo { font-size: 2em; } в application.cssЭто будет преобладать.

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

• для переопределения стилей последние стили должны быть более конкретными или иметь идентичные селекторы;
• для переопределения одинаковыми селекторами важен правильный порядок файлов (последний файл имеет преимущественную силу).

Конечно, SASS может (и должен) использоваться для подготовки этих CSS-файлов (и объединять их вместе, если требуется), но это не значит, что все должно усложняться. Будь проще, солдат!

Если вы хотите пойти по сложному пути, вам следует рассмотреть возможность использования некоторых вкусностей SASS. Вы можете генерировать CSS приложения с помощью миксинов. Mixins имеют значения по умолчанию для всего, что может быть переопределено аргументами. Кроме того, подумайте о создании расширения Compass из вашего глобального проекта. Это позволит вам создавать проекты приложений из шаблона, а также предоставлять миксины и прочее.