MichaelH

There are actually a few strategies that you could be using to help out here:

• Use a series of multiple CSS files with different levels of reuse: a global CSS file with core layout, header, and text; a page level CSS file for styles specific to that page; and maybe even a widget level CSS file (this usually ends up inline though). Then when you have a family of sites, you would also have override files that gets applied after global.css, page.css, and widget.css, such as global_stack_overflow.css, etc. This way you can simplify the management of many different styles.
• If you’re finding the need to copy and paste a color everywhere, you might be doing things wrong. This is what CSS classes were designed for. You can separate out your “look and feel” classes from your layout classes. This way you can reuse things like color, which fall in the look-and-feel category.
• Lack of nesting, I’m not sure what you mean by this. Could you provide some examples? You can use CSS selectors to apply a style to a div, or to nested divs. You can also apply multiple styles to a single div or class. Where would nesting come into play?

I hope this helps!

Catto

Hey Now Jeff,

Very good post! Thx 4 the info

Coding Horror Fan,
Catto

Continuumc

In the classic asp days I would just run the .css files through the asp.dll and put asp code in the .css file. I would call functions and stuff

Can you do something similar in .NET?

SebastiaanD

It would be interesting to create a serverside library that:

• Handles translation of LittleCSS/Sass to regular CSS
• Supports multiple CSS files
• Combines the CSS files into one file
• Minifies the one CSS file and Gzippes it
• Sends the correct headers
• And of course caches everything server-side.

Mike

I want to emphasize the first two points Michael makes, especially the first one. Since many sites are built with a base layer that is the meat and potatoes of the layout (perhaps contains header and footer) this structuring of files works wonders for management.

Thanks for the post. It was getting a little quiet around here!

Jarin

I’ve been using Sass for a while, and I usually set it up to dynamically generate static CSS on the first request and serve up the generated CSS on subsequent requests.

Sass’s color math and mixins are amazing, especially when combined with something like Compass: http://compass-style.org/

Jcoehoorn

You should check out .Less, which is a .Net port of Less CSS, and more specifically Phil Haack’s T4CSS templates to do it at compile time with minification:

http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

HerbC

A colleague just pointed this out to me - very cool. I’d rolled my own solution along similar lines, but it’s not as comprehensive - so now I’ll need to figure out a way to transition my existing style sheets.

FWIW there’s a .NET port of .LESS here: http://www.dotlesscss.com/

People have been clamoring for CSS variables for years, but there are what seem to me to be good theoretical reasons not to do this; see http://www.w3.org/People/Bos/CSS-variables

I think that server-side or author-side solutions along the lines of .LESS are going to be the best solution to this problem for the foreseeable future.

DavidB

I have to agree with Michael Hagen. Although CSS isn’t perfect, there are several ways to reuse such as using multiple classes on an item and using multiple files such as a global file.

I have been frustrated with CSS myself, and although it falls short of DRY and does require some weird nesting, you can get fairly close to DRY with the structures implemented in 2.0.

Excuse

Seriously though, while I agree with your comments, HTML itself is seriously breaking DRY just as much as CSS does. How do we combat that? We use some kind of template language. My weapon of choice is usually PHP, but regardless whichever you choose, as long as it spits out CSS it should be just fine.

tonio

Next version of Less will be directly in js (still alpha atm)

http://github.com/cloudhead/less.js

/me curious of performance, but should be great

WynnN

So glad people are noticing CSS metaframeworks, the King of All @media

http://www.slideshare.net/pengwynn/css-metaframeworks-king-of-all-media

Blackantmedia

I would second the recommendation for looking at Sass’ math capabilities. Using it, you could even further reduce your work by setting a couple of “base” colors for your palette and having the math compute variations of the colors for lighter/darker borders, backgrounds, etc.

Cfq

I’m pretty sure Nicole Sullivan’s OOCSS (http://oocss.org/) addresses the issue of DRY.
You just have to keep giving multiple class names to your elements.

HerbC

@Michael Hagen - While it's true that you could do something like

.Blue {color:#0000FF}

and then

<h4 class="Blue">…</h4>

… it's a really bad idea for a number of reasons. And there's not any way to do math on the colors (e.g. @blue + #111), which is for me one of the biggest draws of server-side CSS generation.

Martin

Austrian levels of discipline? Beeing Austrian I like this, but never heard of it before

I totally agree that CSS is hugely annoying for certain layout tasks. I’ll just continue to use tables (GASP!) in these situations. Why use CSS and resort to hacks when there’s a clean, simple solution using tables?

Mark_Joslin

Hey Jeff, thanks for the post! I never heard of Sass, looks awesome!

Id11

The important thing about SASS/SCSS (I don’t do much with less) is less about the variables and more about the mixins and now inheritance. These let you use semantic class names on the page while building a stable, debugged, reusable library of style rules. Building this library is what really gives you a leg up in speed/maintenance and because it’s pulled in as necessary, you can make the rules as extensive as you like. It really boils down to how clever you are at designing abstractions. I’m still working on it, but mine handles all my layout and typography norms as well as simple color handling (color schemes tend to vary more between projects) and I’m working on integration with yui3 so my preferred styles flow down into the CSS used in the widgets.

I was doing CSS using the techniques Michael recommends in the first comment for years but the boost in switching to SASS was huge it’s a lot like writing javascript with/without a framework back in 2005. There’s a definite benefit but things aren’t solid yet. I am pleased that I’ve done a few designs now where I’m happy with how it looks in Firefox, fire up the VM and take a look at it in IE and IT JUST WORKS.

Dave

To stay DRY, you need to add a layer of abstraction to your deployment process. Sure CSS is lame, but making it a full-blown programming language is not the best solution.

Mikewoodhouse

I don’t know if the information’s useful, or indeed accurate, but I believe that an individual named Nathan Weizenbaum was an intern at FogBugz recently? I’m pretty sure that’s the same Nathan Weizenbaum who is the lead developer of SASS. And indeed, the DRY-up-your-HTML template language HAML.

SASS 3.0 is at (I think) RC3 right now, with changes that include a new (“SCSS”) syntax that make it a superset of CSS 3. At least, that’s what they say - I haven’t actually tried it yet…

jstawski

Jeff, I thought you were a programmer! Why don’t you use HTTP Handlers to create the CSS dynamically from values in your DB? Of course use caching as much as possible. I would have one static style that has the least common denominator across all sites and a second one built dinmically with what I’ve mentioned above.

AlexR

You can also use Bundler http://github.com/jetheredge/bundler
It can minimize and compress multiple javascript and css files and also suports .less. It is open source.

EthanT

I heartily agree… I have long though CSS should have variables. And math with those variables. I don’t know what these language designers are thinking leaving these out. And is inheritance of some sort too much to ask?

Unfortunately, these conversion layers you’ve listed don’t address unit conversion: if I want something to align with two blocks, one of X em and another of Y px, then I want X em + Y px, but only the browser will know what that value is. Especially if one of these blocks is based on % instead! So then we wind up with pixelized fixed-size layouts instead, undoing so many of the goals of flowing web page design and font size/resolution independence

Kevinkenny

Nice article and I feel your pain.

Whilst Less and SASS solve some problems you still need that deep understanding of CSS to make it work well, something that not all developers have the time to acquaint themselves with.

What we need is a jQuery for CSS :), something that abstracts away the pain points such as CSS behavioural differences between browsers for most tasks, but at the same time allows low level CSS knob twiddling when required.

Shog9

In short, CSS violates the living crap out of the DRY principle. You are constantly and unavoidably repeating yourself.

Oh, please. Maybe repetition is convenient for you or your designers, but it’s hardly unavoidable: http://stackoverflow.com/questions/47487/create-a-variable-in-css-file-for-use-within-that-css-file/47508#47508

DonalM

As you’ve probably already learned, there are only about a gazillion CSS-templating solutions available to solve these problems.

There’s even one implemented in Groovy, I think it’s called GSS.

itub

You probably use some sort of templating language to generate HTML. Using templates to generate CSS is just an obvious extrapolation.

sharpblue

Jeff, you should check out CssHandler, an IIS handler for CSS that allows use of variables, server-side processing of @import directives and some other neat things: http://csshandler.codeplex.com/

Ubertron

Short of having all this stuff implemented in CSS itself it would be nice to see a either Less CSS or SASS implemented in Java, .NET, PHP etc etc, so they can be taken advantage of no matter what platform you are running on. (Although, yes of course there’s no real reason why you couldn’t run a Ruby server for generating CSS as well as a whatever your application is built on.)

SteveE

I’ve been using .Less CSS (.NET) for a while and love it. LESS syntax is really convenient & they’re actively maintaining the project.

Tbisaacs

.LESS is awesome.

In this case, put all of your global and/or structural CSS in a “Core” file that all sites get. Then, each site get’s it’s own “brand.less” file with specific colors. If you’re good, each brand.less file would only have variables and mix-ins.

ElfS

I’ve been using LessC for a while now, and the nesting expressiveness has made a frackload of difference.

That said, when I’m working with the transition to a mobile space, the scary part is the way one must master the cascade and know the specificity rules. “@mobile #some-item” and “@landscape #some-item” will have different specificities that can be exploited by the appserver developer, but learning those rules is daunting… and now necessary.

DmitriyL

Ok here are my points on css:

• It should be cascading. So set your colors and such early, set your classes to represent behaviors. Make multiple files to handle different needs.
• Css sucks in code reuse. How often do you want a structure div.foo (some styling) > div.bar > div.baz etc. Basically you keep repeating the same thing as you nest deeper.
• No computation. How often have I had to compute in my head the width of something being the width of the parent + borders + whatever, vs just something like "width: parent(width) - 10px;" its nice to declare but sometimes its good
• Bad layering. As in your HTML gets to mark up what styles it wants to use. Vs your html is marked up data, and your rendering engine will plow through the meaningful markups and apply shit. Remember if you want to change the looks of the site, you don't want to have to make more html classes in your html to change your layout. Skins don't work that way. We need CSS to be able to declare "if you include me, you must include these other css definitions as well" like ".foo { include , include , float: left, font-size: 10px;" See that makes sense because your CSS controls the layout not html controlling the layout except instead of "color="green"" you have "class="green_color"".
• CSS needs to be reworked. And at least less and sass make efforts to make better CSS, we still want that supported naively. O well I guess CSS is the new assembly language, you can code in it but you really should use C.

RadoslawS

Check out XCSS - http://xcss.antpaw.org/ haven’t tried it yet but looks very promising!

jongalloway

Other folks have pointed to it already, but you should check out dotless. The t4 templates can auto-run when you save the .less file to compile the .css files, so there’s no additional step - you just write your .less file and it just works.

EricL

typo: excerise

psmay

Has Perl become some sort of old-schooler’s arcana?

I’ve recently used Text::Template ( http://search.cpan.org/~mjd/Text-Template-1.45/lib/Text/Template.pm ) to great effect with the styles for a documentation site I’ve been working on. After writing a small driver program to mesh the template with the data, the result isn’t so different-looking than the examples here.

However, nothing beats direct browser support. Text::Template helped me a great deal while I tweaked my color scheme, but it was still lame that I had to run make after each change. Maybe I’ll wire Apache up to do it for me sometime…

Two attempts for adding a little horse power to CSS that didn’t end up flying:

• Netscape's JSSS ( http://en.wikipedia.org/wiki/JSSS )
• MSIE's Dynamic Properties ( http://msdn.microsoft.com/en-us/library/ms537634.aspx )

There’s a point of view that states that it’s a good thing these technologies didn’t catch on. It’s probably true, especially where print applications are concerned. I assert, though, that it wouldn’t take a Turing-complete language to evaluate an expression like top: ((#outer@height - @height) / 2) - 150px, and I have written more pages than I care to remember that would have benefitted impressively from that kind of evaluation.

It would even still be somewhat friendly in situations where scripting is disabled or unavailable (unless non-geometry-related functionality crept in, but browser developers aren’t known for that sort of unscrupulous behavior, right?).

CraigC

There is also CSSTidy which does something similar to less and consolidates common style rules .

You can try it out online at http://www.codebeautifier.com.

Papayapariah

As a front-end developer that spend most of his time in CSS I personally don’t see the use of calculated colors and variables. It’s not as if the values are going to change. Example:

.class { color: red + #111; }

…is always going to be interpreted as

.class { color: #880808; }

So just type out the calculated hex value and save your computer a half a millisecond on hexadecimal math.

And as for variables, CSS doesn’t have them because nothing in CSS actually varies. If you have a variable for a certain shade of ‘blue’ then what you actually have is a CONSTANT. And if you want to apply it to a large number of different types of elements then you should focusing on your selectors and inheritances more closely.

Kevin_Horn

Also check out CleverCSS:

http://sandbox.pocoo.org/clevercss/

Caseyf

I’ve always been a huge fan of HAML and I’ve also been using SASS because I really like the nesting (easier to read, less repetition, more pressure to write “good” CSS)

I had an “aha!” moment recently when I read about how Geoffrey at Peepcode uses the other SASS features. It’s not just about variables for colors and arithmetic.

http://blog.peepcode.com/tutorials/2010/about-this-blog#css

Simonchadwick

It’s thinking outside of the box, but…

Perhaps all the techniques for shaping the HTML that ends up in the browser could be avoided by reimplementing the SO family of sites as SilverLight apps?

Then you’d have a state-of-the-art UI design and rendering experience, all the benefits of XAML and skinning, and no more of all these HTML hacks.

Also, the SO servers would have less loading (serving just the data, and not the whole UI and the data), and lower bandwidth.

Of course, although SilverLight is pretty pervasive, it’s somewhat limited on Apple’s mobile devices…

Andy_Chase

@Simonchadwick

That is probably the most disgusting thing I have ever heard far none.

Simonchadwick

@Andy Chase:

What is so “disgusting” about suggesting the possibility of avoiding HTML rendering problems using an alternative technology? Would you care to elaborate?

Silverlight is being used in a large number of media and LOB applications, providing user experiences that would be very challenging using HTML/CSS/JavaScript. I’m not saying it would be the right or best solution to Jeff’s issues, but sometimes a problem like this reveals more creative opportunities than struggling in the same direction.

Stubbornella

I hadn’t heard of DRY before, but it was one of my goals when creating the open source OOCSS library. http://wiki.github.com/stubbornella/oocss/

To me, it just makes sense that you make reusable visual LEGO. Depending on coding style, meta-frameworks can make this harder to achieve. Philosophically, SASS tries to avoid multiple class names, which are one of the main methods for achieving truly DRY objects.

There should be very little difference between these four sites in the CSS. My guess is that they would share 90-95% of the CSS and 100% of the HTML.

MaxK

Yeah, I actually wrote a post specifically about what I’d like to see from CSS’s positioning code, and the co-chair of the CSS Working Group replied with an emphatic agreement:

http://avatraxiom.livejournal.com/101850.html

-Max

SilverbackN

You can use multiple classes in a class attribute, separated by a space, in order to achieve a certain level of separation. But when it comes to things like colors, rounded corners, and the like, unless you want to keep the overall theme the same for each set of widgets across every style, you can’t just tag them with a class representing that. Sort of what CSS was supposed to get rid of.

Smange

The Ruby option looks pretty cool, but I agree with Michael Hagan that you’re missing the point of how to use CSS to cascade the styles.

MisterB

CSS is a programming language in the same way that HTML is a programming language.

Oh, that’s right, it isn’t.

As such, it doesn’t violate DRY anymore than a Georges Seurat painting violates the principle simply because there’s more than one dot on the canvas.

StephenT

I really don’t like CSS myself, and this is after around 6 years of using it to the degree of ‘mastering’ it. The problem seems to be more than just the declarative nature (which is useful in the most). Personally I think its completely the wrong way to approach the problem, if we were given something that gave us simple yet powerful aspects we could design all the things that NEW properties are trying to design today, such as drop shadows yadda yadda.

Instead, when we want something ‘new’ we either have to fall back to generating bitmaps externally and dumbly applying them to elements, which is less than ideal and destroys rapid prototyping. Then we have to wait until ‘the almight browser gods’ decide to firstly, recognize a pattern, attempt to prototype that, sit down with a bunch of other gods, argue over formality, wait for them all to implement that formal spec, then wait for the population to be saturated enough to even use it.

vs. say, prototyping that functionality yourself with some primitives in a couple of hours… dunno, seems to me that a couple of hours is a much better than waiting a couple of years… perhaps I’m just crazy.

This said, css3 does go some way to making this more of a reality, given that it has much more powerful pseudo element creation.

LaithJ

The hack-ish solution would be to use a PHP script to generate the style, kinda like how you use PHP to generate JavaScript and HTML code.

This’ll work particularly well for you since you have many websites with the same layout but different looks, you can get them to pass their ID or name to the PHP script, it retrieves the variable values from the data base and put them in CSS. That kinda solves the variable problem, you can have fields such as margin_left_answer, count_border_color, etc…

Or, alternatively, you can have a script that generates the CSS for you once and you upload that CSS file.

ObjeleanA

There is another serverside framework which corrects the thing you find wrong in CSS, it is called wro4j (Web Resource Optimizer for java) - http://code.google.com/p/wro4j/ . It have plenty of features, like: -

mcprogrammer

@Ubertron:

I’ve been working on a LESS-like program in Java called DSS. It’s similar, but not identical because when I started writing it, I hadn’t discovered any of the other frameworks yet. In case anyone is interested, it’s at http://github.com/silentmatt/dss . Personally, I like it better because it avoids some syntactical ambiguities that LESS runs into. Unfortunately, it doesn’t do color calculations (yet).

MikeH

I personally use my own template language for both HTML and CSS.

http://michaelhamilton.com has a link to Muted Template and a live demo you can check out.

Buu_Nguyen

@Sebastiaan Dammann
I built such a server-side library for ASP.NET/MVC applications, see http://combres.codeplex.com/. dotLess CSS is supported although Sass is not (yet).

RobertM

It sounds like you need something like this: This link http://www.downloadsquad.com/2010/04/30/if-you-code-html-zen-coding-will-change-your-life/ was featured on reddit raving about Zen Coding ( http://code.google.com/p/zen-coding/ ). Of particular interest to you: it features full support on Visual Studio.

Beesndees

This whole thing annoys me. Just because it’s not a programming language per se doesn’t mean that it has to be worked into one. css allows you to do all the stuff you want to do while still retaining to all programming paradigms you want to. You just have to use it properly.

I’m all for new things and improving the old ones but i don’t like it when people think that everything should taste like vanilla. I mean seriously Jeff, you can see the problem that i, and apparently many other people too have with this approach?

Vvoyer

some time ago, the co-chairman of the css working group wrote a paper on css variables
http://disruptive-innovations.com/zoo/cssvariables/

i do think that css should not use variables and other programming language feature, it’s a presentation language that “everyone” can use without knowing what a variable is…

Mecki

Jeff, you are a programmer, aren’t you? So I fail to see your problem. Okay, I agree with you, that there are some alignment issues in CSS, sometimes things are extremely easy to do with tables and extremely hard to do with CSS, but that is a different issue.

Regarding your request with turning CSS into a programming language, why don’t you make CSS templates, run them through your own written pre-processor and dynamically serve the result? Nothing is easier than doing a bit of search and replace using PHP (or any other language with regex) to transform your CSS templates into real CSS.

People building huge webpages are used to the fact, that pretty much no HTML is static, but everything is dynamically created by PHP, Perl, Ruby, Pyhton, Java or some other kind of comparable language. I bet Stackoverflow works like this. At the same time you request that CSS must be all static and “interpreted” by the browser. The same way I can request that all HTML must be static and there is a HTML Meta language that makes all HTML processing in the browser.

At the time being, you have two options: Either you do things in the browser using JavaScript (JS can transform/alter HTML, just like it can transform/alter CSS on the fly, no big deal) or you do it on the server. The later case has the advantage that your page also displays right if the browser has no JS support or JS is turned off. As you decided to do HTML generation on the server, why do you want CSS generation to happen on the client? Why doesn’t your PHP code also dynamically create the CSS for you?

If you don’t want to use PHP, use any other pre-processor. There exists tons of free pre-processor, written in C (very fast!) that you can use as a replacement to the GCC C-Pre-Processor (which doesn’t work right if you are not feeding in C/C++ source files).

#define ROUNDED_CORNERS
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius

#define BLUE #3bbfce
#define MARGIN 16px

#header {
ROUNDED_CORNERS;
}

#footer {
ROUNDED_CORNERS;
}

.content_navigation {
border-color = COLOR;
}

.border {
padding = MARGIN;
margin = MARGIN;
border-color = COLOR;
}

A C-like pre-processor cannot perform calculations, but other pre-processors can.

And have you ever considered to create your OWN layouting language? Instead of using HTML/CSS, have you considered using a language that perfectly fits your personal needs and then have a big PHP library that transforms your own language into HTML/CSS whenever needed? To not kill your servers, you could cache the result and only re-translate a template if it has changed. Your meta language Markup is also translated to HTML on Stackoverflow, why not doing the same for the whole rest of the page as well? It is not a performance issue and using a high level language, it’s not such a big coding issue either.

RichardL

While I understand the desire for inheritance from one CSS rule to the next, it doesn’t fit with the paradigm for CSS; a class attribute or id attribute isn’t like specifying an instance of a class. It would create ambiguity about how rules apply or inherit:

div#gloablNav .current {
    color:blue;
}
div#currentNav .current {
    color:red;
}
#main .intro a[href=/'] {
    .current; /* which rule does this inherit from? */
}

Is the solution to this ambiguity to copy the entire CSS rule?

#main .intro a[href="./"] {
    div#currentNav .current;
}

… but CSS rules aren’t unique, and the author (or maintainer) have no way of knowing in which CSS file this rule would have been defined, or if it is at all. And if this rule and another ‘collide’ how do I determine precedence? Can we make CSS stricter and demand uniqueness of selectors across all CSS files? No, because in web dev Forgiveness is the Default. http://www.codinghorror.com/blog/2007/04/javascript-and-html-forgiveness-by-default.html

The reality is that CSS isn’t meant exclusively for developers and so it shouldn’t support programming paradigms like inheritance or recursion or namespaces which are overwhelmingly familiar to developers. That doesn’t mean, however, there isn’t some method to CSS’s madness; I’d worked and studied in web dev for quite some time before I discovered there was some kind of math behind the precedence of CSS rules, and it was a revelation and an eye opener; http://www.w3.org/TR/CSS2/cascade.html#specificity

Bob_Glamm

@simonchadwick

Using Silverlight for what is (basically) a blog/message boards is like using a sandblaster on a soup cracker*. In practice, both Silverlight and Flex are overkill unless you need features that aren’t supported by current browsers - like easy pixel-perfect positioning for complex application previews, or application forms that don’t lend themselves to the shortcomings of HTML forms very effectively. CSS is a solvable problem, and with good class/CSS development, it’s not even particularly hard. (On the other hand, if you don’t understand why CSS is the way it is or how to architect a good CSS solution or are inheriting a poorly-architected site, it can be a complete disaster.)

Quite frankly, with HTML 5 and CSS3 on the mid-term horizon, I can’t imagine why Microsoft is dumping as much money as it is into Silverlight to kill Flash, when both technologies will probably eventually disappear, anyway.

• With special thanks to Scott Adams.

AdrianS

There are a lot of really odd comments in here re: CSS (most notably, your post, Jeff)…not sure wherein the horror lies. On table layouts, yes, they’re easier sometimes. They’re also semantically broken and screw up accessibility. If you want to see some guiding wisdom on the what and why of not doing table-based layout, either get a blindfold and a voice-based browser, or head on over to the Univ. of Indiana’s FAE site (http://fae.cita.uiuc.edu/). Even Microsoft realized using tables for layout isn’t a great plan (control adapters and alternative output for menus, etc is the result of that realization).

All that aside, those layout problems are because of the state of HTML, not of CSS. It’s meant to do what it does, which is to allow for a set of consistent styles to be applied across multiple pages, and redefined by subsequent additional styles (including user stylesheets located on the end user’s PC, not under your control, and with higher precedence than the rest of your carefully-chosen rules).

Make your main stylesheet template (one time), then make a secondary one for whatever tweaks you want to apply (or dynamically create the tweaked version, etc). That’s how it’s supposed to work. Variables are nice programatically, but if you’re going to generate CSS on the fly in code, you don’t need them anyway.

CSS is static. Dynamic stuff should be set elsewhere (Javascript, anyone? There is a style attribute on DOM elements, after all).

TheH

I agree with Simonchadwick’s take on matters. When the main concern is that a site or family of sites should “look the same” across all browsers and presentation layers, what sense does it make to wrangle with X number of display implementations?

Yes, I know the whole world is on a “plugins are evil” kick right now. Even still, that they remain the easiest way to get a consistent user experience across platforms. I suspect that as long as there exists more than one browser, this will remain the case into the future regardless of how many layers of abstraction are spackled over the HTML/JS/CSS stack.

Filini

It’s not entirely CSS fault (actually, I think it’s not CSS fault at all, bat that’s just my opinion).

Cascading Style Sheets are designed so that you either avoid repeating classes/names/tags, or avoid repeating properties definitions. If you repeat both, you’re doing it wrong.

If browsers fully supported tag selectors and properties inheritance, you would probably cut duplicated stuff in CSS by 75%.

Mobiledynamix

Hi Jeff,

You seem to have missed a mention of .Less, which a mate of mine was a major contributor:

http://www.dotlesscss.com/

Jef_Claes

So now HTML, javascript AND CSS are broken?

T_R

Regarding variables, maybe a simpler example would be more clear. Consider instead:
.class1{border-color: #3bbfce} and
.class2{background-color: #3bbfce}
The re-use of colors here can’t be done with cascading - maybe more common than doing math on colors.
What SASS uses Mixins for can mostly be accomplished with cascading, but doing so clutters the HTML with classes representing layout rather than meaning - it’s better CSS and produces less code, but less than ideal for separation of concerns.

Which CSS compiler does everyone use?
http://stackoverflow.com/questions/2612322/what-css-compiler-do-you-use-sass-less-hss-etc
It would be even nicer if we could do DRY development without the added indirection of compiling into verbose standards - hopefully that day will come eventually.

Alasdairking

On table layouts, yes, they’re easier sometimes. They’re also semantically broken and screw up accessibility.

They’re far, far easier, and they don’t have a significant impact on accessibility in the real world because they are already semantically broken, so users and assistive technology vendors already know to work round them. So, if everyone had spent the time they wasted getting CSS layout to replace tables on, say, labelling their IMG tags, or making sure their pages worked with Javascript disabled, the web would be a better place for assistive technology users. But that’s not what the fashion dictates.

http://www.assistivetechnologygroup.org.uk/blog/?p=10

Joel

Vertical alignment is a giant, hacky PITA. (Tables work great for this though!)

Ironically enough, I got crucified on StackOverflow for daring to suggest that tables were often the most pragmatic choice:

http://stackoverflow.com/questions/1348666/question-about-divs-in-html-web-page-building/1348735#1348735

cwallenpoole3

This is why I generally try to get projects to output the CSS from the server’s language. I actually had a site once where, by adjusting two variables, you could completely re-do the color schema, another three handled the majority of positioning, and everything else was defined by a series of ratios.

DrewF

At least it is better and more mature than the styling that we get in WPF.

Id12

Heya Jeff, this is Tab Atkins, member of the CSS Working Group.

I feel your pain, man. I’m a web developer too, and I’ve cursed at the same pain points you’ve found. That’s why I got myself involved in the CSSWG and eventually became a member - so I could fix them.

1. Vertical alignment - Yeah, it’s all kinds of suck right now. There’s no way around it. You can use

   s, or, if you are okay with hacking some alternate solution for IE6 and IE7, you can use display:table and avoid people crying. My primary goal at the moment in the CSSWG is working on the layout specs, cleaning them up and making them better for us devs, and Flexbox solves the vertical layout problem better than tables ever did. That’ll still be a few years until it’s supported widely enough to use though.

2. Variables - This is something we’ve been trying to push for years internally, actually. It’s somewhat painful to admit how slow progress has been on this when it’s so necessary. Regardless, CSS variables is definitely going through.

3. Nesting - I’ve got a Mixins spec on the back burner to go alongside Variables that will partially address this. The full nesting-fixes that LESS and SASS introduce, though, will probably never be a part of CSS. But hey, never say die, right?

CraigT

I must admit the first two are not pleasing to my eyes to look at but does give the familiar look of a family of sites you are trying to go for.
Please if you use one of those gems keep us updated the LessCSS looks very promising as long as it gives the flexibility that it appears to offer w/o taking away some of the CSS you thought you actually programmed into a specific tag.
The one suggestion I can make is the idea of images in the tags (like how you have it for android on the site). It is much easier to scan for images then tag names if just going down the list on the home page.

Cloudislands

As Vvoyer pointed out, CSS is a presentational language, not a programming language; as such CSS is most valuable to visual designers and front-end developers. Trying to mutate it into a “real” programming language would make it unusable to the people who need it most: those who are charged with making web pages visually appealing, readable, and usable.
I’m not a programmer. I’ve spent four years learning the basics of CSS and know I have much more to learn; I don’t pretend to be an expert. Given that, I took a look a the stylesheets for the four sites, and frankly, that’s some of the most cumbersome and kludgy CSS I’ve seen in quite a while. The fact that so much CSS is needlessly repeated within and across four sites shows a lack of understanding of how to write CSS rather than inherent limitations in the language itself. Please do check out the principles behind OOCSS: http://wiki.github.com/stubbornella/oocss/. It’s entirely possible to write elegant, reusable, and lean CSS.

ThomasS

An exciting battle:

• DRY
  vs
• Separation of Concerns (CSS = presentation, HTML = content & Programming Languages = …)

ThomasS

An exciting battle:

• DRY
  vs
• Separation of Concerns (CSS = presentation, HTML = content & Programming Languages = …)

LyleU

CSS definitely has problems, few of which are mentioned here. The vertical centering stuff touches on real concerns, many of which are resolved by CSS3 (which will obviously take forever to be adopted).

I’m pretty sure you guys are just not good at CSS though. There’s a correct way to cascade your CSS that will solve most of your problems. That’s what it was designed for.

I’ve looked at SASS before, but CSS is really just so easy already that I haven’t had a project where it was actually worth implementing. The main benefit of SASS seems to be that it allows people who don’t know how to use CSS correctly to have easier success in styling their pages. I find that the way you have to think about CSS is very different from the you think about a programming / scripting language, and many programmers have difficulty understanding it. SASS is a crutch that let’s people work in something that resembles their comfort zone a little more.

Dan_Moore

I’ve never really felt the need for variables/constants or other programming features in CSS. In fact I think it would make it too fiddly. After all, as has been said, HTML doesn’t have programming features but this is made up for by either JavaScript or server side languages, which are both options for CSS.

There are however several things that really annoy me about CSS:

• As you say, vertical alignment is rubbish. Why tables, which are supposed to be the old way of doing things, in this instance are better at layout seems backwards to me.

• Column layouts. There is no way to make all columns the same height if the height of one or more column is unknown eg. due to dynamic content. Again, tables are really the only option. Sometimes when trying to fix this without tables, I feel like I’m spending far too much time and resources into it instead of just using tables. Again, in this specific instance, a step backwards for CSS.

• The box model. If you have a div that is 500px wide and you put padding, border or margins on it, the width it takes up on the page is added to. This makes no sense. If you’ve allocated 500px of space on the page for a div, then if you add borders or padding (not so much margins) then obviously you want it not to take up any more room. That is annoying enough, but if the width is 50% and you want a border, then you end up with 50%+1px. There is no way to allocate exactly 50% of the width of the container for the div. So fluid layouts can end up being a real nightmare with lots of wrapper divs (a pet hate) or you could just give up and use tables again.

I think I’ve given the impression that CSS is completely awful, but to be honest those situations don’t come up that often. But when they do I just wonder why it’s harder to do a certain styles in a method that is designed specifically for producing styles than it is in an outdated method.

ClintonF

I’m pretty sure that your problem with css is that you are doing it wrong.

Let me take the LessCSS example:

#header {
  -moz-border-radius: 5;
  -webkit-border-radius: 5;
  border-radius: 5;
}

#footer {
  -moz-border-radius: 10;
  -webkit-border-radius: 10;
  border-radius: 10;
}

SHOULD BE:

#header, #footer {
  -moz-border-radius: 5;
  -webkit-border-radius: 5;
  border-radius: 5;
}

Now the SASS example:

.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

SHOULD BE:

.content_navigation, .border {
  border-color: #3bbfce;
}

.content_navigation {
  color: #2aaebd;
}

.border {
  padding: 8px;
  margin: 8px;
}

This seems a lot like not learning the tool before attempting to use it.

PaulM

Heh heh, Jeff, you are slowly but surely coming over to the Ruby Dark Side…

aleemb

May I suggest this feature as well:

#header {
-moz-border-radius, -webkit-border-radius, border-radius: 5;
}

Powerlord

Some of this has already been said, but…

There are a few things people regularly overlook about CSS:

1. Multiple selectors can have attributes assigned to them in the same block.
2. To go along with 1, selectors can have attributes assigned in multiple locations in the same (or different) stylesheet files.
3. HTML elements can have more than one class. I’ll repeat this, as this is often misunderstood. HTML elements can have more than one class. class=“there are four classes” is a class attribute with 4 different, space-separated classes. Attributes assigned to those four classes will be applied to the element with that class attribute.

Charlesroper

Chris Eppstein, one of the Sass developers and creator of Compass, has written an excellent article on refactoring the digg.com stylesheet using Sass:

http://chriseppstein.github.com/blog/2010/05/25/refactor-my-stylesheets-digg-edition/

It demonstrates how an already well crafter stylesheet can be very much improved in several ways. Definitely a must-read!

Chris also has a bunch of other great articles addressing not just the how of Sass and CSS generally, but also the why:

http://chriseppstein.github.com/blog/archives.html

MichaelG

Ok just a thought, but if it is that much of a problem couldn’t you write an app to simplify the creation of the CSS, or is that just crazy.

Ovaistariq

I think instead of switching over to Less or Sass, its high time we developers start using CSS in the right way. Its lack of knowledge on our part most of the times that causes problems.