I'm writing CSS for a theme and was wondering how best to organise it...
I'm interested to hear from others:
- How do you organise CSS for a project/theme? One file, or spread across multiple files?
- How do you organise CSS in a particular file? What order are the rules in? What order are the declarations in?
- Do you utilise comments, nesting, variables, etc. in your CSS? If so, how?
- Do you use a CSS pre-processor? If so, which one?
- Any tips for using/writing CSS (in Backdrop or in general)?
- Are there any (unofficial) standard practices for CSS in Backdrop (other than https://docs.backdropcms.org/css-standards)?
Comments
The number of files is your choice, each developer has his own style, his own declaration order, and grouped into blocks related to the styling of a specific element. Everything should just be logical.
I use one file, I get about 1000 lines per project. Variables - of course, comments and regions* make navigation easier and help understand the code if a lot of time has passed.
I personally don’t understand how to use a preprocessor, in the sense that in the preprocessor there is one code structure, after conversion there is another. Then I will need to work with CSS on the hosting, I open the file and see a structure that is unfamiliar to me, and I need to understand it again (edit, organize, set structure and comments). In the process of maintaining the project, I will have to constantly edit the CSS on the hosting. Wouldn't it be easier to just start with pure CSS? I didn't delve into preprocessors for this reason. If my reasoning is naive, please tell me.
Standards must be followed, I agree. Only I like four spaces indentation.
* VS Code "Regions" allow developers to organize and collapse sections of their code. This feature can be helpful for managing large files and improving code readability.
I find organising into separate files for different elements help to maintain. Backdrop helps here as for the public it aggregates CSS for performance but you can switch that off and then you can trace what is happening down to the file and line using "Inspect Element" in your browser.
I personally like using Sass (SCSS variant) and that makes it easy to have a really well defined structure and it compiles into a single file.
I normally use indenting of 2 spaces as my editor is configured that way for doing PHP.
Sass supports using both Sass variables which look like
$variable
and CSS variables. The Sass variables are all converted when compiled whereas CSS variables are evaluated in the browser. I use a mix depending on the need; I prefer Sass for most, but use CSS where needed.Sass supports code style comments and CSS style comments so I can have:
and the
/* Accordion */
will show in the final CSS but// ACCORDION - Header
won't showSass has a learning curve and makes it harder for people without knowledge to modify, but it is powerful and makes it much easier to build a theme. This is my opinion but I don't normally try to persuade anyone to use Sass if they are not interested.
I use plain CSS, and I put it normally in one file, divided in sections like General, Header, Main, and Footer. [*] This simple approach works very well for me, also because I often work on different projects at the same time, and one file per project makes it easy to switch between projects.
[*] See for example the main CSS file for a contributed theme I created: github.com/backdrop-contrib/b21/blob/main/css/style.css. (Ironically there is a second CSS file in this theme, to support the Color module.)