9 ms·

I Hate CSS

51 points by gnosis 16y ago

TheSOB88 16y ago
Anyone have experience with good frameworks? An overview, perhaps?
- noahc 16y 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 16y 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 http://news.ycombinator.com/item?id=2162620
- tgriesser 16y 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/ http://meyerweb.com/eric/tools/css/reset/ I swear by 960.gs or any of the fluid interpretations (http://www.designinfluences.com/fluid960gs/ 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 16y ago
Use sass: http://sass-lang.com/ http://sass-lang.com/ In particular: sass --watch styles.scss Big productivity win.
- nathos 16y ago
  even better - use Compass: http://compass-style.org/ http://compass-style.org/ Takes Sass to the next level. Actually makes Blueprint usable.
  - Fluxx 16y 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.
    - chriseppstein 16y ago
      That's awesome to hear!
- stevelosh 16y ago
  Another alternative: LessCSS -- http://lesscss.org/ 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 16y 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 16y 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-system/ http://meyerweb.com/eric/thoughts/2009/02/17/wanted-layout-s...
retube 16y 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.
- btipling 16y 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 16y 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".
    - lwhi 16y ago
      "So is "float"." No, 'float' is a property - '<table>' or '<td>' are elements. Float has nothing to do with semantics, it's purely presentational. By marking up content semantically - it's possible to do interesting things with your marked-up content. For instance, content can be scraped more easily and a screen-reader can use elements to make inferences about the make-up of a page's contents. xHTML can be translated to other forms of XML using XSLT - and HTML content can be shared between desktop and mobile devices with just a stylesheet change. Liquid layouts can be utilised and JS can be used to move content dynamically. There are a huge number of reasons for marking content semantically. Using a table is a bad solution for anything other than tabular data.
weavejester 16y 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.
- wvenable 16y 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.
  - lwhi 16y ago
    http://dowebsitesneedtolookexactlythesameineverybrowser.com/ http://dowebsitesneedtolookexactlythesameineverybrowser.com/ EDIT: for the down-voting, disbeliever[1] ;) [1] http://en.wikipedia.org/wiki/Progressive_enhancement http://en.wikipedia.org/wiki/Progressive_enhancement
    - wvenable 16y ago
      Progressive enhancement is fine for things like rounded corners but we're talking about multi-column support in CSS3. Rendered in IE9 your page will look it belongs to 1994.
      - lwhi 16y ago
        I don't agree .. not many sites use multiple columns at the moment, and they can still look reasonably good (current). If not having multiple columns is a deal-breaker for a user, they'll switch browsers (which might not be such a bad thing). My point is, the fact that some browsers haven't implemented some features yet shouldn't be problem. A website usually doesn't need to look exactly the same on every browser - and following a system of progressive enhancement allows a developer to use newer features more openly.
trebor 16y 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 16y 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.html http://www.jakpsatweb.cz/css/css-vertical-center-solution.ht...
- lwhi 16y 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/ http://lesscss.org/ [2] http://sass-lang.com/ http://sass-lang.com/
catshirt 16y 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.
- andybak 16y 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.
  - catshirt 16y 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.
    - TheSOB88 16y ago
      All we're saying is that CSS was haphazardly thrown together, wasn't well thought out, and makes hard that which should be easy. In short, it sucks.
  - tptacek 16y ago
yuhong 16y 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!
blauwbilgorgel 16y 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 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 16y 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" ?????
  - blauwbilgorgel 16y 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 16y 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/ 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.
- mdiamond 16y ago
  +1 for mentioning the Flexible Box Module. I'm ashamed to say I only discovered it recently, but that thing looks like a lifesaver. Now if only Opera and IE would get on board... http://caniuse.com/flexbox http://caniuse.com/flexbox
gcv 16y 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/ 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.
- gnosis 16y 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 http://blog.aaziz.org.nyud.net/i-hate-css
Sizlak 16y 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 16y 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-S 16y 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 16y 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-S 16y ago
    No they don't; they carry on using them for entirely inappropriate things. Like tables for layout.
- lwhi 16y ago
  CSS doesn't define element types. HTML does. The proposed HTML5 spec. has definitions for many of these elements.
gnosis 16y ago
Mirror of original article: http://blog.aaziz.org.nyud.net/i-hate-css http://blog.aaziz.org.nyud.net/i-hate-css
ludwigvan 16y ago
You hate CSS? Here is an actual rant by zedshaw: http://oppugn.us/posts/1287608776.html 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."
ludwigvan 16y ago
Also take a look at isotope and masonry for jquery-powered layouts. Previous discussion: http://news.ycombinator.com/item?id=2189251 http://news.ycombinator.com/item?id=2189251
headShrinker 16y 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 16y 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 16y 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

51 points by gnosis 16y ago

TheSOB88 16y ago

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

noahc 16y 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 16y 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 http://news.ycombinator.com/item?id=2162620
tgriesser 16y 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/ http://meyerweb.com/eric/tools/css/reset/ I swear by 960.gs or any of the fluid interpretations (http://www.designinfluences.com/fluid960gs/ 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 16y ago

Use sass: http://sass-lang.com/ http://sass-lang.com/ In particular: sass --watch styles.scss Big productivity win.

nathos 16y ago
even better - use Compass: http://compass-style.org/ http://compass-style.org/ Takes Sass to the next level. Actually makes Blueprint usable.
- Fluxx 16y 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.
  - chriseppstein 16y ago
    That's awesome to hear!
stevelosh 16y ago
Another alternative: LessCSS -- http://lesscss.org/ 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 16y 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 16y 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-system/ http://meyerweb.com/eric/thoughts/2009/02/17/wanted-layout-s...

retube 16y 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.

btipling 16y 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 16y 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".
  - lwhi 16y ago
    "So is "float"." No, 'float' is a property - '<table>' or '<td>' are elements. Float has nothing to do with semantics, it's purely presentational. By marking up content semantically - it's possible to do interesting things with your marked-up content. For instance, content can be scraped more easily and a screen-reader can use elements to make inferences about the make-up of a page's contents. xHTML can be translated to other forms of XML using XSLT - and HTML content can be shared between desktop and mobile devices with just a stylesheet change. Liquid layouts can be utilised and JS can be used to move content dynamically. There are a huge number of reasons for marking content semantically. Using a table is a bad solution for anything other than tabular data.

weavejester 16y 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.

wvenable 16y 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.
- lwhi 16y ago
  http://dowebsitesneedtolookexactlythesameineverybrowser.com/ http://dowebsitesneedtolookexactlythesameineverybrowser.com/ EDIT: for the down-voting, disbeliever[1] ;) [1] http://en.wikipedia.org/wiki/Progressive_enhancement http://en.wikipedia.org/wiki/Progressive_enhancement
  - wvenable 16y ago
    Progressive enhancement is fine for things like rounded corners but we're talking about multi-column support in CSS3. Rendered in IE9 your page will look it belongs to 1994.
    - lwhi 16y ago
      I don't agree .. not many sites use multiple columns at the moment, and they can still look reasonably good (current). If not having multiple columns is a deal-breaker for a user, they'll switch browsers (which might not be such a bad thing). My point is, the fact that some browsers haven't implemented some features yet shouldn't be problem. A website usually doesn't need to look exactly the same on every browser - and following a system of progressive enhancement allows a developer to use newer features more openly.

trebor 16y 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 16y 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.html http://www.jakpsatweb.cz/css/css-vertical-center-solution.ht...

lwhi 16y 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/ http://lesscss.org/ [2] http://sass-lang.com/ http://sass-lang.com/

catshirt 16y 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.

andybak 16y 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.
- catshirt 16y 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.
  - TheSOB88 16y ago
    All we're saying is that CSS was haphazardly thrown together, wasn't well thought out, and makes hard that which should be easy. In short, it sucks.
- tptacek 16y ago

yuhong 16y 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!

blauwbilgorgel 16y 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 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 16y 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" ?????
- blauwbilgorgel 16y 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 16y 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/ 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.

mdiamond 16y ago
+1 for mentioning the Flexible Box Module. I'm ashamed to say I only discovered it recently, but that thing looks like a lifesaver. Now if only Opera and IE would get on board... http://caniuse.com/flexbox http://caniuse.com/flexbox

gcv 16y 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/ 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.

gnosis 16y 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 http://blog.aaziz.org.nyud.net/i-hate-css

Sizlak 16y 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 16y 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-S 16y 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 16y 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-S 16y ago
  No they don't; they carry on using them for entirely inappropriate things. Like tables for layout.
lwhi 16y ago
CSS doesn't define element types. HTML does. The proposed HTML5 spec. has definitions for many of these elements.

gnosis 16y ago

Mirror of original article: http://blog.aaziz.org.nyud.net/i-hate-css http://blog.aaziz.org.nyud.net/i-hate-css

ludwigvan 16y ago

You hate CSS? Here is an actual rant by zedshaw: http://oppugn.us/posts/1287608776.html 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."

ludwigvan 16y ago

Also take a look at isotope and masonry for jquery-powered layouts. Previous discussion: http://news.ycombinator.com/item?id=2189251 http://news.ycombinator.com/item?id=2189251

headShrinker 16y 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 16y 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 16y 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.