A bit of a rant
The cascade is something like a new data structure, and the ways for dealing with it are algorithms you never learned in school. You couldn’t have, because traditional engineering school poo-poos the front-end and web engineering in favor of stale (but still valuable) traditional software engineering.
JavaScript
Perhaps you realized this web thing wasn’t going away, so you learned a bit of javascript. That went OK, how hard is it to add another language to your repertoire? Now you just wish it would compile like a proper language. You hate the browsers, and (foolishly) wish there was only one. You find Ajaxian, and start thinking of yourself as super-engineer; the guy who can just as easily write a web UI as a cronjob to perform background data processing.
CSS
With the confidence of JavaScript success, you decide to tackle CSS, and then the problems begin. You start from scratch rather than using a library, because after all this is just a display syntax. (Do you also rewrite the math class every time you need a random number generated?) You don’t bother to learn proper semantic HTML, they must be joking! Nattering on about web standards and accessibility. It should be cake.
Nothing works as you expect it to. Your columns won’t line up. You never validated your HTML, and you have a sneaking suspicion that there is an unclosed tag somewhere. You can’t make even the simplest design look right, and you are pretty sure CSS is to blame, rather than your understanding of the technology. This should be just another acronym on your resume, right?
No. Resoundingly, no.
Calculating Complexity
Take for example, calculating the complexity of a given solution. If you were to calculate O(n) in CSS, n is adding more pages and modules to the site. What happens to the size of the CSS file? It goes up, right? But does it grow like a fifteen year old boy? If so, you’ve found the CSS equivalent of O(n^2). When you keep that stylesheet lean and mean by effectively using the cascade, the fundamental solutions are algorithms, but no, your engineering professors won’t have mentioned them.
If you did manage to get a site up and running, you’ve noticed how fragile your code is. You touch it on one side and it breaks somewhere else entirely. You try to sandbox individual components to prevent this, and your CSS file just keeps getting larger. It is unmanageable, unmaintainable, and it doesn’t scale. Again, you think, CSS sucks, with all these inherent flaws.
Communication Breakdown
You think of people who do know CSS as designers, not giving any credit to the engineering prowess required to tame the stylesheet of a multinational corporation because (self-taught as they are) most true front-end gurus don’t speak the same language as you do. Their skill appears to be a black-art, some kind of magic, or internalized instinct for browser flaws. This is your guess anyway, because you simply can’t communicate with them. They didn’t go to the right school, or maybe they studied japanese modern literature instead of databases and sorting algorithms.
Furthermore, you don’t understand why it is so hard to hire them. You said to me once, “I can sit at the exit of the best engineering schools in the country and scoop up software engineers, but I have no idea how to find you people!â€.
You’ve been writing CSS yourself for a couple weeks, so you decide you are ready to hire a web developer / designer / front-end engineer. The role is pretty unclear, but in your organization they’ll either be alone in a team full of software engineers, or they’ll report to the Artistic Director in the marketing department. You’ll give them goals like “learn SQL†or “some C++ would be really helpfulâ€.
I once said in an interview, “If we talk about what I know, we’ll arrive at the limits of your understanding very quickly, and if we talk about what you know, we’ll arrive at the limits of my understanding very quickly. So what do we talk about?â€. The engineer interviewing me took it well, and I was even more impressed with the company.
By now you have 3-4 weeks of CSS under your belt and you can confidently say, “CSS sucks, our organization will use tables.†Excellent choice grasshopper, if you can’t win, blame the game.
An attempt at a solution
We need your help. Web development and client-side technologies need a dose of best-practices from software engineering. We don’t need you to solve problems for us, nor will our solutions necessarily be the same as yours, but we need to learn from you rather than reinventing the wheel, so that the front end can mature as a proper engineering discipline.
This is virtually impossible unless we develop a mutual respect for each others’ skills, and software engineers make an effort to understand what makes a good front-end engineer. Hint: it may not be exactly the same skill set, and certainly not the same technologies. Like it or not, managers tend to be software engineers, and you need to understand how to work with your developers to improve the state of the art.
Hiring
You might be an engineering manager, with a self-taught front end engineer sitting before you in a fish bowl conference room you use for interviews. Look for:
- A sense of design, attention to aesthetics. Tattoos, weird hair, artistic hobbies, or slight OCD are good things to look for here. They need to care that the h3 are 1px off from where they should be. [1]
- Semantics and clean HTML – foundational, if they don’t have this, be very afraid. If you hear
DIV DIV DIV, be very afraid. Note: you may need to study up yourself to judge this. I print out a mockup (psd for example) that I am currently building and ask them to draw squares on the paper representing the different HTML tags. I draw a box around one paragraph to get them started. I’m not looking for perfection, just the ability to comprehend the difference between the meaning of things and the display. - Approach and problem solving – make the problem concrete and visual if possible, move slowly toward more abstract questions to judge their ability to generalize a solution.
- Algorithmic mind – assume no prior knowledge of traditional algorithms, but they should be able to understand algorithms you’ve explained and tie that back into the code they write. Again, make it visual.
- Complexity and scalability – they might not be thinking in this way (yet!), but if you talk about what happens if there are thousands of pages or an unknown number of user generated modules they should be able to explain the failure points of their code.
- Experience – Be aware of the team the developer will join. If they are alone, you can’t hire a beginner. Their skills won’t develop, and you will be frustrated by the fragility of the code they write.
To solve the communication difficulties, think:
“My web developer is smart, so smart she learned a kind of engineering for which there is no school. The technologies she knows are as relevant, complicated, and legitimate as those with which I am more comfortable. I may never be an expert in those areas, but I can help her learn the vocabulary of algorithms, complexity, modularity, and scalability so that she can write better and better code. Furthermore, I will never again say that CSS sucks rather than admitting my own discomfort with a different problem space.â€
Stay after school and write that last line on the board 100 times.
CSS can be predictable, scalable, modular and even object oriented. If it is written correctly, beginners can be productively participating in creating clean, reusable code in 2-3 weeks. It is simply a matter of changing our approach, understanding that the fundamental algorithms for a display language are different than a programing language, and borrowing everything we can from software engineering, so that we don’t spend time reinventing the wheel.
And If you still want to be an F2E?
Check out this F2E skills list presented by Leslie Jensen-Inman at Web Directions North as a part of her dissertation on the state of web education. Note: even the non-acronyms count as skills.
[1]Thanks to Nick Fogler of Juku at Yahoo! for his ideas on aesthetics and F2Es.
[2] The Ajaxian post that made me feel like ranting: http://ajaxian.com/archives/css-for-layout-another-rant
Comments
30 responses to “CSS doesn’t suck, you’re just doing it wrong.”
[…] CSS doesn’t suck, you’re just doing it wrong […]
I really liked the part about what you once said during an interview by an engineer, however, if a F2E doesn’t know how to design a circuit, they’re clearly a dipshit. Also be sure to grill them on how they’re going to scale an app (both horizontally and vertically), how they’re going to extend PHP, configure Apache and be sure to have them come up to the whiteboard to “work out some code” but make sure the code is in Java. That should be easier for them as opposed to JavaScript since there are 6 fewer letters.
Great courageous thing to say. This is a great source of inspiration.
Liked your article, but…. ‘F2E’!? Damn, I guess I’m getting old.
(BTW, would ‘FE2’ not at least be more in line with ‘W3C’?)
@Sander Aarts We have so many titles… maybe that is part of the confusion as this profession requires one to straddle design and engineering worlds.
Web Designer (UED, IXD, etc.),
Web Developer,
Front-end Engineer (F2E),
Developer Front Office,
Any others?
Not sure where the abbreviation came from, I heard it first at Yahoo!.
There are many titles indeed. I use Front-end Developer or Front-end Web Developer myself. As a member of Fronteers, a Dutch association of front-end developers, I like ‘Fronteer’ as an acronym of Front-end Engineer as well.
What I don’t understand about F2E is that, although it’s shorter to write than Front-end Engineer, it’s still harder to type that FEE 😉
Hi Nicole,
I just love what you wrote here. Rest assured you’ll be quoted in a next Paris Web sure. Plain brilliant way of putting things.
@Sander Aarts I tend to go with Front-end Engineer or F2E, just because I think it is important that the front-end be taken seriously as an engineering discipline, albeit one which is extremely closely linked with design.
@Stéphane Thanks. I really was just speaking from the heart, trying to be productive about it, but also needed to have a good rant. 🙂 I hope to see you next year at Paris Web, I had so much fun speaking there. Highest girl-geek attendance of any conference I’ve been to! Bravo!
Fantastic article, I have been Front-end Developer specializing in CSS for around 4 years and worked with backend developers in the UK and here in Australia many of them don’t understand how some aspects of CSS work. I see CSS as an easy thing to learn but difficult to master. The main reason for this anti-CSS movement is IE6. Now IE6 was created by a bunch of Software Engineers who got it very wrong way back in 2000/01. I have studied and understood most of the IE6 bugs and know how to solve them without too much fuss but it has taken a lot of pain to get this far. IE6 bugs defy logic and to get around the bugs you sometimes have to through logic out of the window.
Not to say CSS is illogical but we are sometimes at the mercy of the browser vendors as all browsers even the standards compliant ones have their own quirks that can have you tearing your hair out. For that reason I don’t even build templates in Firefox, I use Safari as I feel it has a better rendering engine and generally if it works in either Safari or Opera then you have built correctly (I then check in Firefox and IE).
CSS is growing ever more complex and requires more time then ever to learn and eventually master. There is still a lot of really bad xhtml/css being built right now by people who don’t fully understand how to use it. It makes me cringe but at least people are waking up and seeing that if you want this stuff to be done right, you get in someone who truly understands and maybe, just maybe enjoys it.
Great article! I took the time to really learn CSS once I started working with a real designer (she works in Illustrator – like the rest of the code, the CSS implementation is up to me).
My attitude had been ‘CSS should be easy, but it’s horrible’. I realized it was more like ‘CSS probably is easy, but IO don’t understand it so it’s horrible’. I stopped trying to fuddle around and copy other people’s CSS, and bought ‘The Ultimate CSS Reference’. Two weeks later, I understood floats and display (mostly…), and my life is much better now!
Hey Nicole,
I think generally we just have to ignore that sort of rant (talking about the original article there) and sort of rise above it.
It’s been going on for a long time now and people who don’t want to get it to the point of writing articles like this probably never will.
But anyway, when a response is of that quality I guess it can only benefit people trying to learn. So yeah, nice one!
Really liked the slides of your presentation on Slideshare.
Looking forward to catching up at Paris Web 2009!
Hi Cyril,
I agree with you completely about ignoring that sort of rant. In this case, I responded because Ajaxian picked up the topic. Ajaxian lends weight to the argument because people assume they are front-end engineers saying CSS is broken. In fact, a lot of their writers are traditional software engineers.
See you at ParisWeb!
I found the initial learning curve particularly steep with CSS – possibly because its logic is quite different to that of programming languages, for example. But once i started to get the hang of it, i realised how brilliant it is. I’ve got a weird background that includes assembler programming, cut and paste layout and offset litho printing and CSS seems to fit comfortably in among all those. Its complicated, but it’s extremely versatile.
I started making web pages in 95, but i only got into CSS a year ago. And it’s only really now, after a year of intensive self-teaching and web site building, that i’m beginning to feel like i really do know what i’m doing. I’m starting to use php in my CSS files now, which gives me some of the things i’ve missed up to this point – like the ability to set variables and use them throughout the stylesheet, etc.
@Julian Thanks!
@Will Kemp – That background might just be stranger than mine, but I’ve got a stint as a carpenter thrown into the mix. 😉 I’ve been curious about playing with variables & server side processing of CSS files but was concerned about the performance cost. I guess as long as you are server-side caching it should be fine.
You know i love CSS in everyway, and the more i work with it the deeper my love grows. This is a wonderful article by a woman who is wonderful in her work.
You are a very special and gifted woman. Having said that i feel that you nurtured your skill and talent and that should just inspire everyone to do the same (me at the top of the list!!)
Really i truly am overwhelmed with the #purity .ofyourwork
Ha ha. That’s just the tip of the iceberg mate! I was very impressed to see you’ve worked as a carpenter though. I don’t think i’ve ever come across anyone other than me who’s worked in construction as well as IT. The 3D visualisation that’s required for that sort of work seems to be almost the opposite of the linear thought processes required for most IT stuff.
Yeah, i’m not sure about the performance cost of the php engine parsing CSS files – but i imagine there could be possibilities for improving performance by only serving the parts of a site-wide CSS file that are needed for a particular page. I’ve only very recently started thinking about this stuff, but i feel intuitively that it could open up some interesting possibilities – i’m just not sure yet quite what form they’ll take.
@Will Kemp HTTP requests are so expensive that on most sites they’ll affect performance more than just including a few extra lines of CSS. Check out YSlow if you haven’t already.
Yeah, i use YSlow – it’s very useful. But i wasn’t suggesting that as a way to improve performance as such – just that it may partly offset the performance hit introduced by parsing php parsing the CSS file.
It occurs to me that a way to eliminate a couple of http requests is by putting the CSS and the javascript in the same file as the HTML. [evil grin]
Great defense of the virtues of CSS and all that, but you know what would have made this blog post useful to me? Links to where I (the evil software engineer type) can go to learn to be less of a hater and more like you.
There is a line in the post that states that beginners can produce reusable code in about 2-3 weeks. Where do I sign-up for this 2-3 week course?
@studdugie Did I say evil? 🙂
I’m beginning to wonder if I should create a 2-3 intensive CSS course… that will take more thought. In the mean time, check out the code I’m releasing as a part of my OO framework. The docs I’m publishing on github explain more about how OOCSS works.
http://wiki.github.com/stubbornella/oocss
@Nicole: Thanx for the link. Let the healing begin!
OK so CSS doesn’t suck and it is different (ie not just another programming language). So how do you make it “… predictable, scalable, modular and even object oriented.”?? I have made attempts at getting there but it still seems pretty.
… but it still seems pretty fragile.
@Jim You are right, it is still pretty fragile. I’d recommend watching my video from Web Directions North about Object Oriented CSS. Do that first, then check out the code on the OOCSS open source project on github. You’ll notice that grids + templates are less than 1K. modules are around 2K. The OO approach is why it stays so light, and yet it allows a lot of flexibility. The goal is that all of the heavy lifting is done in the structure objects, which are then extended by extremely predictable skin objects.
The example code:
http://wiki.github.com/stubbornella/oocss
Keep in mind that OOCSS isn’t a framework, this is just an example. OOCSS is more like another language, anyone can write it, it just requires us to think in an object based way, separate structure objects from skins, and separate containers and content.
When I read some articles, I almost feel like the people writing are completely separated from the “web” when they throw around titles involving the word “engineer.” Sometimes people get way too conceptual. CSS was, is, and always will be easy for anyone who considers themselves to be even a decent web designer/developer/front-end “engineer.” If it’s not, don’t use the title 😀
No, CSS sucks. it’s a kludge to allow for multiple vendors to completely ignore the fact that a standard exists to prevent the need to make a kludge like CSS to work across multiple products. While CSS does an admirable job at its task, the task itself is the major problem. I would submit that CSS can NEVER work well, as its a solution to the wrong side of the problem of incompatible browsers and standards
While I’m sure with a lot of practice and knowledge you can get good at CSS and make it “predictable”, I’d say that that is exactly the problem. I can accept that complex problems can have complex solutions that require a deeper understanding of what you’re doing but learning CSS seems to mean learning its quirks and workarounds rather than learning its power. In my experience, rarely has the intuitive solution lead to the proper output in CSS. I’d rather have something more complex to program that was at least predictable and intuitive.
Many people are quick to blame IE for every problem. I hate IE with a passion but I’d say that the standards themselves are to blame for all of the bugs and incompatibilities. IE may have made the biggest hash of it (by far) but every browser got it wrong, and that to me indicates that there is a problem with the specification itself.
Sorry for commenting on such an old post, but I stumbled on this after reading your OOCSS stuff (which is awesome) and just wanted to say thanks for putting it so plainly. I’ve had frustrations with people hating on CSS many, many times, and have never been able to be this articulate about why they’re being unfair. Nice work!
I really don’t like the second person in this rant. It felt like you were insulting me and attacking me the whole way through, even though I personally am quite comfortable with CSS, accessibility, languages that don’t compile, etc. Even people who know CSS, or at least have already “admitted their discomfort with the problem spaceâ€, might read this article just to affirm that they are on the right track – getting rid of the second person would make sure that these people don’t have to be slandered.
@Rory I’m sorry you took offense. Keep in mind that this post (as I stated in the first couple sentences) was a reply to a rant on Ajaxian. I expressed my frustration that so much attention is given to these perennial “css sucks” articles. I rarely rant, so bear with me. 😉