How do you structure your CSS to ensure that it is reusable throughout the application? What sort of tools or patterns do you use to make this simpler?

Answer 1

This is a loaded question as it highly depends on how your code-base is structured and organized.

In general, precompilers are used in order to "string together" files accordingly.

I recommend looking into something like Sass to get an introduction to the concepts. Basically, the most common solution is to have one CSS file which is a result of operations such as importing files and interpreting variables and functions (often referred to as mixins in this context).

An easy example:

main.scss

@import 'theme', 'buttons';

theme.scss

$primary-color: blue;

buttons.scss

.button{

/* note how you can nest selectors*/

.button-primary{

background-color: $primary-color;

}

}

Pitfalls:

1. Watch out for the correct order of importing
2. Watch out for the difference of scss and sass files
3. Watch out for differences in compilers (ruby, lib, dart)

Final note:

In more complex scenarios, compilation of CSS goes through other dynamic processes first. Looking into concepts like postCSS or webpack might give you some insight into what's possible, once you are comfortable with the general approach.