This project's CSS architecture uses a combination of the BEM naming convention and the Inverted Triangle CSS architecture in order to have a maintainable, readable and scalable code structure.
BEM stands for Block Element Modifier and it categorizes the code into three groups:
The BEM naming convention helps to see how classes are related to each other.
For more information about BEM, please refer to this excellent article by Harry Roberts.
This project's CSS architecture uses namespacing. This means that every class in the codebase is prefixed with a certain string to explain what the code does and to avoid style leakage.
The namespaces are also used to separate the code base into different layers and this is where ITCSS comes into place.
The different layers that you find within the ITCSS architecture are, in the following order:
The codebase is structured in this order so that it is ordered from generic to explicit styles, low-specificity to more specificity (ID selectors are avoided as much as possible) and far reaching to local styles, which makes the framework scalable and maintainable.
For more information on ITCSS, please refer to this slideshow.
Where appropriate, use Svelte's inline styles, for example for uncommon components. This way the main stylesheet gets less bloated.