CSS Architecture

CSS Architecture

- Benefits

- Jonathan Snook rules

- Considerations/questions

CSS Architecture

- it's frustrating to work on messy codebases.

- how many times you made one change and affected other 3 or more?

The good news is that we can avoid all of this by planning a CSS architecture for the new project (doesn't apply to existing projects) we are working on.

CSS Architecture

Benefits

The major benefit of having a CSS architecture in place is scalability. It is very helpful when the project scope grows (adding new pages or modules)

 

- long term maintainability (design front end guidelines)

- easier to pick up work for new members

- easier collaboration

- smoother projects handover

- quicker changes implementation

CSS Architecture

Rules

Jonathan Snook wrote a really good book on CSS architecture explaining a number of rules to keep in mind when approaching CSS projects that need a solid structure:

- base styles

- objects

- components

- state

- utilities

- js hooks ??

CSS Architecture

Rules - Base styles

- default styling

- box-sizing

- typography

- reset

 

Nothing specific at this stage, no classes used

CSS Architecture

Rules - Objects

- no styling yet

- layout patterns

- grid

 

Ex.

.container-m { // reusable accros the site

      width: 960px;

     margin: auto;

}

CSS Architecture

Rules - Components

- self containing piece of UI

- independent from each other

- retain their styles regardless of their location

- navigation, slider, Channel 4 card, calendar

 

Example

CSS Architecture

Rules - State

- similar to React state

- expanded accordion

- open menu

- better used with classes like: "is-open" or "has-expanded"

 

CSS Architecture

Rules - Utilities

- the end of the chain (where "!important" might be allowed)

- single purpose helpers

 

.float-r { float: right };

 

CSS Architecture

 

It's really important that we adopt this approach as we will benefit a lot from it.  (faster changes/new modules implementation)

 

By having components retaining their style regardless of their location we will be able to move them around more easily. (PM it's just a case of copying and paste it)