CSS is certainly an improvement on plain old HTML but it’s limitations are staggering and the lack of industry support will continue to hold back designers for many years to come unless we begin to build and design something better.
- For all that CSS has been able to do it’s a technological failure. CSS just doesn’t work as expected. How can I say it’s a failure when millions of sites use it? CSS can be used to style basic text attributes but browsers aren’t consistent in how they use this technology. Even though there is a “standard” and some browsers partially adhere to the standard to truly be a useful standard you need two things: Predictability and Consistency. CSS has neither. Any designer who has tried to create a large and complex site using CSS will tell you that all popular browsers interpret the standard differently.
- CSS is ‘markup centric’ not ‘design centric.’ I have this idea that designers should spend more time designing great looking sites and less time fiddling around with markup tags and browser compatibility. When I say ‘markup centric’ I mean that every CSS design tool forces users to go into source code mode to create an attractive modern site. Many designers take pride in hand coding CSS. Tools for designers should be design centric. PDF/postscript is a good example of a design centric markup , (unfortunately not very suitable for the web.) Designers don’t argue about how to create semantically correct postscript tags they just create great designs using great design tools. CSS sucks because it forces designers to think about how to make it work technically rather than how to make it work from a design perspective.
- Why on earth do we think that cascading is a useful feature? The way that styles cascade from one level of layout to a deeper layout makes it difficult to figure out why a particular item is styled in a certain way. By contrast non-cascading style sheets would be equally powerful and more predictable. The cascading makes it harder to interpret the page for both the designer as well as the web-browser. In fact the complexities in cascading is one of the reasons why so many browsers screw up the standard. In theory cascading could save bandwidth but in practice it creates bloated documents to get around the cascading issues.
- The box-model is too simplistic. The high level idea of CSS is that you can create attractive pages using margin, border, padding and content attributes. While this is a nice theory it’s primitive in it’s understanding of both layout problems and design. Highly developed design tools have layout engines that offer multiple layouts, non-rectangular margins, proportional layouts, dock-able layouts, table layouts, column layouts, etc. etc. It’ll be years before these features make it to CSS and many more before browsers implement them with any consistency. If browsers keep spending so much time on CSS they’ll have a well polished turd. Tools like Aldus Page Maker had better design tools, font tools and layout capabilities 10 years ago. This is because good design tools start with the design, not the markup.
- When writing software you learn what works and what doesn’t. You get new and better ideas and you throw away the old ones. This process of starting fresh is absent from the current CSS way of thinking. Each version of CSS builds on the previous one without acknowledging any fundamental flaws. CSS and its HTML sibling are the ultimate designs by committee. Any enhancements to CSS/HTML are piled on top of the old standards. This makes it progressively harder to create powerful, compatible and consistent browsers. This also makes it harder for designers to create sites that target the new platform because they are constantly trying to satisfy the compatibility with older browsers. Version compatibility has to be all or nothing. If you support V3 it has to be 100% supported and tested. Supporting some of the features actually makes things worse.
- There shouldn’t be multiple right answers for a visual design. The way CSS works there can be many ways to do the same thing. In fact there seem to be endless debates about the proper way to hack together trivial things like rounded corners. Rounded Corners? I mean really! Again I refer you to Aldus and even MS Word circa 1997. These features are not that hard to develop but getting them to work in a “standard way” seems to be all but impossible.
- CSS captures styles not semantics or design intention. A design intention would be something like: “I want to balance these two columns” or perhaps “This text should line up with the logo image in the first column.” When designers do things like this:
#content{position:relative;top:32px;left:20%;width:40%;}They are capturing the style specifics not the design intention. Why 32 pixels? Why 40%? Perhaps the logo is 32px tall? Perhaps the other column is 60% wide? When the logo changes size or placement how will you know what styles to touch? There is a basic concept called parametric design that can be used to specify the parameters of the design. This concept helps embody the design intention as a set of rules that can then be preserved as the design changes. Even a very simple parametric design allows you to preserve design intention rather then hard coding sizes and dimensions.
- Design should be declarative not interpreted. Again CSS has to process a large number of rules before it can figure out where things are supposed to go. After these rules are interpreted this data is thrown out and each and every browser that opens up the web-page has to re-interpret the data. This is incredibly inefficient. First of it makes web-pages load very slowly. Even when you’re on a fast connection the browser can’t figure out where to place objects until the entire web-page has finished loading. Secondly this interpretation is very prone to errors. A declarative design isn’t open to as much interpretation allowing it both render quickly and consistently.
- CSS is a pain to work with. Take a look at some of the designs over at CSSZenGarden. The designs are both attractive and sophisticated. A good designer could take these designs and mock up similar designs in PhotoShop or Illustrator in a matter of hours but take the same designs and ask for it in CSS and it may take a couple days. Each time you make an edit to your CSS you have to refresh your browser to see what it’s actually going to look like. Then after you get one browser working you need to double back and get the other browsers working.
- If you can’t get consistency across browsers then you can’t rely on CSS to accurately and properly design your site. If you can’t get the site to look exactly the way you want on every single browser then how can you claim that CSS is a good design tool or even a success? The fact that there is no alternative to create attractive websites doesn’t make CSS a good tool. There are two ways to solve the problem. The first is to continue to hammer on standards and CSS asking for a better solution. This has been happening for the last 10 years and it just doesn’t work. The alternative is to realize that CSS is flawed in it’s intrinsic design and begin to ask the questions of how could you do it better?
——–
Archived comments from the original posting
39 Archived Comments:
Chris Moritz said…- Well put. Someone had to say it.Not that I’d recommend heading back to table-land…
*sigh
Jordi S. said…- Greg, I think the problem is not exactly CSS but the lack of good CSS tools; advanced CSS editors should manage cascading, consistency, etc.Yes, editing CSS “by hand” is really painful, but no more than editing an image pixel-by-pixel; that is what tools are created for.
And about this:
—
“If you can’t get the site to look exactly the way you want on every single browser then how can you claim that CSS is a good design tool or even a success?”
—
Ups, “to look exactly the way you want”? That is not what a web site is for. What about usability and accesibility? Users should be able to change font size; and they may have big or little screens; or … If you want control what users exactly see, give them a paper-sheet.
Greg Raiz said…- Jordi S. – The lack of a tool is certainly a problem but Adobe/Macromedia is quite capable of creating high-end design tools. The reason that HTML/CSS is a disaster isn’t because Dreamweaver isn’t a good tool, it’s because it’s trying to design a tool around a technology rather then creating a great design tool then figuring out how to express that freedom using technology. The formula is backwards, it’s markup centric and that’s the flaw.The web is for creating designs that look exactly as designers want. Don’t believe me? Just take a look at any high-end site like espn, msn, yahoo, abc, nbc, microsoft, apple, dell, amazon, etc, etc. All these sites are all designed down to the pixel and they all care about usability and accessibility. It’s not a trade-off you can have good design, accessibility and usability.
The problem is that it’s a an enormous pain with css.I didn’t touch on accessibility but let’s call it a potential #11. People abuse css by turning lists into hover menus, fixing font-sizes so they don’t scale when the font increases and all sorts of other tricks that are totally not-accessible.
Jordi S. said…- Greg;
well, I use Dreamweaver and let me tell that it’s not ‘great’ editing CSS. It’s probably better than any other editor, but there’s a lot of things that could be improved (although it’s a hard hard work).Sorry, I don’t exactly know what you mean by ‘high-end site’ (poor English, you see), but let’s take the model-for-ecommerce one: Amazon.In Amazon users can change font size, the design ‘flows’ depending on screen-size, … Well, if you mean that designers want exactly “an usable design”, then I agree with you
But Amazon is not controlling design to the pixel (and they are doing right!).Yes, you’re right: CSS may be wrong used against usability. But… it’s powerful, so it’s dangerous (as nuclear power is).
So I won’t say CSS sucks… No more than some tools suck, or some designers suck. CSS simply is not perfect
Ross Johnson said…- “The web is for creating designs that look exactly as designers want. Don’t believe me? Just take a look at any high-end site like espn, msn, yahoo, abc, nbc, microsoft, apple, dell, amazon, etc, etc. All these sites are all designed down to the pixel and they all care about usability and accessibility.”Most of those sites are fluid and/or scalable sites. When you start designing sites that look differently dependant on browser/text size you are far far from pixel perfect design.
Every time I read posts such as this there always seems to be more of a “frusteration” than a good understanding and criticizm.
Your proposal to design a tool around the technology is a bit unrealistic. Shall we just convince all browser makers (including the ones that can’t even get CSS right) to just adopt a new technology?
Oh but wait, there is flash – and flash has it’s share of problems as well.
Once you get the hang of CSS it all makes sense and it is not frusterating anymore.
Mike G said…- This is a very, very good article. CSS is a disaster.
Montoya said…- Sorry Greg, but your post only shows how little you understand about the technology and the implementation of it, as well as the nature of the web and information exchange. Your “design centric” view of web design is limiting you and preventing you from adapting to a technology that offers improvements, not setbacks.It’s easy to argue about problems in any language, be it programming, markup, or a description language like CSS. Your post sounds very similar to an inexperienced programmer having trouble with the intricacies of the C language or someone who has never dealt with OOP before and encounter Java for the first time. If you had the experience, you wouldn’t blame the tool, but rather you would recognize that all of your complaints are the fault of both the implementation and simply the young age of the technology.
As a junior educator contributing to a college course with over 100 students learning CSS based design (as well as PHP programming), I can assure you that CSS is neither hard nor painful; if 100 students can learn it every year, and produce highly flexible, lightweight, and attractive designs with it, then maybe you just need to go back to school (and I say that without intending to offend you).
Greg Raiz said…- Montoya – Sorry but I do understand CSS, Java, OOP, C++, PHP and other languages. I don’t consider myself a CSS guru far from it but I do know the technology well enough to know it’s flaws and limitations. I’m also pretty familiar with it’s implementation having worked at Microsoft and having worked on a project for Firefox.I know that it is possible to create great looking designs in CSS. That’s not the point. The point is that creating these great looking CSS sites take significantly longer in CSS then in most other design tools even if you are a Guru.
I can design something for print production in roughly 1/10th the time it takes to design something for the web using CSS.
The fact that you are blaming me for not understanding is just funny. Your own portfolio proves my point:
html { font-size:100.01%; }
As a designer you shouldn’t have to fight the CSS and the browser to get what you want.
Montoya said…- greg: If someone came to you with a rant about C and all the intricacies of it, and posed those as problems in C and complained that something new and better is needed, you probably wouldn’t waste much time with them, but simply explain that if they understood the language better they would understand the how and why for everything.I never said you were not an expert in everything *other* than CSS, but my point still stands: you don’t know much about CSS. For people who learn it (and I can tell you, it’s not hard to learn when you have a good teacher), the development time is significantly less than what could ever be achieved with tools like Dreamweaver or Frontpage. Time spent fixing bugs, on the other hand, is not the fault of the technology but the fault of a certain browser which is 8 years old. Anyone in the software world knows that 8 year old software is very difficult to deal with, and blaming a new technology for problems with outdated software is putting the blame in the wrong place. An example like:
html { font-size:100.01%; }
wouldn’t be necessary if it wasn’t for IE 6 being so common, but who do you blame that on? The W3C CSS group, or Microsoft? Mind you, it’s a bug in Microsoft’s software. Maybe that will help you shift the blame in the right direction.
You said: “I can design something for print production in roughly 1/10th the time it takes to design something for the web using CSS.” Will your print design scale to the user’s window size? Will it allow the information to be used by multiple user agents (machines as well as humans, including humans who access the web in alternative ways rather than just visually)? Will it offer multiple styles? Will it be easy to modify in the future?
Or are we comparing apples and oranges?
The truth here is you don’t understand the web. You understand print design, and client side software, and even browsers, but that doesn’t give you any knowledge of how the web works. I still challenge you to really learn the medium, the technology, the research and the philosophy behind modern web design practices and why things work the way they do. If you did, you would understand why “problems” like cascading are actually features, and why this new way of looking at websites is a step ahead, not behind. Until then, you are entitled to your opinions, but you have no credibility to back them up.
said…- I 100% do not agree with you.
Greg Raiz said…- To those that don’t agree…I don’t mind that you don’t agree. The fact that there seems to be a range of opinions means I touched on something that is perhaps partly true. I doubt that I’m 100% wrong but I’m fairly sure I’m at least partially right
Counter all 10 of my points if you want. Explain how a markup centric
language is better for design. Explain why consistency is not a problem. Explain why cascading is a good thing. Explain how things like CSS hover menus are a good for accessibility.Go ahead and convince me. I’ll try to keep an open mind.
Scott said…- Nice job stirring the pot Greg. Hope it gets you some business. I’ve taken the time to
rebut your ten points on my own blog (not trying to spam; I felt it would get a bit long in the tooth to do it in your comments section).Mr. Montoya is corrent. You have a limited understanding of the medium. (Oh, and his website kicks ass.)
Greg Raiz said…- Scott, good comeback.I didn’t write it to be provocative. I think CSS limits what designers can do. I see these limitations everyday. There are many designs that are difficult to do in CSS but there are others that I have found impossible.
I believe CSS limits the creativity of designers by imposing technological constraints on visual designs. This may be because I come from a print background but that doesn’t change the fact that I still feel limited.
While CSS can be incrementally improved I personally think it’s important to think about how to make large improvements rather then incremental ones.
said…- These are very valid points. I’ve actually seen people praise a website redesign that was nothing more than a small menu, background gradient and an input box on the page. I think there is an “elitist” attitude when it comes to table-less CSS sites that is getting in the way of advancing this technology. If you speak up about the problems with CSS and how you have to learn all these hacks and tricks to get a somewhat usable site, you get the typical answer that it will get easier in time. How long do we have to keep waiting? The reality is that most people don’t have time or patience for complex workarounds. Designers and developers should demand better.
said…- CSS is merely a means to an end, and the best one for the way the WWW is supposed to be at that.CSS has nothing to do with design whatsoever IMO, and thus shouldn’t be judged by design.
Also, it is very easy to make your website look the same in all browsers.
said…- And your alternative? You’d prefer to use tables?CSS is a standard, which all browsers (with the exception of IE) try to adhere to. As they get closer to meeting that standard (like Opera9, the new Firefox 3 (Gran Paradiso), the ability for code to be handled identically across platforms and browsers is getting better.
Of course, IE is and always will be the exception. While it is consistantly behind the other major browsers, support is slowly improving.
The point of the internet has evolved to be a source of information and entertainment that is widely available to everyone, everywhere – be it on a cell phone, by a visually impaired person with a braille keyboard, or your average citizen.
The internet isn’t a newspaper. You don’t have absolute control over what your viewers see. You seem to miss the point that the fact your viewers ultimately have control is the benefit of the internet – it’s customizable by individuals to meet their needs. If they need the font size larger, if they need to lower or raise the contrast, or they can’t see and they can have a browser speak to them.
CSS isn’t the be-all and end-all of design – you’re correct. If you want a design that aligns down to the pixel and has the perfect colours on every monitor/browser/platform, HTML is not your best bet to start with, and NO interactive language with the flexability of HTML could do that anyway.
HTML and CSS are easy to learn, cheap on bandwidth, viewable in every browser made in the last what, 6 years, including PDAs/cellphones…
What is your alternative?
Phillip Ryals said…- Greg, as I read your thoughtful list, I came to the same conclusion that Montoya has voiced… that you are essentially a print designer who might not fully understand the web world.I absolutely agree that web design using CSS is horribly lacking from a design perspective, but just because it doesn’t give a designer a WYSIWYG interface doesn’t mean it sucks.
You push the idea that ‘something better’ should be created, either by fixing CSS or replacing it outright. I challenge you… how would YOU create this fictional superior method of describing a complicated design using RAW TEXT?
You see, from a designer /and/ programmer’s perpective, CSS is a very good tradeoff. No, I can’t draw a few boxes, apply some drop-shadows, scale some fonts, and see the results in a web browser. That’s life. Vector graphics for the web has been tried before in many many ways (anyone remember the Xcalibur BBS?) but it’s never taken off because it still requires more processing power than just rendering raw text.
The point is, you’re not going to get an easy-to-use method of creating complex designs. They’re complex, and so the method for creating them is complex. While CSS rendering isn’t predictable across all browsers (NOT the fault of CSS), it does indeed make many things possible that would otherwise never work.
Dean Hall said…- Clearly CSS is not perfect. Greg touched on some good points like cross-browser compatibility. I certainly agree that CSS does not offer me and my clients a complete solution. Frankly, I don’t give a damn if it helps anyone else or not – I’m about getting my projects completed.I still use CSS, but I note the fact that it doesn’t work the way I need it too. Ie. When I design a site using CSS, I have no assurance it will look and perform the same across browsers and technologies. I t goes some way to this though, and I still use it. But I still use tables for some projects too.
My rule of thumb is “Consistency, Consistency, Consistency” when it comes to a GUI. Neither CSS or anything else gives me an assurance of that. So I do what all developers do and I do whatever works. If CSS works for a project, then I use it. If it doesn’t look like it will, I use tables.
I thought this was a good article, with some valid points.
said…- CSS’s strongest argument is only its swarm of fanboys. At least with tables, when I resized my browser window, it didn’t break a site’s design or make it completely unreadable. It kept the content locked in an accessible place. It says a lot about CSS when Photoshop’s table slice-generater, though it creates nightmarish html – it can autogenerate readable code and looks the same on every browser. If CSS can’t even claim what the joke “Adobe Photoshop’s HTML” could accomplish, it’s simply pathetic.
said…- Totally agree with what Montoya is saying, nothing to add.Greg I just want to ask you what if I told you that Quark will no longer be supporting style sheets? Would you be ok with that? Even if you were working on a 120 page document? I’d be pissed, just like I would be pissed if they took away CSS.
said…- All these people repeating that Greg’s a “print designer who doesn’t understand CSS” just don’t get it.They have adopted themselves to the css mentality, instead of adapting the technology to design needs.
Most miss the point altogether, like:
Greg I just want to ask you what if I told you that Quark will no longer be supporting style sheets? Would you be ok with that? Even if you were working on a 120 page document? I’d be pissed, just like I would be pissed if they took away CSS.
This is irrelevant. Greg has not talked against the general idea of stylesheets, he talked against the CSS concept and implementation in particular. His points are specific and razor sharp, and could be used in designing a BETTER stylesheet language for the web. Like this point:
CSS captures styles not semantics or design intention. A design intention would be something like: “I want to balance these two columns” or perhaps “This text should line up with the logo image in the first column.” When designers do things like this:
#content{position:relative;top:32px;left:20%;width:40%;}They are capturing the style specifics not the design intention. Why 32 pixels? Why 40%? Perhaps the logo is 32px tall? Perhaps the other column is 60% wide? When the logo changes size or placement how will you know what styles to touch? There is a basic concept called parametric design that can be used to specify the parameters of the design.Right on!
And since a lot of web pages nowadays are “web apps”, are you “css people” familiar with actual programming for GUIs? If you know GTK, QT, Java or what have you, they all have MULTIPLE layout models. CSS only has one, and a cripled one at that, the box model. A single model cannot solve all needs. (btw, almost all languages offer a table or grid layout manager, without sacrificing “fluidity”).
Some points:
a) The concept of styles is correct. It’s CSS that has it all wrong.
b) Design should be intention based and parametric. Hell, CSS does not even have parameters! If I want 20 design elements in my stylesheet to be 200px (or 20% or anything), I have to repeat myself 20 times over. When I want to change it to 200px it’s 20x times the work actually needed).
c) A lot of stuff should have been built in, in CSS and HTML and easier. Rounded corners? Blow me, just have something like:
#box {curve-top-right: 20px }
or have a way to define such effects in code blocks and share them.
etc…
said…- I partially agree. But at the same time, a number of the problems I have personally faced with CSS is browser compatibility. But I really can’t blame CSS for this; it is the browser’s fault. If an alternative to CSS came out, the browsers are still capable of fudging it up and making it difficult for the designer.I would say CSS could be better, but I would not say it sucks entirely. For every language, there are flaws and limitations and drawbacks. I can’t really appreciate the suckiness of CSS, or the lack thereof, until there are more alternatives to choose from.
Nick Presta said…- c) A lot of stuff should have been built in, in CSS and HTML and easier. Rounded corners? Blow me, just have something like:#box {curve-top-right: 20px }
Oh, you mean like CSS3′s border radius property?
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius
said…- “b) Design should be intention based and parametric. Hell, CSS does not even have parameters! If I want 20 design elements in my stylesheet to be 200px (or 20% or anything), I have to repeat myself 20 times over. When I want to change it to 200px it’s 20x times the work actually needed).”Or you can learn what cascading in CCS means and how to implement it.
said…- It says a lot about CSS when Photoshop’s table slice-generater, though it creates nightmarish html – it can autogenerate readable code and looks the same on every browser. If CSS can’t even claim what the joke “Adobe Photoshop’s HTML” could accomplish, it’s simply pathetic.Photoshop’s supported CSS slice-generation for a while now.
Web sites I build using CSS positioning for images are a lot more readable and maintainable than those I used to make using table-based layouts.
Greg Raiz said…- To the previous comment. even if you know CSS this still doesn’t address the lack of parameters. You can work around some of this with cascading classes but it’s not a great solution.a declarative approach would have:
$logoh:120px;
$smallMargin:3px;
$largeMargin;10px;
.logo {height:logoh;}
.titletext {top:logoh+smallmargin;}I’m using the $ show how you could declare a parameter/variable. This is still declarative so it’s not an ideal solution but at least it demonstrates how parameters could allow you to do things that are difficult or impossible to do via traditional cascading.
said…- @Anders said…“b) Design should be intention based and parametric. Hell, CSS does not even have parameters! If I want 20 design elements in my stylesheet to be 200px (or 20% or anything), I have to repeat myself 20 times over. When I want to change it to 200px it’s 20x times the work actually needed).”
Or you can learn what cascading in CCS means and how to implement it.
Erm, cascading != parametric.
In the case I describe, for example, who told you that the 200px always refers to the same attribute (like width?). It could 200px of width for this element, 200px padding for the other, et al, used for implementing a consistent grid.
Or I could want a yellow background-color in one item, and a yellow foreground in some text or a yellow border in another. Cascading does not offer a way to define all these cases depending on a single color definition.
—
foljs
said…- Well, Greg, in truth, it’s the entire technology of the web that sucks.Your comparison to Postscript and the evolution of Page layout programs is spot on.
HTML, CSS, Javascript and all their evil offshoots are a result of:
* an inadequate and limited initial definition of the “web page” problem domain
* a crude, fatally flawed but simple to use initial technology (HTML)
* which lead to designers and programmers crufting up a mind boggling array of workarounds to fill the gaps (Tables and Spacer gifs)
* which spurred a belated attempt to redefine the underlying technologies by rigid academic edict mainly by non-designers (Cascading Style Sheets, XHTML, Widespread Deprecation)
* which was anyway largely undermined by the piecemeal and incompetent implementation of the new technologies in browsers and development tools (all of them)
* which is now all welded into place by the network effect, endless inert committees and monopolistic self interest. (Welcome to the Great Leap Backwards)
We are stuck with a kludge built on a kludge until we have a disruptive technology.
And Flash wasn’t it.
said…- HAHA!!! Disable CSS and take a look at this page! If this site doesn’t show how great CSS is, then what does? All you see is a perfectly fallen apart page, just like you should see with a CSS site. Just take a look at the source.
Greg Raiz said…- bjk2007 – Just because you ‘can’ make a site work with CSS doesn’t make it a good tool. The CSS for this blog came straight from Google’s blogger tool (2006). It’s full of all sorts of silly things that show just how hacked it is,Yuck! Yes there are certain things that CSS can do well, and it’s certainly better then plain old HTML of 1996. But as a generalization, it still sucks.
said…- First off, I’m sorry if my last comment was a little offensive. Tables vs. CSS is a controversial web design topic. I came across this blog entry following the post of a member of a web design forum. Let’s just say he can act really stupid sometimes and I came here pretty upset after being personally insulted by him.
I did take the time to read it again after I had calmed down. I would have to say that while I disagree with you on several points, I do agree that CSS hasn’t done as well as it should have. Why? Simply browser support (IE). If we can’t get them to support CSS, how can we ever assume that they’ll support the newer and better theoretical CSS replacement language?
I guess the rest of my disagreements with you lie in a coder/designer mentality. You seem to be more of a designer while I’m actually a person whose strengths lie in coding, so we’re bound to disagree on how things should work.
said…- You all must be joking. CSS is without a doubt the future of web design. WHY because css is exactly what xhtml needs to work and xhtml is going to be the future. WHY because it is (finally) a consistent DOM markup that will be able to be used by many varying systems.
IN PLAIN ENGLISH:
Not Microsoft, Netscape, Mac whatever can stop a standard being created, fact is those “browser companies” don’t make websites or web application (well they do make some) and developers NEED a standard so they aren’t writting 12 different lines to support 12 different venues. With these 2 standards (CSS2 and XHTML) we will have easier to maitain websites, portable applications, accessibility features for the blind/hearing impaired and about a million other applications.
SO TO ANY NEWBIE DO NOT LISTEN AND MAKE SURE TO USE CSS2 AND XHTML IN ALL FUTURE PROJECTS
said…- The CSS Design When it comes to a fulfledged dynamic site it has more cross browser conflicts which are not easy to fix.
said…- AMEN BROTHER.
CSS is terrible. I’ve spent countless hours learning it and no matter what, the results are different from browser-to-browser.I can’t stand learning it, but at the same time I love the way some of these Css-driven sites are put together. I think to myself “I want that!” But it never happens. CSS is driving me insane. It always will drive me insane. Has potential, but it sucks.
John Nagle said…- You’re absolutely right.With Dreamweaver 3 and tables, it wasn’t necessary to look at HTML to lay out a page. With Dreamweaver 8 and CSS, the page designer must understand CSS, HTML, and probably Javascript. That’s was a big step backwards.The CSS system is just too programmer-oriented. And I’m a programmer. (Programmer as in MSCS from Stanford, the Nagle algorithm in TCP, inventor of ragdoll technology, real-time robot vehicle control, not programmer as in “writes some Perl”. And my first web site went up in 1995.) It’s not that CSS is hard; it’s that CSS is bad.
CSS is, simply, a badly designed layout system. Even the rather simple system in Tk which lays out dialog boxes and windows is better. Tk is a nested-box system, but both “pack” (like CSS “float”) and “grid” (like tables) layouts are available in the same system. This is enough to handle most cases. Which “float” and “clear” are not. Page layout is forced to fall back on absolute positioning far too often.
The clever way to do layout would have been with a constraint system. Each box has four edges and four corners, and it would be possible to bind corners and edges to create any desired relationship between boxes. This is something one could express easily in a click and drag graphical tool. Want three columns the same height? Tie their adjacent bottom corners together.
Want to fill the page? Tie the outside corners to a page edge. Ten minutes to explain to an artist. Advanced use would involve priorities on constraints, so if something had to give in “fluid design” as the page size or type size changed, you could pick what gave first. (This could be extended to allow curved boundaries, even splines, but that might be overdoing it.)The browser would have to have a constraint engine to resolve all the constraints, but there are known solutions to that problem.
Too many people drank the Kool-Aid on CSS. It’s just not that good a technology.
frostbyte said…- You missed the biggest problem of all. CSS dogma. We’re now at the point where questioning CSS is no longer politically correct. Just look at the anger in the replies. (Especially Scott’s. Check out his blog, you’d think you just insulted his mother. Warning: Horizontal scrolling)If you question CSS at all, you’re immediately laughed off as just another unskilled newbie who doesn’t understand, or some old timer who can’t get past tables. Even half the people who agree with you felt the need to clarify that they only agree with some points, “please don’t think I’m in the same camp as the anti-CSS crazies”.We’ll never get past CSS because it somehow became dogma and you can’t question the dogma.
John Nagle said…- The worst problem with DIV-based layout is that the layout system is too weak. There’s no form of “grid” layout. There’s no way to relate a DIV to anything but its predecessor, its parent, or an absolute position. The system is just too dumb. That’s why people have to stand on their head just to get three columns to work.Tables actually are a better designed layout system. Table layouts allow table cells which span multiple rows and columns. If all tables could do were simple grids of cells, the CSS approach might make sense, but tables are more general than that. And they’re well supported in Dreamweaver.The fundamental limitations of DIV-based layour are obscured by an excessive number of attributes and the occasional use of Javascript when the attributes aren’t enough. But underneath, the fundamental approach is just too weak.
If CSS had a grid capability, it wouldn’t be so bad. But it doesn’t.
said…- Greg – thanks for this spot-on article. After working the Web for 10 years, and still struggling to get decent CSS layouts that work with php includes, I was beginning to feel that I was getting stupid in my ‘old’ age. In fact, CSS is far less intuitive than our previous nemesis (Tables) and especially difficult when you introduce any “includes’ into CSS design layout. And on this note, Dreamweavers Layer layouts only work when using plain vanilla .html files. Try making absolute layers stick in place if you use includes with Dreamweaver layer layout – a hair pulling exercise that forces one back to Tables very quickly!
said…- Whether you like it or not BROWSERS and specially IE mandate what we use in the market. Check the logs of your web servers and then disagree with that.Read this http://www.mcsr.olemiss.edu/~mudws/font.htmlI was part of the workgroup for CSS and what we tried to do back then has nothing to do with what people fight about today.
It was about separating format from markup to create data semantics.
Greg you are right on the nail. I wonder how many of these so called “CSS Designers” have the BIG profitable accounts.
Can you make the money with CSS on these sites using CSS, I dare you?
Look at these:http://www.cosmopolitan.com/
http://www.elle.com/
http://www.nike.com
http://www.adidas.com
http://www.faithhill.com/
http://www.motley.com
http://www.imandd.com/index.html
Go on, make one of these (CNN for example) using CSS no hacks, js, pure w3c css. Publish the markup as a test and let us see that you know your css stuff.
Montoya you are the teacher, or is css only for the graphics blind? Prove Greg wrong, go ahead and make my day.
CSS can not do what the tables and flash can here. Forget semantics, forget standards, come and visit me for a little while in reality land. Bottom line people, hard cold cash it’s what matters.
Montoya get off you high horse and do something about it. Rewrite the standards so is more workable.
Use what works, and if you can separate format from markup with css and if tables have to be used so be it and format them in your css.
comparing the div to table, table is far away behind from div…
css is good… the problem is, you are not open for new things…
Another CSS sucks vote here
There are some cool things about CSS but the overall usefulness as a layout tool is way to problematic. Doesnt matter whose fault it is , it is what it is and it is a pain.
If we make CSS and HTML like “Word” or “PDF” the websites even more will look like wedding cakes.
Design. What is design? Why did I buy expensive wide monitor to have a narrow long vertical band of text on a red background? And scroll like crazy all the time down so that my finger hurts. Why I just cannot read the text and see photos on the normal wide page?
Is it design?
I could use a 10” monitor to read this page.
I don’t mean to bash anyone here, but I do sincerely believe CSS to be the future over tables – but CSS is not as easy as it is claimed out there on the web, requiring weeks to months just to create a simple website for a small business that is cross-browser compatible. To put it shortly, designers should have tools that are in convention with the design community (pretty much anything by Adobe unfortunately); CSS standards were created by coders for coders. What’s next? Learn LaTex to format pages for magazine layouts instead of using Quark/ InDesign? Technically, LaTex is just as efficient/ faster/ better as CSS. There is not much effort to bring CSS approachable to designers; only more arcane standards for coders to devour and implement with their awful self-taught website design philosophies. And then there are those who think web content is everything. Maybe we should resort back to Benjamin Franklin style of newsletter or scientific white papers next time we read GQ.
Should print publishing techniques be used online? I think they should be *adapted* for online audience, especially with all these interaction with video, blogs, twitter, etc. It would be irresponsible for the designer not to leverage new media (working together with the developer and back-end engineers – I salute your hard work), yet we shouldn’t forget the fundamental principles in design when we need new columns to be created on the go if the user decides to fully use his widescreen 1600×1200 monitor or condense it to iPhone display size without requiring him to use a magnifying tool. CSS can do all that and more, but it’s so counter-intuitive for the designer to use and there’s no headway to make CSS approachable, and by that I mean a new program or software to make web designing intuitive and fast. Even with Dreamweaver, I consider it to be an overglorified text-editor (yes I know, it’s an Adobe product which I mention in the first paragraph).
I’m frustrated because CSS promised so much and when it’s time to implement, it delivered so little or required expert hacks which I have little time to commit (have other dayjobs in this economy), nor the resources to pay a web dev. to code a series of static pages. However, my biggest frustration is that I use spend more time wrestling with CSS than actually designing layouts for prospective clients, but it’s a necessary evil. All the while the CSS standards committee and zealots just toil away with standardizing features with arbitrary priorities, always listening to the coder and little regards to the designer. After all, wasn’t CSS – with its middle acronym standing for *style* – invented for the purpose of the designer? What happened to that?
Will CSS make code leaner? Load faster? At ESPN.com their CSS code is bloating at 225KB, but granted it’s only loaded once while the new html holds content on diff. pages (main index page is 100kB, so for a total of 325kB, no images or JS). Point is, if we’re willing to make a website 300KB-800KB on initial load these days (Feb. 2010), I predict we can go even fatter in the future as more and more people have fast internet, leaving the dial-up geezers to bite the dust along with their IE6 (and older) browsers. Plus, with storage space and bandwidth costs falling per-GB, I’d venture a wild guess and say, it’s inversely proportional to content size for a 0 net effect on latency for the end-user. People are used to the load times of a bloated Word document, say 100KB vs. a super efficient Latex doc at 8KB – which is still less then 1 second for either documents, especially when the world is operating at minimum 800mhz CPU (again, another fact pulled out from my ass). We’re at a tipping point where we can sacrifice efficiency for better design and online features.
But I do want to learn and I’m still learning CSS whenever I can because I admit I suck at it, and because some random jerk online said I just didn’t get it and that I should read a book. Unfortunately, the more I learn (and actually understand it), the angrier I get at web in general. If tables is throwing back developers back to the 90′s, CSS is throwing designers back 400 years requiring us to forge and install every individual letter on the press machine. So long typography, so long bezier curves and opacity layering; hack away image corners with photoshop and frankenstein it together with a div container of similar background-color and border, or good luck making z-index position the same everywhere (but this is more of a browser rant than CSS). I only wish the CSS community would meet the designers somewhere in the middle and hear us for standardization and features, instead of being dismissive with, “you just don’t get it,” or “go read a book.” Even painters go out and just buy the paints they need instead of making their own from scratch. I go out there and buy a CSS book and it turns out it’s even less than a cookbook – it’s a book telling you how to raise your own hens and ferment your own cheese to make Omelette du Fromage. I mean, seriously? It’s been 10 years since CSS came out and we’re still at that stage? I remember 10 years ago just being in awe watching CNET streaming video on realmedia at some awful less-than-webcam resolution, and these days we can watch entire movies in 480p on Hulu. Last time I played with CSS was in 2006, and it’s still the same build-a-loghouse-with-an-awl approach as today. I just can’t get my head around the fact that the Web/ HTML is here, and CSS is also somewhat here, and there’s not a single desktop publishing software to allow designers to concentrate on the aspect of *designing*, instead of writing “efficient” code or researching obscure hacks for basic layout. This, I predict, will be the holy grail of web design: when regular artists can tame CSS with simple and intuitive tools. And there are many artists out there, the ones formally trained in art at 4-year Universities, who are equally frustrated at CSS. I haven’t seen or met many developers coming from the graphic design/ art side, but an overwhelming majoring coming from coding or CS majors. Yes, they eat CSS for breakfast, but only few are talented and vice-versa. And between coders/developers/programmers vs. artists, both camps have too large of egos to admit their own shortcomings into each other’s areas.
I’ll just leave it with this, from Seth Godin:
Evolution of every medium
1. Technicians who invented it, run it
2. Technicians with taste, leverage it
3. Artists take over from the technicians
4. MBAs take over from the artists
5. Bureaucrats drive the medium to banality
(I’m afraid it’ll take another 10 years just to reach step 3, or better/worse, it’s already been skipped.)
CSS is not as easy as the fan boys say it is. To be precise, CSS layouts are not easy at all. CSS layout design is more banal than anything Bill Gates could have come up with.
Spot on article. Just took 5 minutes to move away from the css design i did and googled for “CSS sucks” ended up on this blog.
10 years experience in the industry, i can honestly say that CSS is a piece of shit. It is fine if you are a mediocre/simple designer who is doing a crappy 1 div layout with a left aligned logo and simple elements below.
Move into complex sites for a moment. Try and layout a complex page with content in Photoshop. Now expect to multiply time taken to do that by a factor of 100 (minimum) to lay out the same page in CSS/HTML. A page that contains multiple thumbnails, images, columns, paragraphs, lists and images wrapped around said columns.
You are likely to spend copious amounts of time searching for resolutions on why X doesnt wrap around Y as expected and then the fun starts – browser hacks.
Please dont tell me how I do not know enough about CSS and how everything magically becomes clear once you learn enough. No it bloody does not. You will always keep going back to the web to find resolutions on simple problems you encounter while laying stuff out. I did Assembly and a plethora of others. They are programming languages. They do what you expect them to do, bar errors which you make whilst programming. You cannot compare them to CSS. Imagine doing your C program then having 3 different machines produce 3 different outputs whilst you scratch your head as to why? (dont nitpick and suggest different architectures please)
My latest problem is an unordered list whose bullet points wrap OVER a left floated image. U know what most of the resolutions on the web suggest? Float the image to the right instead! WTF?!?!?! This is css! Is it not? Do what you want no limits do anything its all great look at all the great sites out there. Wrap it to the right to resolve?!?!? Oh my god. Conform and break your design in order for it to work. Great sites whose designers spent copious amounts of time implementing hacks to make sure sites look the same across 3 major browsers. Its all crap and i hate it.
Simple fact – increase the complexity things start braking down. Thats why we are where we are, and possibly with css3/4/5/6 things will get worse. Add another layer of complexity on an already broken platform I love it. Microsoft Blue screen of death here we come!
Put all your CSS into 1 stylesheet to save bandwidth bull. Then spend next month constantly going up and down a massive list of styles to modify things in order for them to work. Thank god for firebug. Some people still do without, end up wasting even more time going through those massive seas of styles looking for things, fixing, amending for a hundredth time until it works “reasonably” well.
When i draw a box in photoshop in the top left corner, then export as jpeg and open on a different machine i do not find my box 200px down the page because the JPG decoder decided thats where it should sit now, because the variable x of the pixel y is not truly grey in color. I know, bad comparison but hey, its how css works!
Rant over. Those who suggest i go back to tables should take a shotgun and point it into their mouth. I hate CSS. Always did. I have a knack for figuring out what works and what doesnt. I tried. I really did. 5 years of CSS still the same bloody problems. I hate it aaaaaaaaaargh! Now i have to go back to my design and break things in order to conform. Im sure there are those out there who would say: “Why you crazy, you dont know enough ignorant grasshopper, you only need to spend next 10 years wading through books about CSS and its architecture in order to understand.” What is there to fucking understand? It should be clear from the code, we shouldnt have 1 milion gotchas and “if i fart on my mouse from the left at an angle of 10 degrees you will see IE move your DIV box to the right by 5 pixels”
Enough, have to stop myself writing this crap. Hey ho, all the best in future designs people. Much love. Rasta.
All you’ve done there is prove how little you know about CSS.
Seems to be a pretty consistent theme with all the people who agree with this post. That they suck at CSS…
You’re another b!+ch@$$ fanboi.. “That they suck at CSS…” Perhaps the reverse is true of the zealots – They Suck at DESIGN…
SVG will be supported in IE9. With some good tools, this might be the end of CSS.
The whole CSS vs tables is a crock; it really does seem to me as if the dogmatic advocacy of table-less/ divs only design was designed to make internet content creation less accessible to the general public, as well as articially differentiate “real” designers from “bad” ones. So yes, as some have pointed out, it’s a form of elitism.
Both tables and divs violate the principle of separation of content from style. The fan boys are hypocrites.
I just love these discussions about CSS. Self claimed experts (like mrmontoya) who make SIMPLE websites think CSS is the Bees Knees. Those of us with many years in the business (as in using the internet to generate commerce) know that css sucks bigtime. We now employ designers AND web developers – and guess where the hold up is for every project: yep the web developers.
CSS should be scrapped.
Maybe we should employ Flash Designers to do all the jobs (then we’ll really be over-a-barrel).
And how many times have you started to read a webpage, only to have it all jump around and rearrange, because of the stupid css crap, eh?
(for those who say never/rarely – you dont qualify to add comments here).
montoya makes a living teaching css, sneaky little… offcourse he wants us to belive it’s made of angel dust. go away.
By far the best post here is by Daron.
And the best one liner is by greg – “Just because you ‘can’ make a site work with CSS doesn’t make it a good tool”
I dont think we should banish css to well (not that we can) but little steps such as rounded corners (not even atialiased… making the whole feature pointless) are not making things any better. we need big leaps – grid systems, design sematics i.e
div .adiv {
snap-top-border: .anotherdiv:bottom-border;
}
CSS is like the new jesus, bad mouth it and you’ve got it comin to ya! Give me a break!
I totally agree with this article, and I’ve been building web sites for over 10 years now, have a B.S. in Comp. Sci, and worked in web development for 2 years. CSS is frustrating because it’s not intuitive, doesn’t work the same across browsers, and oftentimes just plain doesn’t work as intended.
As a programmer of many years, I’ve just began using HTML and CSS, having avoided it.
Greg’s initial points are spot on. He absolutely nails its problems and until more people see things his way, CSS will continue to evolve as a knot.
I think Greg understands CSS more profoundly than the people that are commenting in its favour. He sees things more clearly. I expect Greg is far more intelligent than average and gets frustrated at the world.
From the comments, I get the sense that many web designers have never used a proper language and don’t see the mathematical beauty in concepts such as type-theory.
Recent I began using WPF and XAML. While its one Hell of a complicated object model, it is water-tight. It’s layout system is almost perfect and based on the most simple basic constructs. It is symptomatic of a design made with the fortune of hindsight. It’s also interesting to note that it is strongly-typed.
If it compiles, it will work and if it doesn’t work, it IS your fault. Armed with these unwaivering facts, means there is never a “trick” to get something to work, it is completely deterministic. You never surf the web to work out why it doesn’t behave as expected, instead you draw a diagram and work it out.
What’s more, it is design-oriented and yet the data and logic are separate.
There are things that it cannot do compared to HTML; screen-readers are no good, and you can’t increase font sizes, but I think solving these problems in HTML are what slows its progress.
Why should the language of the design be charged with responsibility of such fringe use-cases to its crucifying detriment?
The problems are being solved in the wrong place. Increasing text size for readability for a small subset of users, just ZOOM THE SCREEN! We don’t print newspaper articles in three different sizes and make them weigh 2kgs and 6 feet wide, instead the user uses a magnifying glass! The problem is extrinsic.
It seems some people can’t think outside of their niche, like the commentators wondering whether the alternative is to go back to “tables”. I guess it comes down to IQ. Cars are using up the Earth’s resources, oooh what about we use motorbikes?
Anyway, great work Greg. CSS 3.0 comes out soon. The committee (oh lord) have basically just added a load of stuff and most of that now has been implemented in proprietary form by each impatient browser vendor so each CSS rule will need to carry 4 versions of the same thing for the next decade. Great. Amazing stuff. [applause]
Luke
Totally agree. I think these guys that are happy with CSS don’t know jack shit about anything else and have no clue as to what programming is and how code is supposed to work.
You may be able to, write complex web apps with ease, write join statements with 4-5 tables in half sleep, You know all CSS properties. but all that is kids stuff you know even justin bieber can do it.
BUT, if you are a real web-programmer then you should know all the CSS hacks. otherwise you are stupid and its all your fault.
Writing code is your responsibility, making sure it work in the right fashion is the job of the guys that make the browser. It can either be right or wrong. It can’t be right for one browser and not right for another.
To every problem there are 2-3 different ugly hacks or javascripts fixing the issue. Solutions that don’t make any sense.
Screw tables man nobody cares. What currently exists is screwed up and someone needs to do something about it.
Never seen one topic have a four year thread before! Just wanted to say if one more seasoned professional turns around to me and says tables are slow to render I’ll stick a CSS Bible up his arse. Tables render a whole lot quicker CSS, especially when you see some of the rats nests that are being churned out by CMS systems like WordPress and Joomla these days.
Several years later CSS still sucks. In fact it’s so bad that there are pre-compilers for CSS to try to address some of the fundamental issues I outlined. Things like this: http://sass-lang.com wouldn’t need to exist if CSS wasn’t so bad.
Simple point, A good technology should work consistently. You should be learning the technology and not fucking workarounds. If you are spending more time learning workarounds than the actual technology, then i think its time someone woke up and smelt the potty. something is broken somewhere and it sure as hell is not me. We’ll learn all there is to learn, just make the damn thing consistent.
It took me a couple of weeks to learn all the selectors and properties of CSS. Its been 5 years and I still keep learning HACKS everyday. every time something doesn’t work, you spend hours(=money) on it you find because some browser companies didn’t care enough YOU have to waste your valuable time.
I have learnt so much and it let me do so many things with PHP, javascript and MySQL — but, css is totally different animal. The time you spend on it and the returns just don’t match. Point is, this is supposed to be simple and supposed to work everywhere. I think its a colossal waste of time getting CSS to work consistently.
All you academics out there, if you valued your time you would want something better and more consistent.
If internet explorer was a person living somewhere, I swear to god it would be SOooo sweet to give him a long and very painful cruel death *i wish*.
Lets say for the sake of my argument that all browsers implement
the rendering of CSS perfectly, since it might actually happen some day.
That fact still would not stop the popularity of CSS
pre-compiliers and of css grid systems like blueprint and 960.
Their popularity tells you CSS is lacking something pretty
fundamental.
In my opinion the “cascade” is a failed experiment. It makes for
very messy code when the complexity increases. In theory its
clever, but in practice its a mess. Once you start cascading, the
definition of a single css element is scattered all over the
place. So people just skip it and the redundancy in their code
grows and grows.
Variables could have really helped. Would they have hurt? I
don’t think so, but the standards committee didn’t want to
violate the purity if their markup vision.
But the biggest abomination is the “CSS box model”. This was
created in a fantasy universe where web pages are only made of
lovely streams of text flowly happily around pretty images in
wildly resizing browsers and if you need any structure you can
just simply float block elements up to the right and left.
When they guilted us into abandoning the rigid layouts of tables
they should have implemented a “grid model” along with the box
model. Because they didn’t, for whatever misguided reason,
thousands/millions of man hours have been senselessly wasted on
this crap, especially when building web pages more complicated
than your average blog. Not only that, but a grid system would
have been easier for browsers to implement and given us more
consistent behavior!
Oh, and “if you don’t like CSS than you don’t understand it” is
not really an argument. Sorry, but when I hear that, it sounds
no different than somebody saying “if you don’t like scientology
than you don’t really understand it.”
@KMS: They are actually CSS variables. Check out newer specs. I’m not using them though.
I love CSS most of the time, but when it comes to complex layout it’s a disaster. It’s partly the standards fault, and partly the specific browsers fault.
3 column website with table:
123
Make each cell 33% and you’re gold. It scales well, looks great in every browser.
Now show me the same 3 column.. or 4 or 5 column done SIMPLY in css.
You can’t do it simply, there is no such thing. It’s always a hassle.
Now try and create a 2 column website with a fixed width left column for navigation that is 100% of the page height, and a variable width right content column that expands to fill the rest of the page.
Should be easy, right? It’s not. Unless you know the quirks, the bugs, the hacks and work arounds, you won’t simply write a quick bit of code and be done with it.
Don’t get me wrong, I don’t use tables 99.9% of the time. I refuse. I do however believe that this blog post is in some respects correct, because CSS should make it useable, accessible, and should NOT add a ton of work and complexity to the design while allowing for a finished product that is perfect.
I got bitten by the CSS-implementation issues with my blog. I had a CSS-only, no-images-whatsoever custom Sandbox theme for a long time. After hours of work and tweaking, I had gotten it to be more-or-less perfect, except for some annoying alignment issues between browsers. It looked absolutely perfect in Firefox 3 or higher if you didn’t zoom the page, but there were misalignments in Opera and Chrom{e|ium} that marred the appearance at best — and partially hid navigation links at worst!
I’ve given up. I’m sticking with the Titan theme, and only using CSS to tweak it. Because that’s all I can count on CSS implementations for.
Am I the only one who notices that most of the best open-standard stuff was developed behind closed doors and THEN released?
I’ve just spent ten hours trying to make a CSS site work as it should. I got there in the end. I’m not stupid and I’m not incompetent. It was a few design issues that needed to be addressed. A mere hour’s work using a design tool like photoshop. With the complexities of CSS and the lack of decent design tools capable of working with CSS from the designer’s perspective has made this simple job take all night. CSS is so immature that it is unusable for anyone but a coder. My clients would laugh when I tell them why it takes so long to restyle a few on-screen elements.
Ten hours seems to be the operative phrase here.
Coincidentally, that’s the amount of time I’ve estimated that I’ve put in – so far – trying to get a goddam simple layout to work using CSS only.
A layout that would’ve taken me minutes using tables.
I was working on putting together a new little site and thought (since I’ve heard pretty consistently that CSS is better than tables, tables are horrible, blah, blah, blah) that I would update my skills (I already use CSS quite a bit of course, but haven’t attempted to go completely without tables before) and enter the 21st century and “do things right.”
Imagine my surprise to discover that there just isn’t a remotely simple way to make a stunningly simple site work, across all the major browsers, using CSS only.
I’ve even used what is probably the most sophisticated CSS framework out there – YAML – to try and get past the unbelievable number of bugs that are out there to screw up your layout. The author has apparently devoted the past 5 years of his life to getting this thing right. He catalogs more than a dozen bugs in IE alone, and he’s hacked around all of them. The details are in his 139-page manual on how to use his prewritten CSS code. He promises that your site will look the same in every browser known to man.
Only it doesn’t. It still looks wrong in IE, and I’ve wasted hours of my life trying fruitlessly to figure out why.
And that’s only the first problem of three on my simple layout page. I have no idea how many more hours it will take me to solve it if I continue on this fruitless quest, and can’t begin to imagine how many hours it will take to address the second one.
Well, I give up. I understand that there are advantages to using CSS for a lot of things. This basic layout isn’t one of them. I’m using a table. And yes, in spite of having made it through an extremely technical university education (including advanced mathematics and advanced physics) with honors in 2-1/2 years, I will confess to being stupid. I’ve been stupid for wasting so much of my time and life on a technology that’s simply unsuitable for what I was trying to use it for: a very basic, simple page layout.
CSS totally sucks, not because of anything to do with the specifications. but the implementation across browsers.
For years I thought I knew CSS because I knew all the CSS tags and knew what they meant. How wrong I was.
You know what? Learning CSS how to use the selectors and tags is just the very basic start of CSS – you can do it in a week.
The true learning of CSS is its implementation in the browsers.
Especially in IE — You have to study it. Like deep passionate study.
–Beating the beast–
You’ll need to invest at least 2-3 times the amount of time you spend on studying CSS into studying IE and its implementation of CSS, the bugs – workarounds and hacks. If you are of the thinking that you will get it right in all the other browsers and then fix IE – or – I will learn about that bug when I need to learn about that bug — haha, you are so dead.
I have more appreciation for font-end developers after realizing that they have to do the tango, jazz and hip-hop at the same time to get things right in all the browsers.
The way to approach this is for 2-3 weeks probably an hour or couple of hours a day. Actively study IE bugs and the fixes for it. Not starting from IE 7 and up but IE6 and up.
One revelation for me was Doctypes – and why you should be using the strict mode + the fact that, that should be the first in your html(else it triggers the quirks mode — which is basically IE5.5(WTF!?!!))
There is a list of features that are only partially supported by IE in some versions and some are not supported. eg. IE takes width and height as min-width and min-height — min-width and min-height are not supported at all.
I know you can keep having discussions and cribbing sessions about standards and what is not being followed. but, in the real world you’re a guy/girl sitting in front of a PC and MS is a HUGE corporation that has created crap that will last for the next X number of years.
My advice is this. Don’t think font-end design is easy. Not because of the specifications or anything but because of the IE complications. Facts are facts. sit down and cry one evening and get over it. The harsh reality is if you have/want to learn front-end coding — you have to know IE inside out. The next time you encounter a problem — the difference will be, you will not be cursing at your monitor but you will know..
“This is the z-index bug, this is happening because of the box model problem, this is because of the double-margin, this is because of x reason…”
When you start to understand what the problem is, it is a very good start to reaching a quick solution.
“If you know yourself and you know your enemy, you need not fear the result of a hundred battles.” – Sun Tzu
So! quit the cribbing get learning. It may not seem/be right, but, that how it is – accept it. and make yourself stronger by learning more and more about how this p*ice of s*hit works!
God bless and peace!
There are too many other things to do with my time that are more valuable to learn than this piece of work. I’ll pass.
Newsflash: Google is not W3C compliant. View their source.
I’m convinced that CSS sucks because it was made by computer programmers. I’m a programmer myself so I know what I’m talking about.
Just for the sake of illustration, the average person keeps their keys on the dresser, an electric screwdriver in a drawer, and their tux in the back of a closet. We organize things in terms of what we use most often. A good programmer, on the other hand, would keep the keys and screwdriver in a drawer marked, “Handheld tools, Metal” and the tux in a drawer next to it marked, “Clothing, Formal”. CSS works the same way. It takes just as much time to make an extremely elaborate, bizarre design as it does to make a simple one because every task is given the same priority.
If the makers of CSS would just acknowledge the fact that people read from left to right, then top to bottom, most websites in the world could be written in a matter of seconds. Only the weird, complicated ones would be weird and complicated to make, which is exactly how it should be.
It has nothing to do with computer programming. I’m a programmer, and I hate CSS. That’s a programmer’s perspective. I’m on record for saying that programmers hate CSS. CSS does not allow parameters. All programming languages do. CSS is not a programming language, and it was never designed to be one, and I don’t expect it to be. But I expect any technology to be sane. CSS is not.
Want to know what CSS is for? It was designed for intellectuals. Intellectuals put ideas before people. CSS is no exception. ”Design by committee” is right. That’s exactly what it is.
I found this article because I googled “CSS sucks”.
It is increasingly obvious that browsers have the CPU and bandwidth available now to render user interfaces that are almost to the standard of dedicated stand alone apps – and yet the programmer is forced to go through ludicrous and byzantine steps to lay out the widgets in a manner that work reliably EVEN IF we decide in advance to throw out half the purported advantage of CSS (variable width variable size canvases) and design our web app interfaces to an assumed minimum pixel width canvas.
Look at the CSS grid layout solutions like 960 grid. They work for layout because they hide all the ridiculous float/absolute/relative/padding/border cruft.
A new CSS needs to be created that offers basic layouts like typesetting grid layouts right there at the surface.
If that had been done at the start with HTML4, then the facebook/twitter type web interface would be entry level minimum for most web pages, instead of the most advanced.
Another cosign for CSS sucks from a serious OOP developer. CSS is flat-out terrible for the job it’s used for. It has nothing to do with “not knowing enough”…I can lecture you for days on Computer Science and Software Engineering topics that are 1000x harder than CSS. It has nothing to do with learning, and CSS is not “hard”, it’s just a terribly designed tool for its purpose.
Why? Because every other thing you need to do in CSS involves having to use some nonsensical hack. It’s the hackiest code you’ll ever write. And I’m not even talking about browser-compatibilty. Almost every interesting layout is becomes a hackfest. Make a div for no reason, clear this, float that. It’s unintuitive, not modular or extensible, code-repetitive, and brittle. It’s a nightmare.
So CSS sucks, we all seem to agree
but does anyone have an alternative? A promising new direction? Any sign of a better future?
The alternative:
1. Some features need to be there, so add them {float: bottom; percentage: content; text-alignment-y: center; }
2. Deprecate all hacks. If a browser suddenly adds hidden padding when the border is zero, that’s a browser bug and it needs to be fixed, period.
3. Add new doctype: . Browsers may only run in CSS quirks mode if that doctype is not supplied. Otherwise, they must render CSS according to specs without exceptions. This will wean developers off of bug dependency.
I’m like some of the commentators a programmer myself. I’m 35 and have had programming as a hobby since I was 13 and learned AmigaBASIC and AMOS on my old Amiga 500.
I advanced to 68k Assembly language and loved it. Later, in early 2000 I learned C, x86 Assembly, and have recently played with own kernel code (have frozen it due to lack of time atm).
In addition to those I also know html, javascript, php, and recently I learned python which I found unintuitive during the first few days, but quickly overcame that issue and find it a pretty nice language actually.
Regarding CSS, well I have tried it from time to time during X amount of years, and I can’t say much except that the “designers” of it must be smoking something.
So let me like most others cherish CSS:
I hate CSS!
(That’s a shame since I love open standards and am a supporter of free open source licenses)
Wow, my thoughts exactly! You and I have similar interests. I haven’t hacked a kernel yet but I would like to. And of all the web technologies, not is as frustrating as CSS. When I design my own website, I’ll just give it a plain style and ignore CSS entirely. A site doesn’t have to be stylish to be informative, and whenever I have come across an informative website, I’ll read it if it contains plain text.
I’ve been designing websites for 12 years. I specialize in high-traffic newsmagazine sites, but I’ve worked on just about every other type of site except pornography.
Although I’ve used CSS in my designs since 2000, I only started working with CSS for layout four years ago.
This year, 95% of my output has been standards-compliant CSS. What’s more, I recently finished a site redesign for a rather large, high-traffic site for a major TV station.
I can safely say that I’m no longer a novice. Yet with all my new experience I am more convinced now than ever that CSS TOTALLY, COMPLETELY, TOTALLY-TOTALLY SUCKS!
Those who disagree simply don’t work on sites with significant traffic. I mean, to make a large site backward compatible AND work in new junk like IE9 you’re looking at weeks or months of testing and trying out new approaches to accomplish something half as stable as a 1997 table.
The backbreaking gymnastics we go through to accomplish in CSS what could be done in one swift motion with tables is mind-boggling.
And don’t tell me CSS is semantically superior… that tables are for data yadda yadda. A table is a grid, whereas H3 tags are header tags, not some crazy-assed toolbar. Just as list item tags are not navigation.
I cannot believe that this vastly inferior approach to communication design became “standard.” I regret not digging my heels in more a few years ago and sticking to my guns about tables. CSS for layout is so broken that I can’t imagine it continuing for much longer, and thus we’ll all lament the wasted effort we invested in this lame duck programming language.
I have to agree with you. I disagree with Greg about how the cascade idea is bad. I like the concept itself. What I hate is the inconsistency with the way it is rendered and the essential, absolutely vital features need to be there but aren’t (such as float: bottom). The lack of these features force designers to use workarounds that actually militate against the very concept. Using Javascript hacks and spacer gifs is not separation of content from style at all. In fact, it is precisely what CSS tries to avoid without success. Using div elements to implement style intentions that can’t be done more simply is, again, not separation, since divs are supposed to enclose content, not style.
Experienced developers complain about browser inconsistencies. I’ve already noticed a few having to do with default, unoverridable button padding. But even if you pick a browser and stick to it, CSS is still very unpredictable. I have a math site I am trying to develop for a web design course, and I have used the hack of cascading the height of a form all the way up to the html element itself. The body contains a form which contains a paragraph encasing controls. My current interim solution is to set a min-height for the p and 100% for the containers. In all major browsers, this causes the p {min-height: 500px;} definition to be completely ignored. But if I change html {height: 100%; } to html {min-height: 100% }, all the sudden the webpage collapses. My goal is to get the form to fill the page without overflowing the margins I have set for the body element. Also, I want the p to be anchored to the bottom of the page. I have used absolute position as that hack, and in some variations, this will cause the p to be taken out of the form altogether. The interim solution requires assuming that all users have room for at least 600px for the webpage, which may not be quite enough for some laptops. If I could fill the page exactly as I wanted it, no such assumptions would have to be made.
So you see, without the difficult hacks that only extremely experienced developers know, CSS forces you to make assumptions about the user’s environment, which both Greg and his detractors have to agree is poor design. It is not Greg who fails to understand how the web works. It is the designers of the CSS standard themselves. With CSS, it is difficult to develop an interface that has a precise look providing that some assumptions are made. That is useful for some purposes, but it is not exactly how web is designed. I understand, and for that I am willing to put up with some limitations. With CSS, it is also difficult to develop an interface that is flexible, not exact the pixel, makes no assumptions and renders reasonably across all platforms. Expanding an element to fit a container should not be difficult to do, whether the container is the body, the html, or the window itself. Even iPhones should render that part right. In short, with CSS it is extremely difficult to do anything beyond the baby basics, whether it is reasonable given the nature of the web or not.
I agree that css sucks to a degree, and it’s getting worse. While css3 is bringing exciting new features, it really gets to me that browser makers are choosing to implement their own property syntax like -o-background-size, -webkit-border-radius, -moz-border-radius, etc. Why can’t they all just read the same damn property name?
Can’t blame the browser makers for implementing tags that are predictable when the standard ones are not.
This blog entry, and the sheer, volume and quality of comments against css, scream out one thing very clearly.
Hello, something’s not right!
Thanks for your posting here, i am studying about web design so i think your blog is very useful for me
Pingback: CSS is a solution for HTML layouts but it not a good solution | Rhyous
everyone should start SEO this page for the keyword “CSS” not “CSS Sucks”. This page should be the first to appear in Google as long as there is “css” in the keyword.
Like this thread, I dont know how many times I get into arguements about css. I find it useful for some things, very little things, but as far as design and sticking true to it, gotta say I love html, and always had…Dersk.
Agree! css is not the easiest to learn and does not provide all the required features to create nice layouts. People are stuck because most want to use css as it can result in clean HTML. Most css layouts are “hacks”. There are zillions of such examples on the web. Most of the css layouts in the end depend on pixel based positioning to circumvent some of the pitfalls. I am not saying that layouts using html tables are the best, but more often than not tables work better and easier than css. I personally don’t like use table to create layouts because it is not meant for that purpose. Someone can argue with a lot of reasons why to use css as it is and grow slowly so that more people will accommodate the changes and all that. But at least when we go to HTML-5 and CSS3 some of these issues should have been visited as a fresh start.
After manny years (old days) of using tables to get the website layout the way I wanted, I wanted to modernize. So I stated to learn div with css positioning. (w3c schools). It is a huge pain to create layouts. The absolute worst is aligning things in the center. Only aligning text is made “easy” but also then I have to repeat it all the time again. Aligning complete sections is an absolute disaster. I am gonna fall back on “depricated” commands and see how long it takes before webbrowser cant show it anymore. A big big big thumbs down for the w3c standard. Making it simply unneeded more complicated by depriocating some commands.