Grow your CSS skills. Land your dream job.

Hatin’ on Web Tech

Published by Chris Coyier

This article "Shadow DOM" by Steven Wittens is only vaguely about the Shadow DOM. It's mostly about how awful everything is. HTML sucks, CSS sucks, the DOM sucks, SVG sucks, MathML sucks... I don't want to pick on Steven. He is, without a doubt, many (many) times smarter than I am and has well articulated points. Let's go wider.

I see this regularly from people who have been at this a long time and are very smart. They develop a dislike of the systems we have to work with. They see all the warts, mistakes, and especially what they see as deep systemic flaws or historical turns down the wrong path. This is all made worse as we traipse forwards, building upon these perceived cracks in the foundation.

They always have very good points. It's hard to do anything but nod, because they are right, the web does some whacky stuff and has failed us in many ways. Wouldn't it be wonderful if we could throw it all away and work with some new perfectly designed system that meets everyone's modern needs. Sure, of course it would. Do you want to live in your town or a utopian village? I'll take utopia.

Obligatory follow up sentence: but utopia doesn't exist!

There is no alternate layout language for the web. There is no alternative way to deliver accessible content. There is no better replacements vying for the lead here. That's because that's a monumental task. Any contender would need to:

  1. Develop a new system for everything is empirically better.
  2. Get a world of developers to agree that this new system is better and demand it.
  3. Get standards bodies (or something like it) to support it so there is oversight and an independent source of implementation information.
  4. Get all browsers to agree and implement it perfectly.

lol right.

All those things are so insurmountably difficult that it's no wonder it is rarely even attempted. I'd argue that #1 is the hardest. There are plenty of flaws with our current system, but imagine starting from scratch with something this complex.

I feel like what is going on now in web tech is that these problems are trying to be solved on a smaller scale.

It sure is a bummer HTML is our content, but also responsible for semantics, right? It would be nice to do whatever we wanted in there and not worry if we were hurting semantics. Hopefully Shadow DOM can help with that. Maybe it can also help with CSS being too over-arching when you don't want it to be.

Maybe flexbox, grid layout, and regions can be the truly powerful and intuitive layout system we've always needed, without the accessibility issues inherent to tables.

SVG isn't perfect, but maybe it's still better than using a raster image format for a vector image? Maybe SVG has the potential to help with icon systems on sites in a better way? Maybe we can start using a new image format that increasingly works with modern browsers.

Maybe preprocessors can be a solution to ease authoring of these complex languages and reduce complexity?

Perhaps we can extend the web right now how we might want to see it, using existing tech.

These things are proving that we can make the web better. We can do it slowly. We can do it with the help of standards bodies. We can educate developers and change their thinking over time. We can use the browsers already out there, so we don't need to fight public behavior.

I think that sounds nice. And I don't think we have much of a choice.

Comments

  1. If somebody thinks they can do better, then they havent got any idea about working in the real world… Its like people dont like jquery or another framework… sire, if you want something exactly for your own needs then do it from scratch but you will finish in the same crap than other becasue the same reasons and same logic… logic is logic. world is the better it can be having in count the amount of stupid assholes its have in it. we need to thank the internet for existing.

    • I’d say only “stupid assholes” believe all JS ends up as jQuery anyway. It would take a tremendously “stupid asshole” to say Wittens hasn’t “got any idea about working in the real world”, or that progression in our industry is not possible because you believe nobody can do better than you.

  2. efwwefwef
    Permalink to comment#

    well, if it wasn’t for the shortcomings of the current web technologies we would be out of a job by now.

    • Permalink to comment#

      I wish I could ride my sofa to work everyday, and when I got off my sofa and stepped into a mud puddle it was chocolate milk. I would go to work and hit one button then turn around and go back to my mansion and take a dip in my swimming pool filled with Guiness Draught. Yeah, life is far from perfect…..

    • Jerric
      Permalink to comment#

      Well said ;)

  3. Permalink to comment#

    I’ve been at this a long time (I’m not sure about the very smart part).

    To me, the web and the way it’s implemented has always seemed very convoluted. Not good when you’re a perfectionist. However, I must admit that as I get older I find myself taking the stance “if it gets the job done and looks OK, then it’ll do.” That’s not something I would have done 12 years ago.

    But as Ivan de la Jara said above, you can re-invent the wheel and still end up with the same old crap at the end of it. Sometimes I do envy my colleagues who work in programming (real programming, not PHP) and graphic design (print medium) who can do a technically perfect job without jumping through a million and one hoops and making a million and one compromises because we have to support browser X or there isn’t a better alternative to framework Y.

    • Permalink to comment#

      This sums up my sentiment as well. Sure it’s rewarding when a site is completed and you can feel good about overcoming some obstacles, although it’s a long process and its difficult for others to notice the work that goes into forming the design.

      I too often think of this as well “and graphic design (print medium) who can do a technically perfect job without jumping through a million and one hoops and making a million and one compromises”. Must be nice to get to a point where you can feel as though you’ve perfected your ability to excel at a given trade. Not saying that there aren’t experts in the field of web design/development, but the web encompasses so many different skill-sets that it’s rare to feel as though you’re a master at it all.

      I guess the goal or the standard that most people try to meet is, like you said, “if it gets the job done and looks OK, then it’ll do”. However, it is nice to dream of scenario where our efforts could be focused on creating appealing looking websites and not the struggle to make things compatible for all browsers, devices, operating systems and screen sizes.

  4. Robert
    Permalink to comment#

    The fact that these smart people are (still) not heard (by W3C, WhatWG, etc), proves that the new standards bodies you mention as help (in your conclusion) will not make the difference you/the smarts/we crave.
    I’m whinging at something or another with all tech I use, almost every working day. Sometimes I even wish my old work as a programmer (compiled languages) back. But then I quickly get on with my work because I enjoy and love it.

    We will always need (in-house) libraries and (in-house) frameworks to negate tech issues and speed up design and development.
    My biggest gripe is always the sloooooooooow implementation of standards by browser vendors. And ultimately they each have their own incarnation of a standard. (Your #4.)
    So even if we had a different system, new standards, and new standards bodies, we will possibly have to wait years for them to materialise (in different incarnations; it’s like urine marking. no one is going to change the nature of the beast.)

  5. Neal G
    Permalink to comment#

    “This is why absolute positioning is a performance win for mobile: it avoids creating invisible dynamic constraints between things that rarely change.”

    He’s apparently never built a responsive site before.

  6. Sandy
    Permalink to comment#

    I couldn’t agree more with Stephen Wittens. Maybe if enough respected smart people wrote critiques like Stephens, change might be possible. I know people will groan if I mention Microsofts xaml stack as a fairly well designed declarative markup language for ui. But it is extensible and backed by an object model and has things similar to shadow dom built into it. Visual tree vs rendering tree, data binding templates etc. all of these elements form a cohesive object model. Where do you think the css grid came from. If you close your eyes it is almost identical to the new css spec. The nice thing is that it can render consistently across platform. Though as Rob Eisenberg pointed out it is not without flaws. It seems we are getting closer with the web stack though css being the biggest pia.

  7. Steven talked about the Facebook react which I’ve never used but from what I see on their page maybe because it’s too late in the night and I’m all so sleepy, I can’t imagine leaving simple mark-up and CSS for that(because it seems complicated). These new web technologies are good but they don’t have to overwrite the existing ones as they still make our lives a lot easier

  8. Hater
    Permalink to comment#

    Haters of haters are very annoying too.

  9. Permalink to comment#

    I think preprocessors are a great cross over here. Could a browser be developed to directly read Haml or Sass? Then over the years we could faze out HTML and CSS.

    Unfortunately I’m not techy enough to understand if that’s a good idea or not.

  10. olivvv
    Permalink to comment#

    I’m sure I’ll find ways to use these new techs in a manner that will make them feel too limited.

  11. Well, the world is not a perfect place. Now…. where were we?

  12. Most often so called “smart” people have unrealistic expectations and are not happy with mediocre state of things. Speaking of experience as I have IQ 145 and I never saw it as advantage much because I used to overcomplicate things too. Not worth it.

    And as guys above mentioned: from real production over the years I too learnt that when you use something that gets the job done = looks good, works ok = does not break. Done. Move on. Next job is waiting.

    Steven has a good point but is, well, naive.

  13. Jesse Cooper
    Permalink to comment#

    The web and technology will never be perfect, and thats the way I like it. Its the lack of support for the things we try to do, or the UI designer making something that is out side the scope of the standards that drives creativity and innovation to use the tools we have to make something that will hold the world in a state of wow, and to make the other developers ask how did they do that? If the development world was perfect that would be wonderful to but I could see things becoming stale, boring, and repetitive.

  14. David
    Permalink to comment#

    Great write up, Chris. This type of thinking seems prevalent among many “smart” types in web/software development. Often, it boils down to, “it’s not perfect, lets blow it up and start all over”. More often than not, this isn’t the best course of action.

  15. Sad and Sadder
    Permalink to comment#

    It´s not about “smart” guys and thing done to “look ok”. It´s about a coder who is diving into DOM depts and dreaming about a better place. It´s about people not getting the point and talking about how they do their work nowadays ( like stephen). It´s about respect people who dream because they push the web. The rest of us just “do our jobs done”.

    • Permalink to comment#

      I think this a good way to view the article. I don’t believe Stephen’s message seeking for a better/more semantic way of developing websites is the result of someone being ‘overly optimistic’ or ‘naive’. He’s dissecting the current state of the web and is pointing out areas of improvement while trying to point out the flaws in the way we approach design/development today.

      The issue is people see this as weakness: “Look at this disgruntled person who’s fed up with the web, suck it up and move on, there are solutions to the problems mentioned and the web is growing/improving. Also it will never be perfect so stop whining”.

      I think Stephen makes a lot of good points (as others have acknowledged) and it’s important to look back on the history of HTML/CSS and realize what the intended purpose of these languages were in relation to where they stand today. This is especially true as the web moves forward and we continue to introduce new methods of development (the use of pre-processors etc).

      I do agree with and respect Chris’ view on this as well. Chris doesn’t focus on the web’s shortcomings and seeks to find solutions rather than dwelling on what could be. This i.m.o is Chris’ bread and butter, he adapts to the web and moves forward and is stronger because of it. This is a great attitude to have but it also doesn’t invalidate what Stephen is saying when he points out how certain languages have ‘failed’ us and have become more convoluted and complex overtime, often unnecessarily so.

      The other issue is people see Stephen’s article and say “Ok then, what’s your solution then to these problems?”. Well the article points out current flaws in the web as he sees it and even mentions approaches he has taken to overcome some of these obstacles in the meantime (using Angular etc). Regardless, his article nicely details the state of the web today, and for me at least that is enough for me to find value in what he wrote and appreciate the insights he’s put forth.

      The weight shouldn’t fall on him to solve the web’s problems nor should he be at fault for criticizing the web without having an immediate solution. He’s opening up a dialogue and has some valid points, we should leave it at that and not put forth our own judgement into what his motivations were for writing about it.

  16. dmi3y
    Permalink to comment#

    Read, think, repeat. Do your best to change what you could. It’s not about web tech is bad/good but what you personally could do about it. Respect and cheers to both authors.

  17. iQless
    Permalink to comment#

    I’m a designer not a coder by any stretch but I agree with Steven Wittens. It’s not even about being smart it’s all about the mentality and having a vision, imagination… Not settling for things… Otherwise, how would Einstein have come up with Relativity Theory? Or one remembers Steve Jobs’ reality distortion field… If we go with the same logic of “working in the real world,” Henry Ford would have come up with a faster horse!

    “Imagination is more important than knowledge.”

    —Albert Einstein

  18. Steven. Learned helplessness? So what, you’re saying Chris is simply accepting there’s nothing we can do about the drawbacks with the ‘tools’ we have available? That too many of us simply accept the crap and carry on? No, I totally disgaree. I think most developers, especially Chris and those who follow Chris and his site, firmly believe in Kaizen – continued improvement. It is the only way we can continue to evolve, both personally and professionally.

    Anyone who thinks that is wrong, why are you reading this article? Why are you on CSS-tricks.com? To improve, to learn, and I would hope, to evolve. If learned helplessness was really that wide-spread, no one would bother to read Chris’ site, or Steven’s (even if I am simplifying the greater concept you are talking about).

    We all strive to make the best site, app or product we can, and if we find a better way of doing it, be it the software, language, whatever the tool, we will use it and do it.

    But not all of us are capable of re-writing the entire system/ tools/ language in which we do it. And maybe not all of us want to anyway. But that doesn’t mean they oppose it or wouldn’t welcome it.

    To me, it’s about understanding and appreciation of what you have, what it allows you to do, and how best to use it, despite the drawbacks. That is not learned helplessness, nor is it blissful ignorance or whatever negative, condescending label you wish to place on it. I mean, can we not still build incredible websites, with what I would call “poly-fills” and adaptations on old technology? Have you seen some of the stuff people are making on codepen?

    I mean, it is a huge, monumental undertaking what we’re talking about. And probably most of the developers in the world would agree, and love to have a better way of doing things.

    But Steven, saying that you’re trying to wake Chris up just seems ridiculous. I mean, from what are you trying to wake him? A false reality where html is god and the dom rules? With Chris as the high priest? I think not.

    I mean, in your article, you’re talking about “re-inventing the wheel”, for lack of a better description. But it may as well be summed up as “why the wheel is shit and why I hate it”. And you’re having a go at someone for saying, “you know what, the wheel works right now. I’m sure it will improve over time and eventually it will be replaced, but I’m not going to moan about it right now or pretend I have the definitive answer to the replacement”.

    You raise some very valid points about the shortfalls and problems of html, css, the dom and so on. It just seems overly negative and pessimistic. And your comment in response to Chris’ post, just seems petty.

    At the end of the day, these are just opinions. Not facts. And Chris has posted his. It’s different to yours. Deal with it.

    I think Greg made some good points in his response too. But I really like the way Chris very diplomatically pointed out another perspective.

    “The way we see the problem is the problem.”

  19. Alex Bell
    Permalink to comment#

    Most of what I have to say about the albatross of backwards-compatibility has already been said here in various forms, and I won’t repeat. Two additional thoughts about recent possibilities for real progress:

    1) I find it painfully ironic that Yoav Weiss has to do an IndieGogo fundraiser in order to get <picture>into Blink. Much love, but is this really supposed to come out of my paycheck? Google, a company with a $400 billion dollar market capitalization somehow can’t find the engineering capital to implement a feature that moves the open web (its source of funding, via advertising) forward? After two years of intense discussion, and endless metrics showing the performance problems (and resulting disengagement) that come from big pictures on little devices, you’d think the brain trust that stands to profit most from this could make this move themselves. I can only speculate that something’s getting lost somewhere in Googleplex middle management, because the strategy people at the top and the peon devs at the bottom both seem to understand the urgency.

    2) Game-changing layout systems like GSS often don’t generate a lot of immediate heat because they’re a) not immediately usable b) harder to initally grasp. The ideas and algorithms of GSS are now 15 years old. The prollyfill is up and running. What will convince the W3C to move CSS past the limits of the idiotically limited parent/child relationship? Do we need another IndieGogo superhero to get GSS implemented in Blink?

    In general, I am quite tired of the buzz around ES7 features I may well never use. I don’t need to play Quake in the browser. I would like to see more attention paid to the really backwards, harder to fix aspects of CSS and the DOM. The two features above would be a great start.

  20. nathan
    Permalink to comment#

    Just get rid of or boycott ie into submission … this one fix would move things along since ie is Microsoft based and microsoft anything just plain sucks

    • Actually Microsoft has come a long way. A couple years ago I would completely agree with you after the releases of IE9, IE10, and IE11 along with the sweet interface in Visual Studio 2013 I think Microsoft is really stepping up their game. I run Apple Mavericks and Windows 7. They both have their quirks.

  21. I’d rather be practical than so smart all I see are flaws in things like HTML, CSS, and the DOM. These things are not easy to change. Accept them. And if you don’t like something like the DOM, be like John Resig.

  22. Zach Harkey
    Permalink to comment#

    Ok, forget about the article for a moment. Did you guys mess around with Steve Wittens’ website? Specifically that crazy header. You gotta swipe and drag that thing around a little. Watch the foreground and background elements rotate around each other at blazing smooth speed. Hit the play button and start the musical roller coaster.

    Then open your dev tools and watch code while you pan around the main pane. So cool.

    His whole site is full of awesome design details. Even the parallax background elements when you scroll main article are amazing. And the layout and art direction of the article served the content so well.

    Meanwhile I spent half the day whittling out SVG sprites for yet another set of social media icons that I probably won’t be able to reuse. At least I don’t have to use a custom webfont anymore.
    Seriously, I’ve been doing this for 14 years and it amazes me how much time and effort it takes just to get a few godammed social media icons to play nice.

    • “Seriously, I’ve been doing this for 14 years and it amazes me how much time and effort it takes just to get a few godammed social media icons to play nice.”

      That’s basically what I said above. Whilst I’m sure that people who work in traditional programming, or design roles for print medium, have spent many hours late at night solving problems, I’m willing to bet they aren’t related to trivial things such as vertically aligning two boxes next to each other, or figuring out how the underline beneath some text could be improved. Whilst this stuff is fun it’s a nightmare from a commercial point of view.

    • standard-div
      Permalink to comment#

      It’s superfluous, though. While I agree web standards are poor in spec and implementation (the crux of Wittens’ rant), he is not exactly breaking new ground with this opinion.

      It’s intimidating when “smart people” quote physicists on their vanity website, but take a look at his twitter — you do not want folks like him in charge of web standards either :-)

  23. The amount of negativity shown towards Steven in this comment thread embarrasses me. I’m ashamed to be a part of this “community”.

    • standard-div
      Permalink to comment#

      what negativity?

      Half the posts seem to agree with him, the other half (like me) point out that he is not exactly saying anything new, and his own rant does not necessarily provide a clear way forward. His own vanity site and post is evidence of other problems in product/web design (over engineering, architecture astronautics, etc).

      He started it! Don’t be such a delicate flower :-)

    • Robert
      Permalink to comment#

      Jezen Thomas :
      Steven’s own article is based on negativity, towards the sate of current web tech. Nothing wrong with that. He’s right on many things.

      As I commented earlier I whinge almost every working day at some web tech that I have to use. (If it’s a new, unresolved issue.)
      But I’m also realistic and realise that I have no influence at all to make a change.
      And I’m going to tell you a public secret. Neither does Steven Wittens.
      Steven calls it “learned helplessness”, see his comment above.
      I’m calling it getting on with what I have been given and make the very best with it before the agreed project dead line.
      I, and especially my clients don’t care how I got there.
      Besides, once you’ve resolved a problem with a workaround, I’m pretty sure you’re not going to resolve the same problem from scratch on the next project. ;)
      You might even rip the workaround from framework X, giving full credit, because it saves you anything from a few hours, to a few days of work.
      So the problem is negated/countered/defeated/squashed. It has become a non-issue. So why keep going on about it?

      Pleased clients make that I can pay my company and personal bills with plenty of money to spare. That’s more important to me.
      Time goes on, and I won’t always be around.

      standard-div :
      In the 60’s/70’s lots of delicate flowers equaled Flower Power. :)

    • Robert, you call it “realistic”; I call it “naïve”.

    • Robert
      Permalink to comment#

      Jezen, realistic and not having illusions about making structural changes would be a better description.
      Naive is what I would call having these illusions to make any sort of structural changes to problematic web tech through W3C, WhatWG, or browser vendors separately.

      Steven mentioned comparing the state of web tech 10 years ago, with the current state of web tech. Indeed, nothing earth shattering. But, how many Steven Wittens’es have there been in those 10 years? I don’t know, but it must be plenty. (And still, more will come.)
      What have they achieved? Nothing.

      Do you really have illusions about that you or anyone are going to make structural changes to this situation?

      There is always a tiny chance of course that the world will read about you, Steve and/or any other smarty who made those structural changes.
      But while you’re at it, it’s all still an illusion. A celestial waste of bandwidth.

      And don’t expect much cooperation from companies/individuals after telling them in public writing what they do wrong.
      It’s like writing an open letter and having it published. Some will agree. Some will disagree. Some will be impartial. But all will forget fast.
      Maybe because there are always next projects on the horizon.

  24. Salvo Nicolosi
    Permalink to comment#

    I think that this is the way we move ourselves (and the web) forward. Discussing and analyzing problems and looking for new solutions.
    We have shortcomings to deal with but I am amazed looking at what people are able to build.
    Constraints often are source of inspiration but that doesn’t mean that all we can do is take things as they are!

  25. Permalink to comment#

    I really don’t understand how you can ‘Hate’ or ‘Strongly Dislike’ any given language. HTML, CSS, and browsers are only getting better from what I can see. I love to create, and HTML, CSS, JavaScript, etc., allow me to do that. Sure, each language has its constraints and quirks, but they aren’t necessarily limitations. A good painter doesn’t get upset or complain when he only has an 8×10 canvas and one brush with missing bristles, he takes the tools he has and makes something beautiful with them.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".