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 …

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…

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

There are several methods, as usual with all things considered the web :wink: Some good sources: https://css-tricks.com/developing-extensible-html-css-components/ http://bradfrost.com/blog/post/atomic-web-design/ http://maintainablecss.com/ http://thesassway.com/modular-css from Harry Roberts fr…

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…

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

How do you structure your css stylesheet?

The CMS Questions

anon77445132 September 6, 2016, 4:17pm 4

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

Good luck!

Topic		Replies	Views
CSS splitting with blocks & snippets Questions	2	590	March 10, 2023
CSS-Class for same margins, paddings and so on? Questions v2	6	1680	February 6, 2025
Load only necessary css Questions v3	1	342	January 30, 2021
Get a better pagespeed score Solutions v2	32	6527	February 6, 2025
Kirby and Responsive CSS Grids Questions v2	2	959	February 6, 2025

How do you structure your css stylesheet?

Related topics