CSS is for developers

Quite often people assume that because the language I focus on is CSS, I must be a web designer. Don’t get me wrong, I love visual design with a passion. I have studied it a lot over the years and I’ve worked on several design projects for clients. Heck, I even have a dribbble profile!

However, if I had to pick one role, I would definitely consider myself more of a developer than a designer. I discovered coding on my own when I was 12 and so far it has been the most long lasting love of my life. Although I lost my coding virginity to Visual Basic (something I’m still embarrassed about), over the years I’ve coded in Java, C, C++, C#, PHP, JavaScript before I even got to CSS. I’ve actually studied Computer Science at university and graduated 4th in my class, whereas I’m completely self-taught when it comes to design. My personality is more similar to the developers I know than the designers I know. Coding comes naturally, but I have to struggle to get better at design. I’m a better developer than I will ever be a designer.

Still, the assumption often is that I can’t possibly be a developer and interested in CSS, when there are all these amazing programming languages to focus my energy on instead. Therefore I must be a designer …right? There are even people who know about my open source projects, and still think that I can’t code in JavaScript or any other programming language (not sure how you can make most of these tools with pure CSS, but since CSS is Turing complete, I guess there must be a way!).

If you think I’m an exception, you’re mistaken. Everyone else in the W3C CSS Working Group, the group which defines the future of CSS, fits the profile of a developer much more than that of a designer. In fact, I might be the most designer-y person in it! Even outside the WG, the people I know who are really good at CSS, are either developers or hybrids (designers & developers).

This is no coincidence. The skills required to write good CSS code are by and large the same skills required to write good code in general. CSS code also needs to be DRY, maintainable, flexible etc. CSS might have a visual output, but is still code, just like SVG, WebGL/OpenGL or the JavaScript Canvas API. It still requires the same kind of analytical thinking that programming does. Especially these days that most people use preprocessors for their CSS, with variables, math, conditionals and loops, it’s almost starting to look like programming!

I find it counter-productive that CSS in most jobs is assigned to designers. Designers should be doing what they do best and love: Design. Sure, they should be aware of the practical limitations of the medium and should be able to read and lightly edit CSS or hack together a prototype to show how their design behaves in different conditions, but it shouldn’t be their job to write CSS for production. The talents required to be a good designer and a good coder are very different and it’s unreasonable to expect both from everyone. Also, when you know you’re gonna have to implement the design you’re working on, it’s tempting to produce designs that can be easily converted to CSS, instead of pushing the boundaries. We don’t usually expect developers to design, even though it’s an added bonus when they have an eye for design as well. It should be the same for designers.

And if you’re a designer who writes amazing CSS and is about to tell me off in the comments, hold your horses. I’m not saying you shouldn’t be coding CSS. I’m saying that if you’re good at it, it means you’re both a designer AND a developer. Own it! :D

  • Benjamin Knight

    I think there are actually a hybrid breed of designer-developers out there who have both strong design sensibilities and strong code sensibilities. To me this is what it means to be a front end developer. In my experience, these are the sorts of individuals who produce the web’s best user interfaces and experiences. With these two skills it’s possible to really, truly understand the web platform and what makes the difference between what is right and what is wrong (or good versus bad). To call out some names, I think Hakim’s a pretty good example: http://hakim.se, or David: http://v3.desandro.com

    Forcing people to identify with either one or the other will keep teams in the “slicing” paradigm, which doesn’t produce the best quality possible IMO. Designers should worry about branding and consistency, but UIs should be designed and coded by the hybrids, with high-level direction from the designers.

    • http://lea.verou.me/ Lea Verou

      Someone didn’t read the whole article?

      • Benjamin Knight

        I suppose. It seemed to me that much of the article was supporting the notion that you’re either one or the other. But yeah, I like the “own it” conclusion, and in that case, consider my comment supportive :)

      • http://www.koandesign.com/ Fabien

        glad you added the last three lines… :P

  • http://twikito.com/ Matthieu Bué

    It’s exactly the thought I have since a few months.

    And by the way, for those like us who are designer AND a developer (just like you said), who only code with HTML, CSS and soft JS, what do you think of the term “UI developer” instead of front-end developer or even Web designer?

  • Margarita Ramón Irrazábal

    Love it! I think exactly the same way. I myself dedicate mostly to
    design of course learning everyday about the techniques used and what
    limitation are out there when designing, but I work pretty close
    together with the developers who as you said should also have an eye for
    what looks good otherwise things can turn out horrible when executing.
    But I must say there are times I have encounter with some developers
    that I feel like saying shit let me do it myself and that’s when I think
    it’s great if you can be a hybrid, but each to its own. I think the
    coding I learned a while back it’s nothing compared to today, always something new to learn :)

  • Wakkos

    An awesome article, very clever for devs who think I should be using Photoshop only because I code CSS. And I’m also ashamed of using Visual Basic first xD

    • http://crab.uy/ Rodrigo Espinosa

      Nothing to be ashame of! Visual Basic does justice to his name.

  • jfcarr

    Since I work mostly contracts and jobs at places like financial service companies and manufacturing companies I usually end up doing both the design and the code, from the CSS/HTML to the Javascript to the C# or PHP to the database queries. The only time this was really split was when I on a contract at an advertising agency that had separate graphic designers. There I got known as the go-to “front end guy” because I was the only developer who was willing to work with CSS. Having both skills and the willingness to do either one really enhances your job possibilities.

    As for VB, I’m not ashamed about using it back in the 90′s. However, I do try to avoid telling people that my first computer program was written on punch cards back in the 70′s.

  • Eduardo Schenzer

    Finally someone that writes down what I’ve been saying for years!
    I remember many years ago, when someone said “ok, so you’re a designer”, I used to spent a lot of time explaining the differences between designers and coders/developers. I even used to change my MSN status for “It’s a misconception, we HTML coders are not designers”.
    But they are stubborn and don’t learn. Nowadays I say “ok, if you think so, you’re right”… It’s healthier.
    Now I can lead them to your post.

  • alvincrespo

    Fa sho. In fact, CSS is something every engineer/developer needs to keep in mind in order to do performance enhancements. Understanding how styles get applied and what it means that the browser as redrawn/repainted is essential in graphics heavy apps.

    Thanks for sharing this, its essential that people start recognizing this fact.

  • Francesco Belladonna

    Well, I completely agree with this article and want to enhance it with my experience. I moved from game programming to “web” (both backend and frontend) and the main reason I did it is because on gaming you usually ends up spending a lot of time on small implementation snippets of code, while in web usually you spend much more time organizing code (which is what I like about programming). The level of abstraction that web languages offer (javascript/css and various backend languages, like Ruby in my case) are “high” enough to make implementation of various functionality, quite trivial. What becomes really important is to organize code, make it mainteinable and (possibly) making it easily testable.

    CSS for me, is the most clever example of this.
    Yes, you still spend time into fixing browser compatibility issues and such things but what’s more interesting about CSS is the fact that organizing all that code is not easy, you have TONS of classes you should organize, name correctly you can apply a lot of patterns and similar things. Feels like programming, just at a very high abstract level.

    Let me end with a question at this point. I love both front-end and back-end development and I do like design a lot but I’m definitely not good at it (I can clearly distinguish what’s good and what’s bad, but I can’t produce good content by myself, there are a lot of details I usually forget). So, with recent “workflow” styles, where (at least from what I’ve read) people stop usually working with photoshop/similar and starts directly writing html/css to build a prototype, which is the job of the front-end developer? Usually, I have an image (design) and I reproduce it with HTML + CSS, but if designers should write html and css by themselves, I don’t know where front-end development is (except for Javascript which I won’t leave to anyone who doesn’t have a strong programming experience)

    • Agon Bina

      In my opinion a front end developer needs to know CSS(and hopefully a preprocessing language, like Sass, to make their life easier), HTML with the latest additions(ie “HTML5″), and be able to at least write Javascript from scratch( knowing jQuery makes you more productive of course). Now if you want to be a “full stack” front-end developer, knowing at least one of the latest JS frameworks(ex AngularJS or EmberJS) would be great.

      I consider myself a front-end developer, and I mainly focus on these languages and want to be really good at them. But of course that doesn’t mean you should not learn other things like NodeJS (since you already know JS, knowing the basics will surely help if you are working in a team using it), C# is pretty fantastic (ex. you can build native cross-platform apps for iOS, Android and Windows 8/Phone with Xamarin using C#) , etc.

      Whatever makes you productive!

  • Nicolas Hoffmann

    I mostly agree, our designers are lost with code, and more and more lost with preprocessors. :)

    If I just could add a word : CSS is for FRONT developers.

    CSS has its particularities, and a lot of back devs are lost with it and are outputting real bad code (I don’t say that all back-devs are bad at it, or they are back and front dev : same as your conclusion).

    • frippz

      “CSS is for FRONT developers.”

      I wholeheartedly agree with you! Well, ok front end *developers*, but yeah. :)

      Surely, CSS does have its peculiarities and I’m imagining that it takes a special kind of person to get this (maybe not a developer or a designer, but a hybrid unicorn, as Jen Myers expressed it in her keynote at Øredev). Traditional back end developers seem to rarely get this and we end up with silly preprocessors as a result, instead of them learning how to use the strengths of CSS properly.

      Who needs silly variables and mixins when you can use the inherit property and the cascade properly? ;)

      • Francesco Belladonna

        I don’t agree with these, there are a lot of useful mixins that just avoid you typing more code, for example doing something for h1-h6, vendor prefixing, or even a simple image-width function allows you to avoid typing image size by yourself

        • frippz

          For (almost) every use case you can come up with using mixins, I can give a at least one alternative using vanilla CSS that does not involve horrendous code duplication.

          Mixins just barf up the same CSS code over and over. It just gets abstracted away.

        • Francesco Belladonna

          I do, all time. You just have not to abuse mixins, that’s all. Consider that when you define (inside another class), the &:something, that increases code readability by a lot while keeping code small, that’s the usual case where you can use it (expecially in my case, I use it to define link styles).

        • Karen Menezes

          I’m not for or against preprocessors, but it’s really easy to write horrendous CSS with preprocessors if you’re not careful. if using SASS, be aware of the placeholder, that results in comma separated selectors with common properties. It should be used in place of a mixin where appropriate. But honestly, I’ve seen people create mixins for vendor prefixing text-shadows (which never needed vendor prefixes ever). Unless you can write good vanilla CSS which is DRY, Sass or anything else ain’t going to save your ass, as I say :D

        • frippz

          Indeed, it will just exacerbate and multiply crappy code. :)

        • Agon Bina

          I in fact was planning to use the Compass mixin for adding vendor prefixes to the text-shadow until I saw this. You would expect Compass to be up to date and only add prefixes where they really are needed, but oh well.

        • Karen Menezes

          agon, you need very few vendor prefixes today. I’ve written an article here if you’re interested: http://blog.karenmenezes.com/2013/jan/14/dropping-support-vendor-prefixes/
          Also, you could choose to comma separate selectors that have the same color. That way, you don’t need to replace a color in 15 places.

  • jefferymoore83

    It’s interesting to me that so many people assume you’re a designer because you’re a CSS guy. I feel like I’m usually assumed to have no design skills because I code (and it’s CSS I’m strongest in). The companies I’ve worked for have normally kept design and development very separate from one another, and designers who know *any* code is the exception rather than the rule.

  • Paul R.

    Losing your programming virginity to an “easy” programming language is a lot better than losing your virginity to an “easy” guy or girl. There’s nothing amoral about programming or being promiscuous in your choice of programming partners.

    I lost my programming virginity in high school with QBasic. I had dabbled with batch files before then, but my real programming started with QBasic. I had seen printed code before, but not recognized it for what it was. (My father was a computer enthusiast and apparently dabbled a little with computer programming even after he realized he couldn’t pursue it as a career.)

    Shortly after my first experiences with QBasic, I went into the Software Engineering Technology program at a four-year technical college and the first language they taught me was C. Within a year, I’d played with at least four more languages: C++, COBOL, Ada, and SmallTalk. By the time I graduated, I had worked in at least a dozen different languages, including CSS. (The implementation of CSS back then was so spotty and varied so much that I refused to work in it until it was better supported.)

    Five years after graduating, I landed a job (not my first, but I’d been unemployed for a bit) and learned Delphi on the spot. Three years after that, I got another job and learned ColdFusion on the job.

    I believe that a monogamous relationship with a programming language is stifling. Just as learning a new spoken language expands your horizons and (some psychologists claim) helps you think about things differently, so a new programming language can expand your horizons and broaden your problem-solving skills.

    Don’t focus entirely on web development languages and environments: people have probably solved several of your problems with traditional application development. Don’t focus entirely on traditional application development either: new solutions to old problems are popping up in web development all the time.

  • Oscar de la Rosa

    If you call developer a frontend developer, I agree, however, i think designers must be writting in CSS and if they are designing for web, they must know about web, include coding….if you want a backend developer write at CSS, maybe it wont be the greatest work or won’t have the visual quality that you might need…

  • MaxArt

    Well… I’d say that *you* are a developer, I have no doubt about it. I have this hunch that you overheard someone hinting that you’re not a real programmer “because you do CSS”, and you wrote this blog entry in response.

    But many designers and CSS experts with little knowledge of Javascript or other fully-fledged languages. They heavily rely on jQuery or other frameworks that make them “do the stuff” easily.
    I’m not saying that using jQuery is wrong, but if “decently accomplishing the task” is your only goal then you’ll end up in a lot of bad practices and ugly project designs.

    Surely CSS proprocessors are thightening the bonds between developers and designers, and that’s a good thing, but performances are still left out :P

    • http://lea.verou.me/ Lea Verou

      Bad developers are still developers and there are bad developers overly relying on heavy abstractions in every language. Being a developer is not an achievement, being a good one is. Also, many of those are just newbies.

  • Pedro Heliodoro

    I feel what you mean… I lost my coding virginity with GW Basic… Well but it turned out I did code a ellipse with a nasty sound with a pre-286 computer :p

  • Ed Moore

    Here in Singapore you’d be hard pressed to find a Designer that can do CSS. Not that they don’t exist, it’s just that there aren’t many of them. Mostly the jobs that require CSS in Singapore are for Front-End Developers.

    I feel most designers here feel that they should just be doing design and not doing CSS at all. For the most part I agree, however I still feel that they should still understand about CSS and how it works. On numerous occasions I have worked with designers that don’t understand how the box model works and that some Photoshop effects like mulitply can’t be done (at least on most browsers for now).

  • Peter Knight

    This makes me think about how in the WordPress theme space the act of ‘tweaking a bit of css to get the theme right’ is often passed off as a trivial undertaking. I think CSS being quite forgiving compared to say, JS and php, where every typo and missing semi colon can mess up a page, may give of the impression that CSS is less involved. Without the benefit of a developer’s mindset it is less likely that attention is paid to performance, maintainability, cross-browser and cross-device compatibility and so on. That kind of expertise is slowly acquired.

    It does make me wonder to what degree end-users should be encouraged to work directly with the css of a theme for example. Wouldn’t want to deny new users an opportunity to get excited and involved with CSS either.

  • http://www.designtoday.info/ Mustafa

    Lovely write up. I think the best websites / apps are built by either designers who can develop or developers who appreciate design. Most places I have worked has often pushed CSS to the designer who may not have the best background when it comes to maintainability.

    Personally i think we should all do both :) There are things that we will be naturally better at based on our experiences though. There is nothing I hate more with a developer who thinks a designers role is to make things pretty with CSS.

    Anyways Great Article Lea.

  • Pingback: Weekly Design News (N.213)

  • Pingback: Weekly Design News (N.213) « Refined Sites Blog

  • James Kyle

    “Especially these days that most people use preprocessors for their CSS, with variables, math, conditionals and loops, it’s almost starting to look like programming!”

    I wrote a Sass BDD Testing Framework based off of Jasmine, am I a developer yet? https://github.com/tctcl/bootcamp

  • Santiago Escalante

    Agree.

  • http://ambroselittle.com Ambrose Little
  • Rubén Torres

    Amazing, I can relate to this

  • Dimitris Papageorgiou

    ενδιαφέρον άρθρο….interesting article

  • tomByrer

    I totally agree, & would even say people who work in the web world should think of themselves as engineers & not just programmers or even ‘designers’.

    To quote Wikipedia: a web “engineer is concerned with applying scientific knowledge (knowing browsers, HTML, CSS, UA, etc), mathematics (color theory, layout, time-to-glass, programming), and ingenuity to develop solutions for technical problems. Engineers design materials, structures, and systems while considering the limitations imposed by practicality, regulation, (usability), and cost (to program, implement, and use).”

  • Pingback: CSS is for developers | yaswanthtechie

  • Horacio Nunez

    Being polite doesn’t means you can’t be brave.

  • Pingback: Observations on the Use or Lack Thereof, of Long Titles in Writing on the Web | Ian Devlin

  • Pingback: Why would I like to have a conversation with Lea Verou? | Irina

  • Pingback: CSS Masters Israel | מי צריך לכתוב CSS ? מתכנתים או מעצבים ? ללאה ורו יש את התשובה בשבילכם

  • Johan

    THe best CSS developer are ideally both analytically and possess creative-like skills like in the field of animation, UX, typography, page layout, design, colors, IA,…

  • Pingback: Il CSS è per sviluppatori | Laboratorio CSS

  • edgar

    Im a designer not programer, maybe, and not the best writing in css or html, but back devs write always stynki codes full of bad practices and dont care the mvc or usability less accesibiltiy, off course only in my experience, and have an big ego cause they presume to be both back or front. I respect all the people that studied for but since i do for my self the code, the reclaim of any idea From the design is totally imposible for then its over, But sometimes dont apreciate the time that i spend thinking how solve my original design idea in code and only with css, and thats another, i don know very well jquery or js but always they want to use it, why? Cause Of that even i sometimes say that im like a developer aswell i receive bad words, so i prefer to call myself frontend designer. Sorry fof my english is bad i know.

  • http://adriancarballo.me/ Adrian Carballo

    Hi, I’ve been looking for somebody willing to invite me to post my work on dribble.com. Anyone here, please? https://dribbble.com/adr_ca