Popular CSS methodologies for scaling web projects
It is important to have a standardised approach to CSS architecture and naming conventions when developing CSS at scale. Conventions can benefit the team to produce higher quality, consistent code that can be ported between projects. This also gives teams clear guidance on syntax and style preference.
We are currently reviewing our own CSS conventions and I wanted to provide a basic summary of some of the methodologies available today, illustrate the pros and cons and hopefully give a steer on selecting a suitable approach.
All frameworks and guidelines use the DRY (Don’t repeat yourself) principles. For this article, I will briefly outline the following:
- OOCSS - Object orientated CSS
- BEM - Block element modifier
- SMACSS - Scalable Modular architecture
- RSCSS - Reasonable System for CSS Stylesheet Structure
- ITCSS - Inverted Triangle CSS
1. OOCSS (Object orientated CSS)
Object orientated CSS is an abstract idea on how to write code. OOCSS does not provide specific rules but is more about identifying patterns to create reusable modules in web projects.
A user interface is made up of multiple components that should be re-used as much as possible. OOCSS focuses on a single responsibility and separation of concerns.
The key principles are as follows:
- Seperation of structure from skin
- Seperation of container and content
References:
2. BEM (Block element modifier)
Documentation: https://en.bem.info/
BEM is a CSS organisational methodology that developers use to create reusable components. It is suitable for large projects with many rulesets and selectors. BEM strives to encourage:
- CSS naming conventions that provide transparency and meaning
- Avoid CSS specificity issues or problems with cascading
- Resuability - easily transfer blocks between projects
- Reduce CSS and page load
BEM breaks down a website into blocks, elements, and modifiers. This helps to categorise, organise, and label user interface components to provide meaning based syntax.
The following screens from getbem.com provides a high-level understanding:
Screenshot from getbem.com. Green denotes blocks, blue are elements and red are modifier.
Naming Conventions:
The central focus of BEM is to provide a naming structure for CSS classes.
- Block names must be unique.
- Block names should equal the CSS class.
- Element names must be unique to the block.
- Id’s are not used
BEM provides an easy to understand set of conventions that scale well. It is suitable for large teams to adopt for improved maintenance and consistency for bigger projects. One of the criticisms of BEM is that it is prone to producing messy and convoluted HTML however Syntax rules can be adopted based on your team's needs.
Resources:
3. SMACSS - Scalable Modular architecture
Documentation: http://smacss.com/
SMACSS is more a of a style guide than a rigid framework. It provides a solid pragmatic foundation for naming but does not offer much in the way for naming conventions of classes inside components.
What is SMACSS?
SMACSS is a style guide that attempts to enforce a specific structure for stylesheet organisation. The focus in on categorising CSS rules to produce patterns that are easy to follow.
Organisation
SMACSS is composed of five key categories. These categories are used to structure your SASS into the following folder structure:
_Base.scss
The base contains default typography and reset styles and global styles. These styles should default styles and resets.
_Layout.scss
Layout.scss divides the page into major sections and holds multiple modules together. Example of appropriate styles to manage within Layouts are headers, main content, footer. ID’s are used to identify layouts.
_Module.scss
Modules are the most important aspect of SMACSS. These are used to organise reusable components. Any reusable UI components should be organised within modules.
_State.scss
The state defines a way to describe how modules look in a particular state. The helps define what an element looks like in a specific time. An example could be an active tab or collapsed accordion etc.
SMACSS provides a good foundation on how to organise CSS and encourages object orientated programming to create more modular designs. This helps to make things more usable and scalable.
Resources
4. RSCSS - Reasonable System for CSS Stylesheet Structure
Documentation: https://rscss.io/
The central focus of RSCSS is the development of components. The main idea of RSCSS is to create a parent component, which will govern internal elements.
- Components are broken into elements
- Classes only have one word
RCSSS provides a set of guidelines on naming components and structuring CSS. The documentation provides naming conventions and ideas on the following:
- Component
- Elements - things inside your component
- Variants
- Nested components
- Layouts
- Helps
Resources
5. ITCSS - Inverted Triangle CSS
Documentation: No official documentation
ITCSS helps you to organise and divide CSS into the following layers of importance. This set of guidelines can be used in conjunction with methodologies mentioned above (BEM, SMACSS).
Screenshot from Creativebloq.com
- Settings layers - Global SASS variables
- Tools - SASS functions and mixins
- Generic- Normalise or css resets. General global rules
- Elements – typography elements like H1, a
- Objects - Non cosmetic design patterns like layouts and Grids
- Components - Styling main UI components
- Trumps – Overwrides, utilities and helper calsses
Resources
Conclusion
There are many frameworks and guidelines available today that help to structure CSS at scale. Each framework is only going to be as successful if all team members are onboarded and understand each framework. Adopting a framework to suit your needs and keeping things as simple as possible is key to successfully maintaining a methodology.
Are you planning a website redevelopment? Get in touch to discuss your options.