
I Hate CSS - gnosis
http://blog.aaziz.org/i-hate-css
======
cletus
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...](http://www.jakpsatweb.cz/css/css-vertical-center-
solution.html)

~~~
masklinn
> 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?

~~~
lwhi
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 ..

~~~
mkn
_There's a good reason people specifically work on this stuff .._

I don't get this at all. Central to the design of HTML and the Web is the
notion of democratic access to information and the ability for non-specialists
to create it. Furthermore, the motivation behind CSS was to make it _easier_
to do this work by separating the design from the information. CSS should
therefore be, if not intuitive, at least easy to learn, use, and troubleshoot.

It's true, we need brain surgeons to do brain surgery, but we shouldn't need
specialists to do basic things like vertical centering, convincing layout
without tables, and overriding styles in nested elements.

We've come a long way from the intent of CSS if we're arguing that only
specialists should use it.

~~~
lwhi
" _Central to the design of HTML and the Web is the notion of democratic
access to information and the ability for non-specialists to create it._ "

I imagine the large majority of the hackernews readership can be defined as a
'web specialist' of one kind or another, so if this were true most of us would
be out of a job :P

My point is - there's no good reason why front-end development should be any
less complicated than back-end development. Just because people expect it to
be easy, isn't a good enough reason ..

~~~
danenania
Even the most complex layouts are conceptually much simpler than any non-
trivial business logic. You can test this by trying to explain both aspects of
a project you're working on to a non-technical friend and see which he or she
is better able to grasp.

It's important to distinguish whether a task is made complex because it
actually is conceptually complex or because bad syntax and language rules make
it complex. In the case of CSS, it tends to be the latter.

Adobe Flex makes application layout dead simple. All you need are horizontal
and vertical flows, consistent alignment, and border constraints. CSS would
become about 5x more intuitive and productive for web app development if it
just added these basic features and allowed us to escape its cryptic realm of
floats, blocks, and display:inlines.

~~~
lwhi
There's nothing cryptic about floats, block elements and inline elements. _But
you need to make an effort to learn about them!_

People assume that CSS should be easy / that they won't need to learn extra
skills - and are then annoyed because it doesn't work in the way they assume
it should.

Imo, it's a pretty ridiculous situation - how can a person judge something
they don't understand?

~~~
danenania
That's the point--it shouldn't take much effort. It's a simple problem made
difficult by poor syntax and metaphors.

I do understand CSS. I've created plenty of fairly complex layouts with it.
That's what allows me to judge it as inferior to other layout models I've
used.

Why _shouldn't_ it work the way people assume? I see very little benefit for
this trade-off, except perhaps for the salaries of CSS gurus.

~~~
lwhi
I don't understand how an incorrect assumption can be used as a criticism?
Just because you assume something, isn't going to make it true.

The problems you might want to solve may be simple - but problems that others
might want to solve might be more complex. It's not perfect, but CSS actually
works reasonably well in a variety of situations.

My main concerns were based around browser inconsistencies, but things are
much better in 2011 (compared to 2005).

There's a strong meme that reinforces the idea that 'CSS is rubbish' - but I
think it's actually counter-intuitive to spread it. Basically, all we end up
with are a lot of grumbling people who believe it's not worth learning - and
don't.

~~~
danenania
It isn't about assumptions being correct or incorrect. I'm saying that if
possible, a language should adhere to the concepts and vocabulary that people
bring to the table instead of inventing its own, unless there are major
benefits to be had in doing so. I see no benefits to the layout model of CSS
over that of Flex (quite the contrary), and the vocabulary used in Flex means
I understand how the system works immediately without having to look anything
up because I know what horizontal, vertical, gaps, and constraints are already
from my everyday non-technical experience, whereas I have no idea what an
'inline-block' is, and even when I look it up at w3schools, I get "The element
will generate a block box, laid out as an inline box", which is gibberish
without further research.

Clearly learning CSS is non-negotiable for being a successful web developer.
I'm not contesting that fact, I'm lamenting it.

~~~
lwhi
Being able to specify that an element is placed within a document flow
(inline) is useful. Conversely being able to specify that a (block)-level
element has its own position (relative or absolute) is also useful.

Sometimes it's useful for an element to be placed 'inline', but also share
some of the properties that a block-level element has (like width and height)
- so 'inline-block' has its place too.

I think part of the problem is, there are no every-day terms that can be used
to illustrate a lot of the concepts that CSS makes use of.

If simple terms were chosen, the ability to do a lot of things would be
crippled. Only simple things would be possible - and this wouldn't suit
everyone.

But I do agree that it would nice if everything made more sense from the get
go.

~~~
danenania
I don't think those properties should be thrown out. As someone said they are
useful for what they were meant to do: style documents. But they're very
clumsy when it comes to laying out applications. CSS (and/or HTML) simply
needs a friendlier and more direct interface for this purpose.

~~~
lwhi
That's why we have frameworks :)

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

~~~
evanrmurphy
> _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.

~~~
flyosity
There are many CSS books that give concrete examples of various layout types
that work in all browsers.

Dan Cederholm wrote one of the best:
<http://simplebits.com/publications/bulletproof/>

~~~
evanrmurphy
Thank you, this look like a good resource. :)

However, a book is a very different investment from "maybe ten minutes of
reading a how to guide".

~~~
flyosity
If you want that, see this:

<http://www.maxdesign.com.au/articles/css-layouts/>

It was written in 2002. Cross-browser layouts are a "solved problem" :)

------
ned
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.

------
angdis
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.

------
ludwigvan
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."

------
catshirt
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
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
" _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
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.

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

------
rjrodger
Use sass: <http://sass-lang.com/>

In particular: sass --watch styles.scss

Big productivity win.

~~~
nathos
even better - use Compass: <http://compass-style.org/>

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

~~~
Fluxx
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
That's awesome to hear!

------
weavejester
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
> 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
<http://dowebsitesneedtolookexactlythesameineverybrowser.com/>

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

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

~~~
wvenable
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
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.

------
headShrinker
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
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_.

------
blauwbilgorgel
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
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
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.

------
gcv
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.

~~~
gnosis
_"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>

------
DanI-S
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
>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
No they don't; they carry on using them for entirely inappropriate things.
Like tables for layout.

------
Sizlak
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.

------
trebor
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.

------
ludwigvan
Also take a look at _isotope_ and _masonry_ for jquery-powered layouts.

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

------
gnosis
Mirror of original article:

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

------
jsavimbi
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.

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

~~~
tgriesser
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.

