Styling Conventions and Methodologies
Conventions​
Block-Element-Modifier (BEM)​
BEM is a naming convention standard for CSS class names. It has fairly wide adoption and is immensely useful in writing CSS that is easier to read, understand, and scale [1]. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project [2]. BEM also aims to write independent CSS blocks in order to reuse them later in your project [3].
Methodologies​
Atomic Design​
Atomic Design is a CSS methodology created by Brad Frost. It provides direction for creating scalable systems, reusable components, and design systems. Atomic Design was inspired by chemistry, which is why the building blocks are called atoms, molecules, organisms, templates, and pages [4].
Composition Utility Block Exception (CUBE)​
CUBE CSS is a CSS methodology geared towards simplicity, pragmatism, and consistency. CUBE stands for Composition Utility Block Exception. It is a tool-agnostic methodology that is very much an extension of good ol’ CSS, rather than a reinvention. The core of CUBE CSS’ methodology is that most of the work is already done for us with global and high-level styles [5, 6].
Reading List​
- BEM CheatSheet https://bem-cheat-sheet.9elements.com (2023.04.18)
- Atomic Design Book https://atomicdesign.bradfrost.com (2023.04.18)
- Minimal snippets for modern CSS layouts and components https://smolcss.dev (2023.04.19)
- Modern CSS Solutions for Old CSS Problems https://moderncss.dev (2023.04.19)
Sources​
- https://sparkbox.com/foundry/bem_by_example (2023.04.18)
- https://css-tricks.com/bem-101/ (2023.04.18)
- https://codeburst.io/understanding-css-bem-naming-convention-a8cca116d252 (2023.04.18)
- https://bradfrost.com/blog/post/atomic-web-design/ (2023.04.18)
- https://andy-bell.co.uk/cube-css/ (2023.04.18)
- https://blog.logrocket.com/cube-css-alternative-css-methodology/ (2023.04.18)