EE css template vs. a standard css file?

19

2

Is there an advantage/disadvantage to using a EE css template vs a standard css file? I tend to use a css directory that is separate from EE templates. I like using a css preprocessor, and I prefer not to sync my css files through the Template Manger. I am wondering if I am missing some advantage to not using a ExpressionEngine css template?

Shan Ricciardi

Posted 2012-11-19T06:25:14.303

Reputation: 132

Are you able to select a "correct" answer from those provided? – Anna_MediaGirl – 2012-12-18T05:10:17.343

Answers

27

I'd say you're not missing much at this stage in the game and if you are using preprocessors then even more reason to not use EE CSS templates.

With that said, I could see if you wanted to give your clients access to edit certain colors, for example href colors, then you could build something dynamic which allowed them to edit said colors via GVs, Snippets or Low Variables etc. So the advantage would be the fact that you could use Tags (or PHP even) in a stylesheet template.

Aside from that I'm not seeing much advantages for going that route. Oh, maybe caching; I don't know to be honest on that either because, you have add-ons like Minimee which will minify and cache your css now as well so, not really sure if there are any advantages there any longer either.

Natetronn

Posted 2012-11-19T06:25:14.303

Reputation: 2 384

Agreed. The less EE has to do the better. There are so many other good tools to minify and combine css files. – mjr – 2014-05-14T13:17:35.380

11

Very rarely will I run CSS through EE.

There are times when it's useful as Nate has said but generally it's another load on the template parser that doesn't need to be there.

I also generally keep my 404 page outside of EE as well because it's another db load that doesn't need to be there.

I never edit templates in production either.

Steven Grant

Posted 2012-11-19T06:25:14.303

Reputation: 2 163

7

The main advantage of using CSS templates over flat files (as Natetronn has mentioned) is the cache busting EE provides. EE adds a version number to the end of the file name automatically and this will flush the CSS out of browser caches each time you update the CSS. This can be highly important if your main audience is sitting behind a corporate firewall as they tend to cache for longer.

I like it as it gives me the opportunity to edit the CSS through the EE cpanel should I need access when I don't have FTP access - such as when I don't have a laptop with me. Yet using Mountee I can still edit it in my code editor of choice.

The other advantage is Versioning, if you have it turned on and are not using a version control system like Git.

Simon Cox

Posted 2012-11-19T06:25:14.303

Reputation: 89

4

Just a quick note about caching if you're using css/js as file. You can use Erik Reagan's Cache Buster which appends the file's modified timestamp (as a query string) to the end of the file url.

– Dave O'Brien – 2012-11-19T14:39:06.693

I would like to have control of the cacheing of my CSS and JS files. I have never used Cache Buster before. In my case, it might be a better solution then using up database resources though a template call. Thanks @divtagged!

– Shan Ricciardi – 2012-11-19T21:04:17.400

6

I've just used SASS for the first time on a project and I ended up with a bit of a hybrid solution.

I had one main.css stylesheet which was generated by Compass (for all the SASS goodness). This just overwrites the EE CSS template when it generates.

I then had a second stylesheet dynamic.css which was used purely for stuff which the client could edit, such as background images, colours etc. This was a standard EE CSS template. The second dynamic one was pretty sparse, literally only containing the stuff that could be edited and nothing more.

I kept the two files in the location in the EE file structure for no other reason than, if someone was to follow behind me, that's where they'd expect them to be.

Splitting the stylesheets out into two separate ones might be a bit much for most folks, but I get really twitchy when working on massive all encompassing files which have loads of different stuff going off in them. I'd much rather keep things in there own separate box, and then combine them at the end. Which thanks to Natetronn is what Minimee looks like it's going to do for me.

I would be interested to hear if this is a totally dumb way of going about things as it is the first time I've done it, so I'm all ears if there is a much better way.

Steve Holland

Posted 2012-11-19T06:25:14.303

Reputation: 909

4That's a good way of doing things as you're avoiding routing static requests through EE. In terms of keeping things organised, if you aren't doing it already you can easily generate a single file from several sass/scss files via the @import command, e.g. @import 'partials/forms';. Couple that with automatically minimised output via output_style = :compressed and you have a pretty good setup. – Dom Stubbs – 2012-11-19T10:27:04.860

Thanks for the feedback Dom, it's good to know I'm headed in the right direction. The @import was the first thing I reached for, so much nicer to work with individual files :) – Steve Holland – 2012-11-19T12:28:59.673