Is there a standard pattern for CSS in EJS templates?

Question

So I've recently started making more use of EJS templates in my website and so I've done things like broken out the top nav bar and other things into their own template. Is there a standard practice for how to organize CSS (or more specifically SCSS) with that? Should I just make a matching SCSS for each template with just the styles for that template and add the <link/> in each page that uses the template? Or just I just add <style/> tags to the template itself with the CSS in there. Is there a standard pattern for this?

Answer 1

Good question. I think the answer is "no", there is no universally best or accepted standard.

The advice my "work-mentor" always gives me is good advice: he says "do what will be the easiest to maintain". This would depend on your project. I can think of a couple general strategies:

One stylesheet per template

That is, in a way, the simplest suggestion. Probably the easiest to develop, and each page will bring the minimum needed styles.

However, this makes reusing styles pretty impossible. You won't be able to plunk in a <button class="myclass"> into any template without reincluding the styles for .myclass in every sheet you need them in. Also, if you ever want to automate your style sheets (minifying or concatenating them for production, etc) as is common practice, it won't be very possible from here.

One more downside, you might get some unexpected ordering effects. Like if your "widget.css" ends up being added to the DOM after your "article.css" it may override styles in a different way than it would have if it had appeared earlier in the DOM.

All styles on every page

Again, this is nice and simple. Every page has all stylesheets (or maybe just one giant sheet) included. You can link to it once in your outer layout template. It will be easy to automate minification, etc, and there will never be any surprises related to the order stylesheets are added in.

The obvious downside is lots of unused styles brought to each page. But css is pretty "cheap" in terms of size, so this may not be such a bad downside.

Somewhere in between

Include some styles on every page, and make some either page-specific or template-specific. Realistically, this is probably what most apps end up doing.

You can universally include utility styles meant to be reused (ex button.bigred , form.orderform , etc), as well as dependencies like bootstrap or whatever. I'd also advise including any styles you will need on more than half of your pages (ex styles for your navbar).

Other styles intended for one specific page can be added to that page directly via links.

last note

I try to avoid <style> tags in the html for a couple of reasons:

• Lots of js libraries dynamically add or remove <style> tags to your DOM, so leaving that space clear for them avoids possible mistakes or overlaps.
• They are a good way to add dynamic or user-managed styles to pages from within your templates. Keep styles that don't change in the stylesheets, to avoid possible mistakes or overlaps with yourself :)