I Hate CSS

http://blog.aaziz.org/i-hate-css

by gnosis • 15 years ago

51 100 15 years ago

blog.aaziz.org

TheSOB882• 15 years ago

Anyone have experience with good frameworks? An overview, perhaps?

noahc• 15 years ago

As a non-designer I've used both blueprint and the 960.gs grid system.

They both work fine and I've never ran into the problems he describes with either one.

My somewhat limited understand of the two is the blueprint addresses issues with typography and sets a typographical rhythm, so it has some advantage there. However, I think it's pretty easy to trash that rhythm if you don't know what you're doing.

glesperance• 15 years ago

If you're using node.js ; stylus seems really good. I'll be using it as soon as I have the time to clean up my CSS.

[LearnBoost's Stylus: Expressive, dynamic, robust CSS] : http://news.ycombinator.com/item?id=2162620

tgriesser• 15 years ago

The Eric Meyer reset is great for a base sheet... clears all those little default values you probably forgot about http://meyerweb.com/eric/tools/css/reset/

I swear by 960.gs or any of the fluid interpretations (http://www.designinfluences.com/fluid960gs/) for most of my projects. It is such a simple concept to understand, adding classes .container_12 or .container_16 (now in 24 columns) to wrap your content and then .child_X classes to each div or block level item you need.

Saves a huge amount of time, and is something that lends its-self to more organized styles if you don't spend all of your time designing. When the objective is to ship something quickly, frameworks are absolutely the route to take.

rjrodger• 15 years ago

Use sass: http://sass-lang.com/

In particular: sass --watch styles.scss

Big productivity win.

nathos• 15 years ago

even better - use Compass: http://compass-style.org/

Takes Sass to the next level. Actually makes Blueprint usable.

Fluxx• 15 years ago

I'll take that one step further and say that Compass makes CSS intelligible, reusable and efficient to write. The Compass people have taken the time to understand what the right cross-browser techniques/best practices exist for lots of common CSS problems, so I don't have to worry about it. I wouldn't do CSS without it ever again.

stevelosh• 15 years ago

Another alternative: LessCSS -- http://lesscss.org/

Include less.js in your page and you're done. No externally running process necessary -- the less.js file renders your .less files right in the browser.

electrum• 15 years ago

less.js has weird issues with caching. If you use @import, sometimes it won't ever refresh the imported files. It uses the HTML5 offline caching APIs, so even clearing your browser cache doesn't help (at least in Chrome).

isleyaardvark• 15 years ago

I love sass, but that's not what he's talking about. You still have to figure out your 2/3/whatever column layout. It's still a pain to figure out which elements to float and which to position absolutely. Much as I love sass, and I do love it, making the syntax easier to type doesn't make the fundamentals of the layout any easier.

Eric Meyer has a great post on the subject: http://meyerweb.com/eric/thoughts/2009/02/17/wanted-layout-s...

ChuckMcM• 15 years ago

To Eric's point, summarized here, layout is not style, and CSS is all about style. No word yet on a cascading layout sheets (CLS?) which would provide that sort of capability.

retube• 15 years ago

> Take float – it’s a property to make text flow around an object. It wasn’t designed to create columns on a webpage. And there’s no CSS property that creates columns, or a header.

Yeah. How much time have I spent mucking about trying to achieve a stable cross-browser column layout. More often than not I just use a table. I know in design land this is an absolute no-no, but at the end of the day 1) it works 2) it's simple 3) it's x-browser 4) it's reliable.

btipling2• 15 years ago

Well I meant to downvote and accidentally upvoted but anyway if you're using a table then you are probably not expecting to do anything dynamic via JavaScript on it since it's not a collection of block elements, but table-cells. There's a lot you can not do with table-cells. Also, it's semantically incorrect and really takes like maybe ten minutes of reading a how to guide as to how to figure out how to do it with real css. Also attempting to control dynamic table cell widths is far more painful than anything you might ever want to accomplish with CSS. Finally, yes sometimes you have to reread the guide when you want to do it again. So

1) It doesn't work (with JavaScript and fluid, dynamic cell widths) 2) It's actually not that simple. 3) It's only cross-browser if you have a lot of reset CSS and do nothing fancy. 4) It's reliably problematic.

zeteo• 15 years ago

"There's a lot you can not do with table-cells."

Could you give a few examples?

"it's semantically incorrect"

So is "float".

DanI-S3• 15 years ago

> [it] really takes like maybe ten minutes of reading a how to guide as to how to figure out how to do it with real css.

This is the crucial point! CSS isn't remotely difficult.

evanrmurphy5• 15 years ago

> takes like maybe ten minutes of reading a how to guide as to how to figure out how to do it with real css.

Sorry but I'm skeptical.

If you could prove this by sharing a paragraph or two (should be all it takes, right?) teaching how to use CSS to build reliable layouts I would be grateful.

rjprins• 15 years ago

"Semantically incorrect"

A "table" is an abstract concept with certain properties. If a layout shares those properties, it might as well be a table. If it quacks like a duck..

andybak2• 15 years ago

I enjoy luring people in to discussions about tables vs pure CSS layouts. You get a lot of hand-waving about theoretical benefits related to accessibility and the semantic web. Just press them for specifics and ask for examples of a simple three-column layout table causing an actual problem for any extant user-agent.

blauwbilgorgel4• 15 years ago

Though I too enjoy boring people with the "Tables are bad for anything"-pedantry it would be easy to give a few reasons where a simple three-column layout can turn into a problem.

1) You colspan the header image. Since the table "encapsulates" the columns, for user-agents with a browser width smaller than the header image, content will be less accessible.

2) Screenreaders will have trouble reading the content inside the layout in its intended order. You are presenting the screenreader with a table, so its expects tabular data. You can't content stack your page elements (and place the most relevant important information at the top).

3) No progressive page loading. It will not always take longer to render tables, over divs, but the loading will be a lot clunkier. Internet Explorer might wait till it has the entire table contents, before it renders the table, giving the user a blank screen.

These are some actual user (agent) specific problems, on top of many other problems with using tables for layout, maintenance being a particular excruciating one.

jpr• 15 years ago

> I know in design land this is an absolute no-no, but at the end of the day 1) it works 2) it's simple 3) it's x-browser 4) it's reliable.

The conclusion I would make from that data is that designers are... ahem... idiots (for not using a working, simple and reliable cross-browser solution)?

weavejester• 15 years ago

Multi-column support is already in CSS3, and is supported by all modern browsers... with the usual exception of Internet Explorer.

However, multi-column implementations tend to be still a little rough around the edges, and some of the more complex formatting options don't appear to work. Also except to use -moz and -webkit a lot, unless you're using a framework like Compass which will handle the cross-browser support for you.

It also looks like there are a few Javascript libraries to give IE support for the multi-column CSS properties.

wvenable3• 15 years ago

> with the usual exception of Internet Explorer.

Which, of course, makes it's entirely useless for real work. CSS properties for layouts that web developers commonly did in the 90's should have been in the spec from day one. Instead, CSS was far too concerned with word processor-like document layout than anything resembling a web page.

lwhi22• 15 years ago

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

EDIT: for the down-voting, disbeliever[1] ;)

[1] http://en.wikipedia.org/wiki/Progressive_enhancement

trebor• 15 years ago

CSS isn't to blame for a lack of creative application of itself. It doesn't matter what the `float` attribute was intended for, look at all the cool stuff it can do! Yes, I know it's hard to make column-based layouts. But really, go use a table (JUST ONE) if you must—but it still isn't too hard to do using CSS.

cletus• 15 years ago

The problem with CSS is that it wasn't designed to solve a particular problems. Solutions to those problems came later with the tools that were haphazardly thrown together.

Example: vertical centering in CSS is far harder than it should be [1]. Why doesn't "vertical-align: middle" just work for divs like it does for table cells? I'm sure there are reasons. They just aren't good reasons. What's more: why hasn't CSS3 fixed this? It's a longstanding problem.

CSS is littered with examples like this that just go to show there was (and still is) a disconnect between what the W3C is doing and the problems people actually have.

My other big problem with CSS is the "inheritance" model. For one, it shouldn't be called inheritance. It should be called "cascading" because that's what it is.

Inheritance at the class level would actually be useful (and is another glaring omission).

Layout, even with CSS3, is still far harder than it should be. The approach CSS should've taken is to to work through a whole bunch of layouts and figure out how they're implemented. If it's hard, CSS still has gaps to fill. Don't release a spec until those gaps are filled.

[1] http://www.jakpsatweb.cz/css/css-vertical-center-solution.ht...

lwhi22• 15 years ago

I agree that CSS can be frustrating - but I think it's a bit harsh to state CSS has failed when so many people are able to successfully use it to create a huge range of layouts.

People assume CSS should be easy and straightforward - but like most things, it takes a while to get to grips with.

I think there are maybe two main problems with CSS.

One, is that for a long time logic wasn't enough when it came to writing CSS markup. A large number of browser quirks meant that hacks and workarounds needed to be employed all the time. This is luckily changing .. modern browsers are thankfully much more coherent than their previous incarnations.

However, this perceived lack of logically coherence - and the need for arcane knowledge - is obviously infuriating to most people starting out ..

The solution has been to learn a handful of techniques - read a lot, and press on. While it's initially annoying, its not an insurmountable task.

The second is that CSS requires a lot of diligence on the part of the developer. There are good ways of writing code. I've found the 'cascading' part of CSS is quite often forgotten about - but well written mark-up can use this to greatly simplify the complexity of spaghetti code.

"Example: vertical centering in CSS is far harder than it should be [1]. Why doesn't "vertical-align: middle" just work for divs like it does for table cells? I'm sure there are reasons. They just aren't good reasons. What's more: why hasn't CSS3 fixed this? It's a longstanding problem."

I agree - this is annoying.

However, HTML was designed to allow content to be viewed at various sizes - and to scale width-wise (allowing the vertical height to adapt automatically) - I've a feeling this might be part of the reason why vertical align hasn't been included). Vertically centring fixed height elements is very straightforward .. vertically alignment for dynamic height elements is less straightforward, but it's usually possible.

"My other big problem with CSS is the "inheritance" model. For one, it shouldn't be called inheritance. It should be called "cascading" because that's what it is."

The first C in CSS is there for a reason ;) I think the cascading feature is actually quite powerful.

One of the things I'd most like is a way to use variables in CSS - but this will thankfully be addressed in CSS3.

"Inheritance at the class level would actually be useful (and is another glaring omission)".

Classes can be combined, and once applied, a class affects the descending elements contained in the DOM. I'm not sure what you'd ideally like?

Lastly there are some good projects out there that address quite a few of the gaps in the CSS specifications in a very reasonable way. LESS[1] and SASS[2] are two that come to mind.

[1] http://lesscss.org/

[2] http://sass-lang.com/

ericb2• 15 years ago

[3] http://en.wikipedia.org/wiki/Stockholm_syndrome

masklinn• 15 years ago

> My other big problem with CSS is the "inheritance" model. For one, it shouldn't be called inheritance. It should be called "cascading" because that's what it is.

Cascading already means something in CSS (hint: the C means "Cascading", that quite strongly suggest there is a concept of cascade in it). And I'd like to see what problem you have with CSS inheritance: if an element inherits a property, then it gets the same (computed) property as its parent. That seems pretty simple and straightforward, and a good match for the word "inheritance".

> Inheritance at the class level would actually be useful (and is another glaring omission).

What does that even mean? Do you mean mixins at the block level? Overriding rules? Classes are just a type of selectors in CSS, where would inheritance fit in anything? And if you can inherit classes (whatever that's supposed to mean) why couldn't you inherit ids, attribute selectors or pseudo-selectors?

lwhi22• 15 years ago

Exactly - I don't think it's fair to blame a spec when its lack of knowledge that's driving the criticism.

EDIT: Thinking about it - maybe the author should have employed a front-end developer? There's a good reason people specifically work on this stuff ..

catshirt3• 15 years ago

i can't help but feel that this kind of hatred is only derived from a lack of understanding of css. particularly the primary case for floats. admittedly a bit clumsy, they do whatever you ask them just fine.

it has it's quirks. though considering there are only a very few contemporary designs css couldn't achieve, surely it's doing something right.

that's not to say css couldn't be improved. but to think it takes "magic of the deepest kind to implement what should be simple", as one commenter says, seems like ignorance to me.

andybak2• 15 years ago

With all due respect you either are suffering from Stockholm Syndrome or you haven't given much thought to how one could design a text-based format for layout.

Not in the feverish imaginings of a thousand tortured opium dreams would one design something like CSS-P. Try sitting down with someone who has never used CSS and teaching them how to do a simple 3 column layout with background colours and a header and footer that works reasonably well across the three major browsers.

Scratch that - sit down and explain it to me. I gave up and hired someone else to do it.

catshirt3• 15 years ago

"Try sitting down with someone who has never..."

sorry, are you saying that this frustration is most prevalent in people who don't have a strong grasp on css? isn't that exactly my point?

what precisely are you trying to argue? that floats and columns aren't perfect? allow me to reiterate a few of my concessions: "that's not to say css couldn't be improved", "it has it's quirks", and "admittedly a bit clumsy".

with all due respect, perhaps you're either suffering the effects of mere exposure or self-victimization.

tptacek• 15 years ago

  body {
    #header {
      @include column(24, true);
    }
    #right {
      @include column(4);
    }
    #center {
      @include column(14);
    }
    #left { 
      @include column(6, true);
    }
  }

That's Compass/Blueprint.

Complaining about CSS is like complaining that the register names in x86 assembly have too many 'e's and 'x's in them. Don't write CSS; write something that compiles down to it. People argued about macro assemblers. Then they argued about C compilers. Then they argued about high level languages. People are always going to argue with replacements to technologies they've grown expert in. That doesn't mean you have to listen to them.

blauwbilgorgel4• 15 years ago

How about: Explain valid Doctypes and rendering modes then: <style>

* { margin: 0; padding: 0; }

.columnwrap { width: 960px; margin: 0px auto; overflow: hidden; background: url("faux-columns-red-green-blue.png") repeat-y; }

.col1 { float: left; width: 200px; }

.col2 { float: left; width: 500px; }

.col3 { float: left; width: 260px; }

</style>

You could create 90%+ of the websites with that and even IE6 would know it, because that's how floating designs were made 5/6 years ago.

wvenable3• 15 years ago

I'm constantly working in HTML and CSS for my day job and floats cause the most problems and yet they're also the only way to create some complex layouts. Honestly, to this day, I don't know all the rules about floats and most of the time I end up doing cross browser trial and error until I get them to work right. That is not good design.

lwhi22• 15 years ago

You need to learn how to clear floats, 'overflow: hidden / overflow: visible' are your friends.

I work with HTML and CSS constantly and rarely have problems with floating elements.

romaniv2• 15 years ago

i can't help but feel that this kind of hatred is only derived from a lack of understanding of css.

The problem of element layout is a relatively simple one. It should not require some kind of in-depth "understanding" and extensive research. That's pretty much the point of the article, and I tend to agree.

CSS does layouts badly, and it should include dedicated tools to deal with the common issues. Right now, it pretty much relies on a bunch of hacks. The problem with those hacks is that they don’t allow for easy modification or code reuse. Nesting one complex layout inside of another is most likely to break both of them.

It always seemed to me that the people who defend CSS as "good enough" simply stick with a couple of mostly-working solutions and never try to design their websites exactly as they see it. That’s where the real pain starts. Something that takes five minutes with tables + css takes hours of reading and experiments with a "pure" layout. The sheer amout of articles about multi-column layousts is tribute to how complex the problem is.

catshirt3• 15 years ago

"The problem of element layout is a relatively simple one. It should not require some kind of in-depth "understanding" and extensive research. That's pretty much the point of the article, and I tend to agree."

maybe my comment was ill addressed, then. i agree with this. my sole intention was to express that once you get over it's issues, you can write css just as fluently as anything else.

perhaps what confused me is that the article is expressing a sentiment that's been common for nearly a decade.

yuhong• 15 years ago

I should blog about the disaster that was CSS in Netscape classic and IE's attempt to rush CSS1/CSS2 support before the spec for both was finished and how it caused compatibility issues. You might be surprised to learn that the first draft of CSS1 dates back to the Netscape 0.9 period!

blauwbilgorgel4• 15 years ago

I love CSS2 just the way it is. Developers seem to have a knack of forcing object-oriented thinking on CSS. They want to dictate what CSS should do different, when browser vendors still have trouble deciding what specification-valid CSS should do.

Dynamic CSS to me is an abomination. CSS is not a programming language and I doubt treating it like one will enhance portability and suddenly inspire the OP to invent the "holy grail" of CSS layouts: A simple variable height multi-column design with a header and a footer.

Come on, give the web and the front-end community a little respect. Don't use javascript for essential design/layout work, you don't need it, never needed it for years. You don't need hacks or CSS3 to build a fantastic website. You can float and use absolute positioning to your hearts content. You can keep your stylesheet organized and even support mobile and print media with it.

@cletus Vertical-align:middle does work differently on block-display elements. Use it in conjunction with display: table-cell or look at http://phrogz.net/css/vertical-align/index.html

I consider the OP post a little flame-batish and uninformed. I could say this about Lisp in an exaggerated manner: I hate it, because it does support labda, though it has its drawbacks and all those brackets look silly and confusing. I haven't really studied Lisp, but it could benefit from listening to my problems (which are real).

ryanf• 15 years ago

1) CSS is great the way it is

2) CSS makes "a simple variable height multi-column design with a header and footer" require so many contortions to achieve that it's considered a "holy grail" and not "a basic layout"

?????

blauwbilgorgel4• 15 years ago

The OP is treating a basic layout like a "holy grail". Around 2004 Glish.com published a series of CSS-based layouts they called "the holy grail" and many more followed. It's a bit of an insider's joke I guess.

A wrapper, a header, 3 columns, a footer in CSS was a "holy grail" back when table-based design ruled and everybody was figuring out new things to do with CSS (csszengarden.com).

Nowadays, it's easy. It doesn't require any contortions at all. Wrap the floating columns and clear them... The OP is lamenting 5+ year old problems, where there are simple and proven solutions available to anyone willing to simply look, instead of rage.

ned• 15 years ago

After doing front-end development for 10 years, I have come to the conclusion that 97.3% of all my annoyances with CSS would disappear if IE and Opera adopted the Flexible Box Model (http://www.w3.org/TR/css3-flexbox/): vertical centering, scaling based on available space, constraints-based scaling, etc.

This is basic layout behaviours that I keep spending hours implementing in JS, which is slow and brittle, because you need fallbacks, etc.

gcv• 15 years ago

TFA seems to be down right now, so I can't read it, but I have a sense of its gist from this thread.

I have an extremely low opinion of CSS. It has poorly thought-out abstractions, and the designers sold that as a feature ("it's not a programming language!") as if that's a good thing for a computer technology primarily used by coders.

However, I've been able to make CSS work. I learned a bit about its general nastiness, and struggled with browser compatibilities (insert some choice phrases about IE here). Then, I managed to make nearly all problems go away by using column layout systems. http://960.gs/ with 24 columns works well for me.

Using these systems requires some extra markup and introduces some additional div noise. This problem tends to come up for any non-trivial layout anyway, but my .css files stay free of weird float and positioning rules (you know, the ones you can't understand six hours after you finally got the layout to render properly). On the flip side, I save days of effort, and I've been able to eliminate special stylesheets for IE. Anything "semantically important" still goes in separate "semantically important" divs, so accessibility devices should still be able to cope with the layout. Win-win, as far as I'm concerned.

PS: The next step is to turn CSS into a kind of object code. Someone who actually understands the way layouts should work can probably come up with a good language or syntax which can be processed into CSS.

gnosis2• 15 years ago

"TFA seems to be down right now, so I can't read it"

Try this mirror:

http://blog.aaziz.org.nyud.net/i-hate-css

Sizlak• 15 years ago

I haven't used a table for layout in 6-7 years, and although floated columns were initially difficult, I quickly found them to be very easy and more reliable than tables. These kinds of rants usually come from programmers who don't want to take the time to understand how CSS works, and when it doesn't "just work" the way they expect, they blame CSS. That said, CSS definitely needs improvement. I hope the flexible box model gains traction. I find that to be a more natural way to lay out pages, although the syntax seems a little clumsy.

angdis• 15 years ago

I honestly would be OK with CSS if its only problem was anti-intuitive complexity.

Unfortunately, CSS suffers from this complexity PLUS the fact that browser makers don't interpret CSS in the same ways. Both of these together make the whole enterprise of web development burn up far more time than is reasonable. What makes this even worse is that the w3c doesn't bother to step up and make clear the ambiguities of how CSS SHOULD BE interpreted. They're in a perfect position as an arbiter of correctness, but they squander that power and are content to leave everything up to variable interpretation.

Sure, there are frameworks that abstract away the bullshit of CSS, but these are the result of COUNTLESS wasted hours of suffering that have propelled people to create layers of tooling for something that could have been VASTLY more simple in the first place.

DanI-S3• 15 years ago

I feel a major problem here is that what we're using the medium for has evolved massively since it was first considered. The article suggests having special definitions for common elements, like header, footer and menu bars. What happens in 5 years, when those concepts are mostly obsolete and have been replaced by another way of doing things? That's how we ended up with the confusing model we have now.

blhack• 15 years ago

>What happens in 5 years, when those concepts are mostly obsolete and have been replaced by another way of doing things?

People stop using them.

DanI-S3• 15 years ago

No they don't; they carry on using them for entirely inappropriate things. Like tables for layout.

lwhi22• 15 years ago

CSS doesn't define element types. HTML does.

The proposed HTML5 spec. has definitions for many of these elements.

gnosis2• 15 years ago

Mirror of original article:

http://blog.aaziz.org.nyud.net/i-hate-css

ludwigvan2• 15 years ago

You hate CSS? Here is an actual rant by zedshaw: http://oppugn.us/posts/1287608776.html

"I absolutely hate CSS. It has to be the most inconsistent, poorly designed, bat shit fucking crazy piece of computing technology we have today. And remember, I used to code Ruby and Perl for a living. If I'm saying CSS is bat shit crazy I mean it."

ludwigvan2• 15 years ago

Also take a look at isotope and masonry for jquery-powered layouts.

Previous discussion: http://news.ycombinator.com/item?id=2189251

headShrinker• 15 years ago

Now with the slow death and lessening support of IE6 and even IE7, my CSS life has never been easier. I build some layout and test in IE8, Chrome, Safari, Firefox, most always, my layout is laid out. I spent the time and it's gotten easier. Now people are complaining "it's too hard. I don't want to learn. What happened to the 1997 misnomer that any one can build a website?"

"But CSS is hard..." Well life is hard. Listen I have spent years learning the ins and outs of CSS. (Mostly Browser compatibility issues and best use principals.) I have spent years learning all the skills in my web development tool kit. This is what allows me to bill for my skills; not everyone can do them.

regularfry• 15 years ago

That's the broken window fallacy at work. Why should CSS be hard? Why should it take years to learn the CSS-specific skills which, as far as I can see, mostly involve memorising hacks to work around browser bugs and a fundamentally insufficient layout model? All that energy you and I have expended learning this crap is effort we couldn't put towards something actually useful.

jsavimbi• 15 years ago

I don't understand rocket surgery. I hate rocket surgery. Rocket surgery is still a bitch.

That being said, I don't actually research, develop my craft, understand how to design, implement or maintain a solution or even work in rocket surgery. It was something someone asked me to do at the last moment and I thought I could pull rocket surgery out of my ass by reading up on some extra* articles.

* Implies that I regularly read rocket surgery journals.

I Hate CSS

Related Stories