Comment by cletus | Hacker News Reader

Comment by cletus | Hacker News Reader

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

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

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

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.

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

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.

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?

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.

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.

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.

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.

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.

That's why we have frameworks :)

We're talking about needless complication as opposed to essential complexity. We're talking about goddammit-I-just-want-x-next-to-y-no-matter-what-is-specified-ten-levels-up-the-dom-tree!

The essential reason that front-end development "should" be easier than back-end development is that back-end development is fundamentally algorithmic in nature and requires languages powerful enough to solve any solvable problem in computer science, while front-end development--and we really mean layout here--solves the limited problem of placement, layering, and coloring, and only requires a commensurate level of syntactic power for its implementation. I guess my point is that the front-end, or at least the layout portion of the front-end that CSS purports to solve, is so obviously so much less complicated than the back-end that you shouldn't have to point that out in order to deflect the accusation that it's just a naive expectation.

I realize it was probably tongue-in-cheek, but if anyone defends the complexity of CSS by equating it to a jobs program for web dorks, they've just ceded the point that CSS is improperly designed and needlessly complex.

My point was - if creating websites is so easy, why would we need any web-developers? In the best-of-all worlds, it would be straightforward - but in the real world there are lots of things to consider. We need specialists.

You might only use CSS for layout, but that doesn't mean layout defines the full-extent of its functionality.

When creating client-side user-interfaces, CSS is usually used in conjunction with other technologies. Front-end development often makes use of JS, and last time I checked that was a fully fledged programming language ;) CSS can provide a developer with a lot of flexibility - and the fact that you don't understand it is perhaps the main problem.

I think people assume they don't need to actually learn CSS - and get annoyed when they realise their brain wasn't preloaded with the required knowledge :)

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

Non-specialists don't need to know CSS in order to author information. The basics of HTML can be learnt in an afternoon.

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/

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

But I honestly believe sometimes a bad workman blames his tools.

I took the time to learn how to use it, so maybe I'm biased - but it's really not that bad.

And sometimes tools are just bad. Yes, a bad workman blames his tools, but that doesn't mean all tools are as good as they can be. Sometimes a good workman blames his bad tools; when there aren't better alternatives, what can he do?

Let me put my CSS thoughts in context: I self-assess to be about as competent in CSS as I am in PHP. Now, I know PHP isn't great. But when I'm smash-my-head-against-the-wall frustrated, it's usually because of CSS issues. >75% of the time.

In general, I expect frontend layout work to be less frustrating than backend work. It's less complex, IMO. And, actually, it can be -- just by using tables for layouts. So it's not inherent complexity that causes the frustration, it's the CSS issue (tables remove that frustration for me).

In short, I've returned to table based layouts because that tool fits my needs much much better than CSS. I use CSS for my styling, but layout goes into tables.

Maybe you should concentrate on back-end development?

I can sympathise, but I really don't think reverting to table-based layouts is a good solution.

EDIT: Reverting to table-based layouts _ISN'T_ a good solution.

lwhi - sure, I'm more comfortable doing back end dev work (and try to focus on it). But that doesn't change my opinion that CSS is a half assed solution that doesn't solve my problems. Tables do. And the counter-arguments against using a table based structure all tap into situations that haven't affected my specific context.

So tell me again why I should use CSS based layouts? For me, they frustrate me and prohibit me from accomplishing my tasks. Tables don't do this. And all the downside to using tables? Not particularly relevant for my goals.

Tables usually prevent incremental rendering.

Tables are usually more bytes of markup (have a lot of nested <tr><tbody> elements)

Tables may require you to chop single, logical images into multiple ones.

Tables may require you to use a 'spacer' image (!)

We're not living in 1998 (!!)

Tables make life hell for those using screen readers.

Tables lock you into the current design and make redesigns much harder than semantic HTML+CSS.

Tables prevent reuse of content on multiple device formats (mobile / desktop / tablet).

Tables prevent content from being easily scraped or translated into other formats (via a screen-reader or XSLT).

Tables usually prevent JS from being used to dynamically move and reposition specific content.

Tables make dynamic width / liquid layouts difficult (if not impossible).

Some objections, even though I don't use tables regularly personally:

Tables are usually more bytes of markup (have a lot of nested <tr><tbody> elements)

If you are concerned with size, you are gzipping or deflating and these tags should compress well

Tables may require you to use a 'spacer' image (!)

Div's require clear:both and other silliness

We're not living in 1998 (!!)

not really much of an argument--tcp/ip is older than that and we still use it

Tables lock you into the current design and make redesigns much harder than semantic HTML+CSS.

Perhaps a bit yes on your first point, but worrying about cross browser rendering issues twice will kill your time savings from "fast redesigns." If your table is object code, produced by a helper of some sort, this is not necessarily true either.

Tables prevent reuse of content on multiple device formats (mobile / desktop / tablet).

Not sure I follow. The current format for all these devices is just a standard browser + scrolling

Tables prevent content from being easily scraped or translated into other formats (via a screen-reader or XSLT).

Table headers and cells with classes and id's are plenty scrapable

If a person really can't see the disadvantages / advantages - I don't mind.

But it depresses me to think that some clients (who aren't knowledgeable enough to know any better) are being provided with sites that make use of something that was introduced as a stopgap solution 15 years ago.

The main reason people use tables is because they don't understand how to provide the alternative. That's not a good reason. People who do use tables should educate themselves - or pass the work onto a front-end developer.

I can see the advantages and disadvantages. I spent several years trying to force myself to use CSS for layout, because I thought that the abstract benefits of CSS were worth it. Abstract = "easier redesign" or "more accessible" type stuff. Things that had never affected me, yet.

And I spent so much time, so much frustration, trying to cram myself into the CSS semantic world. Then I realized, for my startup, that I needed to just BUILD things. I see CSS as providing generally abstract benefits, with very concrete disadvantages.

In short, CSS zealots sound to me a lot like this: "Well, if you could understand what you were doing, it would work right." That entire attitude puts me off.

Also, I believe it's a false dichotomy to say "no tables", or "only css". I put hacks in my code when it is beneficial for my situation. Tables are one of those hacks that I keep in my toolbox, right next to the duct tape.

Frankly, I find it obnoxious that you said, "People who do use tables should educate themselves - or pass the work onto a front-end developer." No. I understand my situation, my context, and my application. I made the decision to use tables, because it was more expedient, and I was insulated from the negative consequences. For you to imply that I'm doing something wrong on my code, well, that's just flat out obnoxious.

"Frankly, I find it obnoxious that you said, "People who do use tables should educate themselves - or pass the work onto a front-end developer.""

I'm not trying to be obnoxious. I didn't mean to offend you, or hit a raw nerve - but sometimes a change does require education. I can't see how declaring "it's not me it's you (CSS)" can be part of a reasonable solution.

CSS isn't that difficult - and I'm really tired of hearing (mainly back-end) developers berate something that I (and tens of thousands of other developers) use everyday successfully.

I find it obnoxious that so many people who don't understand how to use CSS successfully (and have chosen to use tables as a result) argue so fervently that their decision is the only logical choice ("I don't need to learn it, it sucks").

It's a case of the tail wagging the dog.

If you understand how to use CSS successfully and still decide to use tables, then fair enough - but in most cases I don't think there are many good reasons for doing so.

--

"I see CSS as providing generally abstract benefits, with very concrete disadvantages."

I'd (sincerely) be interested in finding out what these disadvantages are?

Sure, a change does require education. Where we differ is that I do not agree that pure CSS layouts are always the "best" solution. The "best" solution takes programmer familiarity, style, languages, business case, time lines, budgets, etc., as inputs.

And I'm tired of people telling me how I ought to program. It's generally well intentioned folks who have an idealistic theory (it's easier to modify! scrapers can access it more easily! it allows disabled people easier access!) pushed into a half-ass solution. Yes, I find the CSS2 standard half-assed.

For me, it boils down to what I can produce. I have much more flexibility (I can only get CSS to work "right" with certain types of layouts; tables, I can do anything) and am more productive with table based layouts.

Perhaps I'll run into a situation where a light bulb clicks on, and I go "Ohhhh, it would've sure been nice if I'd used CSS for layouts here!" But, up until now, I have only ever had the experience of "Fuck, I sure wish I had put this into a table rather than a CSS layout."

I've read several of the highly recommended CSS type books (Meyer, a list apart, etc.) I've tried to apply the lessons. I've spent more effort trying to figure out CSS than any single other technology I use. Maybe going to a class would help, or having 1-1 tutoring / peer sessions, but that's not in the cards for the future.

So instead, I just pathetically create sites that I love (and are successful, for me) with less frustration, faster, using table layouts.

YMMV.

One of the best reasons I can think of - is that it's good to be able to divide tasks.

If you code using tables - you can't easily hand your front-end work over to a front-end developer, because they won't be able to build an interface without modifying your code. It might be difficult for your business to scale as a result - but as you state, YMMV.

I'll be quiet now :) If you ever do find yourself stuck with a CSS problem, feel free to drop me an email.

Reply on news.ycombinator.com