How do you structure your css stylesheet?

Today I want to know how do you structure your css stylesheet?

Is there any best practise to structure it? I hope to read some tipps and tricks.

I generally use scss with separate files for normalize (resets), typo, grid, elements (buttons, inputs, tables…), and colors. It’s all merged and minimize afterwards.

When doing a tiny website that doesn’t require a lot of css, I’ll just do the same structure but inside one css files. On tiny tiny websites, I’ll even minimize and paste the whole css in the head of the page.

I also use SCSS as CSS preprocessor with partials (separate files) for reset, general site styles, colosr, grid, typography, and website elements like footer, header, navigation etc. down to individual elements.

Preprocessors have the advantage that you can use variables, e.g. for colors, fonts etc., mixins, calculations etc.

But no matter if you use SCSS, another preprocessor, or vanilla CSS, the idea is to go from the more general site styles to individual parts of the page. It helps to structure your CSS if you have a general idea of the website and its elements.

It is also a good idea to identify the styles that are needed “above the fold”, so that you can put those into the head of your site within style tags to boost performance and then load the rest of the CSS later. The reason for this is that external stylesheets stop the rendering of the page until they are loaded.

1 Like

I use the Sass plugin for Kirby v2 particularly, if I Start Kirby development on a PC.

Good luck!

1 Like

i use sass to generate css. since using grid a lot a add bitters to bourbon. do not mitake it for managing font styles only. its basically teaching you how to write modular css.

@texnixe @Thiousi @anon77445132 @bnomei

Thx for your answers. I will check all of them in the next days.

I use scss and compile it on save with Gulp:

http://gulpjs.com/
https://www.npmjs.com/package/gulp-sass

1 Like

There are several methods, as usual with all things considered the web :wink:

Some good sources:

from Harry Roberts from http://csswizardry.com/ and author of the inuit css framework

1 Like

I don’t know what to say. In the last days and weeks I have learned so much and I’m happy that I have the chance to learn this cool things.

Nearby i’m 30 years old and i’m actually reorganize my whole life. And I love the new things.

I hope to give someday a little bit back to this great community.

1 Like

I just found this article on critical CSS, maybe worth a read as well.

1 Like