So you work at a company with several teams working on different projects, your CSS files are chaotic, and you’re constantly adding new members to the team. How do you get organized?
Don’t worry, we’ve got you covered. At Wolox, we created the Front-end Army to ensure that every line of CSS is correctly written and is easy to work with. The key, learning how to put an order in the front-end lines.
To integrate our different teams coding styles we first defined the guidelines and the techniques to use.
Defining a guideline and a technique
While they are often confused, a guideline is a syntactic agreement and a technique defines a way of thinking CSS.
Guideline
A set of syntactic rules that you must follow in order to create valid code under that guideline. You can use code linters to ensure that your CSS is valid.
Some of those rules include:
- Put a space after : in property declarations.
- Put a space before { in rule declarations.
- Put a line break between rule sets.
- When grouping selectors, keep individual selectors to a single line.
- Place closing braces of declaration block on a new line.
Note: The best thing to do when choosing a guideline is to go with the crowd and pick the most popular one.
Below is a short list of guidelines:
The guidelines above are quite straightforward. They may have things that you don’t like but PLEASE don’t fork one and create a custom version of it. All you are doing is creating a new guideline.
CSS Techniques
As I mentioned before, a CSS Technique is a way of thinking CSS. These techniques are focused on the semantic value of your style sheets and also provide a way of building your rules with some code design principles. Let me introduce you to BEM, SMACSS, and Expressive CSS.
BEM
BEM stands for Block, Element, and Modifier. It’s built around useful concepts to create large and maintainable applications.
- Bock: a collection of elements with a semantic value when displayed together.
- Element: an entity belonging to a block. It’s NEVER displayed by itself.
- Modifier: describes the appearance of blocks, elements, and their variations.
Example
So given the following design:
It should result in the following outcome:
And the BEMJSON would look like:
Opinion
BEM includes a file organization system, an SDK, a naming convention, and BEMJSON as a replacement for markup. It’s useful when you want to standardize several projects but it’s a bit of an overkill when you’re only working on a single website.
For more information about BEM check out https://en.bem.info/
SMACSS
SMACSS is not as strict as BEM. It provides a guide to group CSS rules under various categories with a main focus of identifying patterns by semantic value within an HTML document. Each category is setup with levels: starting with the general behavior of the website and ending with user customization.
- Base rules: They apply to the HTML tags. It’s how your document would look if we didn’t have any nested style rules.
- Layout rules: Using IDs is allowed here. You shouldn’t have more than… let’s say… 5. Front-end developers have created a myth about using IDs and now no one seems to use them anymore. But they are useful when used properly. The elements in your web app should not break the layout.
- Modules: A module is an element always inside a layout and is generally represented as concepts, like ‘.product’, ‘.book’, ‘.order’ etc.
- State: A state is the only category where overriding a previously defined rule is allowed.
- Theme: A theme is a customization option delegated to user preferences. Although it’s not so common anymore, it’s nice that is included.
Example
Your HTML should be:
In this case the CSS will only be based on the Base rules.
Opinion
SMACSS is based on CSS’s purpose: to build style based on cascade, going from general rules to specific ones. The semantic approach makes it easier to understand and is quite intuitive.
Expressive CSS
As the name suggests, this is based on expressiveness. By reading all the classes in one element you should be capable of knowing how the element will look. It delegates the semantic responsibility back to the tags. Additionally, it comes with a set of useful basic rules that resembles Bootstrap.
Example
Opinion
While it is true that Expressive CSS creates a big number of classes, it’s utility remains clear. On the other hand, Expressive CSS is highly focused on design. For this reason, it depends heavily on having a precise and complete design guideline.
Conclusions
A quick overview:
Each technique presented has its particular qualities and flaws. Because there are many other popular options to choose from, your best best is trial and error to find which may better fit your needs.
Keep in mind there are various other factors to consider: testing, continuous integration, and implementing all those ideas to the rest of the company. (Stay tuned for the upcoming posts about these topics.)
You have to start somewhere… and defining a guideline and a technique is the first big step in putting an order in your front lines.
