This page outlines possible approaches for managing CSS in SDL Tridion. If you haven't yet, please read the page on managing CSS in Tridion.

A single component containing all styles for a website

Flat CSS may also be called:

• Single CSS File

• Single stylesheet is added as Binary or Code Component
• CSS is published using one of the two standard publishing practices.

This is often used for small websites or for projects where little development is required of a single developer.

---

CSS files are broken into multiple parts. The big idea is that the CSS files are divided by "blocks" or single sets of requirements. There may be one file for header, another for navigation, another for a widget.

• Layered CSS
• Object Oriented CSS (OOCS)

• CSS is split into multiple parts
• Folder is created in Tridion to contain multiple parts
• CSS parts are typically divided as components / non-components
• CSS parts typically address one block on the web page (usually a single set of UI requirements)
• CSS file names start with xxx- to denote order in which they should be assembled on a CSS page
  • 001-reset.css
  • 002-branding.css
  • 003-header.css

Frank M. Taylor: Layers of Design

Modular CSS is used when multiple developers may be working on a project and need to develop CSS, HTML, or JavaScript. This allows for a team to develop multiple elements of the front-end without needing to merge changes into a single file.

---

CSS files are broken into multiple parts with a distinct pattern. The big idea is that a single design element is separate, discrete, and reusable in another web site.

• Syndicated CSS
• Object Oriented Design (OOD)

• CSS is split into four broad sections.
  • Reset: meyer reset, normalize css
  • Brand: font families, color,text, border size, width, hover effects, animations for entire site
  • Layout : layout for pages. Addresses 1 column, 2 column, 3 column. Only styles major wrappers
  • Components: Layout CSS for individual component templates.
• CSS files are labelled with a numbering pattern that demonstrates to which section the file applies.
  • 000 for reset000-reset.css
  • 001-009 for branding: 001-typography.css, 002-colors.css, 003-tables.css, 004-global-classes.css
  • 010 - 019 for Layout :010-oneColumn.css, 011-twoColumn.css, 012-oneColumn-mobile.css
  • 020 - 099 for Component Templates: 020-Header.css, 021-Footer.css, 030-carousel.css
• Styles do not overlap from one to the other.
• Component CSS does not contain branding, except in cases where the component template has a non-branded feature
• Page template typically contains over 30 CSS components

	Pros	Cons
Flat CSS	Easy to deliver website CSS remains as-delivered Training is minimal Easily integrates to a front-end designer's workflow	Not good for a team slow to update a single component template Time consuming to debug front-end issues Unmonitored browser hacks Can become unsustainable over time
Modular CSS	Works for a Team Easy to update a single component template Design is sustainable Easy to manage FOUC by reorganizing components of a CSS page Easy to add or remove components	If CSS is not written in distinct parts, time consuming to split it up risk of losing some code training required for new people risk of repeated styles browser hacks are easily managed risk of inconsistently written CSS across modules
Syndicated Design	Works for a Team Easy to update a single component template Design is sustainable Easy to manage FOUC by reorganizing components of a CSS page Easy to share brand to another website Easy to share the layout of a component template to another publication easy to update layout without affecting entire experience Easy to add or remove components easy to add responsive modules Easy to switch to new CSS layout methods such as Regions and Felxbox	If CSS is not written in distinct parts, time consuming to split it up time consuming to agree on a labeling system risk of losing some code training required for new people risk of repeated styles browser hacks are easily managed risk of inconsistently written CSS across modules