CSS in a CMS - Pros/Cons

Question

I am a regular user of Wordpress and whenever I feel the need to change the look of a DOM element, I prefer to use it inline. This is just because I don't want go back to the stylesheet and create new classes and styles for a single different looking element on a particular post. Can anyone please list the PROS and CONS of this technique. And should I change it?

PS - All suggestions should be given keeping the CMS factor in mind.

Answer 1

Pros of inline styles

• It's quick and dirty (and we are a lazy bunch)
• It has the same end effect as stylesheets

Cons of inline styles

• It mixes presentational code with markup (no separation of concerns)
• For the above reason it is harder to maintain and reduces readability of the markup
• Can't use psuedo classes such as :hover, :focus etc., can't select multiple elements (such as all anchors in a list item)
• No reuse of styles (which is very easy with stylesheets)

In short, I'd advise against it for 99% of the cases. Yes, adding a class and opening a stylesheet might take a few more seconds, but in the long run it is a much better practice.

Answer 2

One benefit of changing the CSS in the stylesheet versus the html markup is that your clients will be caching the stylesheet. This means that you will be sending less text in the markup (smaller file) each page request, because the client will simply need to referr to the cached stylesheet rather than parsing the markup.

Answer 3

One weak con that occurs to me is that browsers and web servers may be better at caching .css files than caching content from a CMS.

I don't think there's an automatic answer to this question, but I assume that as the sheer volume of quantity increases the maintainability goes down.

Another item to consider is whether one or more of the inline styles may need to be changed site-wide if you change the site theme.

Answer 4

I am a proponent of in-line styles, especially for one-off modifications and special elements.

Separating everything is all the rage, it works and can be easier to maintain, but it's not the only way to do it.

You obviously think it's a good idea, and I'm here to agree with you. It can also be easier to debug sometimes in the browser dev tools.

Thank you in-line style, for putting that nice little border around my div - Jimmy Fallon

Answer 5

This can be a real trick -- designers tend to be very, very bad at creating tons of random, repeated classes to do things that end up polluting the project long-term.

Anyhow, there is a way to settle in the middle -- setup your CMS to also serve page-specific, user editable stylesheets. Keeps pollution to a minimum, keeps people out of the filesystem and avoids weird dependencies -- like the designer we had who was hacking in custom stylesheets he was hosting on some $1.99/month webhost.