Flow CSS
A proposal for structuring CSS in web projects.
There are bunch of various CSS guidelines, methodologies and blueprints are available on the internet. I did research (briefly) on numbers of leading projects before come down to draft this document.
Here’s a list of a few of main existing guidelines which I looked into:
* Object-Oriented CSS (OOCSS)
* BEM — Block, Element, Modifier
* SMACSS — Scalable and Modular Architecture for CSS
* MaintainableCSS
* SUIT CSS
* Systematic CSS
Before move into the proposing solution, let’s summarize the few of existing guidelines here;
Object-Oriented CSS (OOCSS)
OOCSS is based Object-oriented thinking pattern as implicates by its’ name.
A best example for uses of OOCSS is Bootstrap. All the bootstrap style classes has organized in OOCSS manner.
BEM — Block, Element, Modifier
BEM is entirely focused on naming convention of CSS classes. It has divided into three type of CSS classes based on the behaviour.
Block: .block
Element: .block__element
Modifier: .block__element--modifier
SMACSS — Scalable and Modular Architecture for CSS
SMACSS is also based on categorization of CSS rules. Unlike BEM; SMACSS classified CSS rules into five categories:
* Base: Primary html DOM elements, such as `body`, `h1`, `p` `a` ..etc.
* Layout: This may be like `.page-layout`, `.contact-form`, `.alert` ..etc.
* Modules: Modules are reusable components. `.btn`, `.input-field`
* State: The states of the DOM element. `.show`, `.notified` ..etc.
Conclusion
The conclusion is; all the above guidelines have both pros and cons and those things are always depends on the use-case and the complexity of the application.
Secondly, in a real-world project, if someone or an organization wants to implements a styleguide such as for web development projects; it can’t be based on a single methodology (above mentioned or any other). In that case, we may need to make an additional set of rules for a better implementation.
Proposal
Objective
* Structuring CSS in large web projects
* Keep codes transparent, sane, and readable
* Keep styles/stylesheets as maintainable
* Keep codes as scalable
Guidelines
Use latest CSS versions and related technologies as possible
In the time I draft this document; the latest CSS version is CSS3 and there are two commonly use CSS preprocessors as LESS and SASS.
Always `Minify`, `Transpile` the CSS codes as needed
Use `Gulp`, `Webpack` or any other task-runner/module bundler to automate the process.
File / Directory structure
There are no right or wrong way to structured the CSS files, but keep them organize in module-wise manner is a best way to manage a large project.
Here, we keep all the third-party CSS libraries (if any) in `vendor/` directory, and `SASS` files in `sass/` directory as divided into separate modules. Finally, the transpiled-minified version of all, keeps as in `final.css`.
Code styles
Put stylesheet information in top of the each CSS file
Follow the YAML standards
Put a title for each main sections
Tabs and indent style
Use two space indents and maintain it properly in the entire codebase.
Write multi-line CSS unless it’s just only a single line of code
Avoid uses of `!important` as possible
The one of the best practices of CSS in a larger codebase is avoid uses of `!imporatnt` as possible.
Adding test/temporary styles
Put an additional tab indent for a test/temporarily added styles.
Disabling style rules
Add `x-` prefix for disable style rule without removing entirely.
Keep all the style rules in alphabetical order
Avoid batch styling and use classes instead
Always try to write styles in simplified and minified ways as possible
Use a clearfix class to clearing `float`
Naming conventions
Use a specific prefix for each of custom CSS rules to prevent any possible complication may happen with third-party CSS libraries
Use lowercase letters in all the style rules
Use `-` instead of `_`
Keep selector (id/class) names short and meaningful as possible
Use `ids` and `classes` as relevant always
Always follow the semantic naming for HTML elements and styles
BEM-like naming convention for CSS rules
This a basic draft for a better styleguide implementation for web projects focus on scalability and maintainability.
References
* Structuring CSS in large projects
* Principles of Code Cleanup and the New Best Practices
* High-level advice and guidelines for writing sane, manageable, scalable CSS
* BEM and SMACSS: Advice From Developers Who’ve Been There
* A Look at Some CSS Methodologies
