What is the best way to create css?

[FedeColap]

Howdy Community, 

as I am trying to make a CSS audit between multiple stylesheets, I noticed that, between the creation of automatic classes, mandatory stylesheets and possible clashing of customized stylesheet, things can get pretty messy. 

So my question is, what would be the best way to create, keep and maintain a heavy CSS customization? Keeping as many stylesheets as single pages, keep everything in one CSS file, o even adding CSS within the specific module? 

Thanks in advance for any insight!

[Kevin-C · Accepted solution]

Hey @FedeColap 

I have found over the last few years with HS that creating a base stylesheet that covers fonts, colors, breakpoints, variables, grid, etc. I also like to add dependency CSS as well.  Basically anything you may use multiple times or calculate against. Then using BEM method I style individual modules.

I've found that this keeps the styles more easily managed.

EDIT:

We also name our modules after our BEM naming convention. This allows us to easily on board and move between project without maintaining a large documentation repo.

[Kevin-C]

I would like to encourage others to chime in here!

My "solution" is just that, the way i approach things. And as any front-end dev will tell you there are many approacheds, like OOCSS, ACSS, BEM, SMACSS, and ABEM just to name a few. I'm interested to see what else everyone is using!

[DanielSanchez]

Hi @FedeColap 

The ideal for performance is 1 CSS for the whole page, however I like to have separate stylizations in each module, so that the module is independent. So, I can use that module in any template, as it already has its integrated CSS.

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!