FEL One Day: Structuring CSS
Ben Scott detailed his experience of working on the BBC Programmes site and his talk, like many of the others at Front End London centred on CSS Architecture.
Ben outlined some of the problems with CSS when used on large scale sites:
- People write new CSS for everything.
- Everything has a global scope.
- Easy for code to become bloated
These problems are solved by building smaller, isolated parts for a site. The single responsibility principle is to do one thing and do it well. With this in mind CSS should be split down to components, macro-layout and theming.
CSS components should like Lego bricks to allow them to be reused in a range of different scenarios.
Ben’s recommended approach is for the code to be additive, to start simple and build in complexity. He advocated a mobile-first approach.
Build bottom up: start with base styles, components and then pages. Brad Frost’s Atomic Design cited as a good example.