CSS on main style sheet vs. in module

[KyleKeiser]

I had someone rough in our site on the hubspot cms. After learning more about it, I noticed they never put css in a module. Even though there are very specific classes related to that module. It's a little frustrating to dig through a big stylesheet file to find css only used in one module. Is this personal preference or is there a best practice on where to put css. I also have the same issue with CTAs. Is it more common to make a class for ctas and reference them in the advanced options when creating the cta or to do it on the main stylesheet, referencing it in module html? 

[DanielSanchez · Accepted solution]

Hi @KyleKeiser 

If you have 3 modules in a template and define CSS's for the buttons INSIDE each module, HubSpot will play 3x the CSS of the button on the page (1 for each module), so in this case, use the CSS in the MAIN file is better. So you will only have 1 place / 1 block of CSS for such styling, facilitating maintenance and reducing your "size of CSS".

I develop modules and templates. I use CSS a lot within the modules, but in cases like standardization of buttons, forms, heading tags, font, etc ... I prefer to leave it in Main, so I don't repeat it in all modules and so that there is only 1 place with this configuration.

Another advantage of some stylizations not being part of the module, but of MAIN, is that if the module does not define values such as source and heading tags, it can be used in other website projects, because if it is inserted in other templates, it will automatically gain the visual identity of this new template, adapting.

Hope this helps.

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

Best regards!