Three layer OOCSS architecture [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 8 years ago.

Improve this question

I am seeking discussion regarding structure/architecture for a three layer style guide that follows OOCSS principals (inuit.css, smacss, etc.). If you are familiar with inuit.css, you will know that the framework is built for two layers. The bottom layer (foundation) would represent the core of inuit.css. Basically the objects and abstractions that should never be changed. The second layer includes extension to the foundation layer, i.e., skins and themes specific to the application at hand. The same underlying pricinpal of separating the base objects from the skinning/theming is conveyed in OOCSS per Nicole Sullivan. That being said, I am looking for discussion regarding a three layout scenario. The first layer represents the base objects. The second layer represents skin/theming/extensions to the base objects at a local level. The third layer represents the skin/theming/extending to the local level at an application specific level.

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

Let's assume there is a company with 50 different applications. I need all 50 applications to inherit the global style guide. Secondly, lets assume 25 of the 50 applications need to be unified and also inherit the same style guide. This would be the local level. Finally, each of the 25 applications might have specific theming necessary to override the local and global guides. I should also mention, SASS pre-processor should be included in the architecture. Each proceeding level should have the ability to override variables previously established (example: global assign variables base-font-size variable to 16px. Local applications override base-font-size to 15px. One of the local applications overrides local level to base-font-size to be 12px.

Curious to know how people would format the directory structure and I look forward to the responses!

Answer 1

CSS is a structured language by its nature.

If you sequentially include three stylesheets into your page, e. g.:

<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">

styles from latter files will override styles from former files.

For example, you may have .logo { font-size: 1.5em; } in your global.css. If you do .logo { font-size: 2em; } in application.css, it will prevail.

No special structure is required, you just have to ensure two things:

• to override styles, latter styles should either be more specific or have identical selectors;
• for overriding with identical selectors, correct order of files is important (a latter file prevails).

Of course, SASS can (and should) be used to prepare those CSS files (and merge them together, if required), but it doesn't mean that it things should get complicated. Keep it simple, soldier!

If you do want to go the complicated way, you should consider using some of SASS goodies. You could generate application's CSS with mixins. Mixins have default values for everything which can be overridden with arguments. Also, consider creating a Compass extension out of your Global project. It would allow you generate application projects out of a template, and also provide mixins and stuff.