Abstraction away from CSS

Question

Let me make something quite clear.

I. Hate. CSS.

It is a never-ending nightmare. Every minor layout change feels like a hack. Solutions to problems seem to often involve jiggering numbers around like some chef trying to work out exactly how much nutmeg to put in his soon-to-be famous rice pudding. Then comes the multiple browser issue, the multiple resolution issues..

.. to cut a long story short, it's a pain. A PITA, if you will.

Many frameworks seek to abstract away from HTML (custom tags, JSFs component system) in an effort to make dealing with that particular kettle of fish easier.

Is there anything you folks have used that has a similar concept applied to CSS? Something that does a bunch of cross-browser magic for you, supports like variables (why do I have to type #3c5c8d every time I want that colour), supports caclulated fields (which are 'compiled' into CSS and JS), etc.

Alternatively, am I even thinking about this correctly? Am I trying to push a very square block through a very round hole?

Answer 1

I ♥ CSS 

Answer 2

What I found works best is to really learn CSS. I mean really learn CSS.

It can be a confusing language to learn, but if you read enough about it and practice, eventually you'll learn the best way to do things.

The key is to do it enough that it comes natural. CSS can be very elegant if you know what you want to do before you start and you have enough experience to do it.

Granted, it is also a major PITA to do sometimes, but even cross-browser issues aren't so bad if you really practice at it and learn what works and what doesn't, and how to get around problems.

All it takes is practice and in time you can become good at it.

Answer 3

You can always use a template engine to add variables and caclulated fields to your CSS files.

Answer 4

Then comes the multiple browser issue

There is this that helps remove some inconsistencies from IE. You can also use jQuery to add some selectors via javascript.

I agree with Dan, learn it and it's not so much of a problem, even fun.

Answer 5

The key to a real understanding of CSS (and the browser headaches) is a solid understanding of the box model used by the CSS Standards, and the incorrect model used by some browsers. Once you have that down and start learning selectors you will get away from browser specific properties and CSS will become something you look forward to.

Answer 6

See, this is the problem with SO-- every answer so far has made a valid point and should be considered the final answer. Let me try to sum up:

• CSS is good! To expand further, there is a learning curve but once you learn it many things will be much easier.
• (Some) Browser inconsistencies are solvable generically.
• (Some of your) Variable and calculated field functionality can be taken care of through whatever templating engine you use.

I think a combination of all these certianly solves a large sum of problems (although to be fair deeply learning CSS is not an option for everyone; some people just don't use it enough to justify the time).

There are some problems none of the above points cover (certain types of calculated fields would require writing a JS library for, me thinks) but it's certainly a good start.

Answer 7

If by some chance you happen to be using Ruby, there's Sass. It supports hierarchical selectors (using indentation to establish hierarchies), among other things, which makes life easier to an extend from a syntactical perspective (you repeat yourself a lot less).

I am certainly with you, though. While I would consider myself a small-time CSS expert, I think it would be nice if there were tools for CSS like there are with Javascript (Prototype, JQuery, etc.). You tell the tool what you want, and it handles the browser inconsistencies behind-the-scenes. That would be ideal, methinks.

Answer 8

To elaborate on my previous answer...

When I first started using CSS I also thought it was a pain that it didn't support variables, expressions, etc. But as I started to use it more and more, I developed a different style to overcome these issues.

Example, instead of this

a { color: red }
.entry { color: red }
h1 { color: red }

You can do

a, .entry, h1 { color: red }

You can keep the color declared in one spot by doing this...

Also, once you use CSS enough you should be able to overcome most browser inconsistencies easily. If you find that you need to use a CSS hack...there is probably a better way to do it...

Answer 9

For variable support, I have used PHP with CSS headers to great effect for that. I think you can do it in any language. Here is a php sample:

<?
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 

$someColorVar = "#cc0000";
?>
BODY {
      background-color: <?= someColorVar ?>;
     }

Answer 10

Solutions to problems seem to often involve jiggering numbers around like some chef trying to work out exactly how much nutmeg to put in his soon-to-be famous rice pudding

I only get this when trying to make stuff work in IE.

If you learn CSS to the point where you can code most things without having to look up the reference (if you're still looking up reference regularly you don't really know it and can't claim to complain I think), and then develop for firefox/safari, it's a pretty nice place to be in.

Leave the pain and suffering of IE compatibilit to the end after it works in FF/Safari, so your mind will attribute the blame to IE, where it damn well belongs, rather than CSS in general.

Answer 11

Also check out BlueprintCSS, a layout framework in CSS. It doesn't solve all your problems, but many, and you don't have to write the CSS yourself.

Answer 12

I believe the common errors beginners have with CSS are to do with specificity. If you're styling the a tag, are you sure you really want to be styling every single one in the document or a certain "class" of a tags?

I usually start out being very specific with my CSS selectors and generalize them when I see fit.

Here's a humerours article on the subject, but also informational: Specificity Wars

Answer 13

For CSS frameworks, you could consider YUI Grids. It makes basic layout a lot quicker and simpler, although used in its raw form it does compromise on semantics.

Answer 14

CSS takes a bit of time to learn, but the thing I initially found most discouraging was the fact that so many hacks were needed to get all browsers to behave the same way. Learning a system which doesn't adhere to logic seems dumb... but I've clung to the vague belief that there is logic behind each browser's idiosyncrasy, in the form of the W3 spec. It seems that the new generation browsers are slowly coming into line - but IE6 still makes my life hell on a daily basis.

Maybe creating an abstraction layer between compliant/valid CSS code and the browsers' shoddy implementations wouldn't be a bad thing. But if such a thing was created - would it need to be powered by JS (or jQuery)? (and would that create an unreasonably burden, in terms of processing cost?)

I've found that it useful to 'level the ground' when scripting with CSS. There are probably loads of different flavours of reset script out there - but using YUI resets has helped me to reduce the number of quirks I'd otherwise encounter - and YUI grids make life a little easier sometimes.

Answer 15

@SCdF: I think your summary here is fair. But the argument that some people don't have the time to learn CSS is bogus - just think about for a second. Substitute a technology that you've mastered and you'll see why:

I. Hate. Java. Is there something out there that will just write it for me? Not everyone has the time to master Java.

CSS is certainly an imperfect technology - I have high hopes that 5 years from now we won't be dealing with browser incompatibilities any more (we're almost there), and that we'll have better author-side tools (I've written a Visual Studio macro for my own use that provides the the sort of variables and calculations that you describe, so it's not impossible) - but to insist that you should be able to use this technology effectively without really understanding it just isn't reasonable.

Answer 16

CSS variables are coming (relatively) soon, but I agree they are long overdue. In the meantime, it is possible to use a CSS templating engine such as Sass, or even the dynamic web language of your choice, to generate your stylesheets programmatically.

Answer 17

Sorry to say that guys, but all of you missed the point.

The word abstraction is the key. Say you and Sally are making a website. You are styling forms while she makes the corners round. Both you and she have defined a handful of selectors.

What if, unknowingly, you picked class names that clash with the ones of Sally? You see, you can't "hide" (abstract out) the details when you work in CSS. That's why you can't fix a bug in IE then create a self-contained solution that others can use as-is, much like you call procedures in a programming language only caring about pre- and postconditions and not thinking of how it works on the inside. You just think of what you want to accomplish.

This is the biggest problem with the web: it completely lacks abstraction mechanisms! Most of you will exclaim, "It's unnecessary; you stop smoking crack!"

You will instead do the job of say, fixing layout bugs or making round corners or debating on the "best" markup for this or that case over and over again. You will find a site that explains the solution, then copy-paste the answer then adapt it to your specific case without even thinking what the hell are you doing! Yes, that's what you will do.

End of the rant.