Grow your CSS skills. Land your dream job.

Writing Better HTML & CSS (Slides from FOWA London)

Published by Chris Coyier

I'm just back from London where I spoke at the Future of Web Apps. My talk was titled, rather generically, Writing Better HTML & CSS. Slides pale in comparison to real talks, but I still like posting them in case there are some small useful bits:

It was a three-part talk. I started high-level talking about how Wufoo handles CSS, which is a topic I'd love to hear more people talking about (i.e. medium/large companies plan / approach / architecture when it comes to front end resources). Then I got mid-level talking about how we should write less specific and more gentle CSS selectors to make our lives easier by not fighting ourselves. Then I got all nuts-and-bolts by putting a modified version of my pseudo elements talk at the end.

Also, I embedded the slides above from Speaker Deck, a very nice and clean web app from the Ordered List team for sharing slides.

Comments

  1. Benjamin Steyaert
    Permalink to comment#

    Thanks for the share. Any plans to post the video? Having your words and thoughts along with the slides would be very helpful.

    • Maybe, but probably not on video. Don’t worry though I’ll probably do this talk a few more times in the future and it’ll get better and maybe one of those will be publicly recorded.

    • Benjamin Steyaert
      Permalink to comment#

      Right on Chris, thank you. I saw the Holy Grail image (and others) and was dying to hear the reaction to your stage presence.

  2. Johnathan
    Permalink to comment#

    Thanks for sharing.

  3. Kirk
    Permalink to comment#

    This was fantastic! I’d love to see or hear the accompanying video/audio. Thanks, Chris!

  4. Conor Haining
    Permalink to comment#

    Really enjoyed that. Certainly re-thought sometimes now

  5. Permalink to comment#

    Agreed, the video would be helpful but something tells me that’s outta your hands. :)

    Still, I managed to take a few things away from the slides alone. I may have fallen in love with pseudo elements. :D

  6. Not wanting take a very deep dive, and I may be wrong also, but from what little I can read in those slides it appears to me like advices for those still struggling to put dynamic server pages to use.

    I mean, 1 way to be efficient in 200 places is to make use of any server side language to dynamically generate your code.

    Replacing an element with a class and some CSS added content adds to the complexity and the end results are questionable at best.

    It just looks to me like forced thinking in order to bring something different to the table. Well, different is not always better. It’s certainly doesn’t look like it’s cleaner either. To me :)

    • Is “Buttons with icons” an unfortunate study case for what you’re trying to relay?

      Aside from the obvious differences, why is CSS :before better than CSS background?

    • The background for buttons is a gradient. You can’t add an additional background image to an element via an add-on class. The syntax for this is coming, but it’s not possible yet.

      As for your first comment, I don’t understand what you’re talking about. It might be difficult to understand my points with the slides alone.

    • Ah, got i now. You’re solving a multiple mixed (image + gradient) background problem there.

      I’m not convinced. You’ve falsely created the problem in the first place by choosing the path of adding the img element to support your gradient choice of background for the anchor. I wouldn’t do it like that so I wouldn’t have this problem to solve in the first place.

      Also, your IE7 7% will see none. Meanwhile, using an img and a custom IE .Microsoft.gradient will make for a complete IE treat.

      About my first comment: only those not using some kind of server side language need to make 200 mods in case of changing in style. Those using a server side support language don’t have this problem since their code is not static.

    • HTML is HTML. It doesn’t matter if it’s generated by some server side fanciness or not. If that server side fanciness generates 200 lines of HTML that don’t need to be there, that’s still bad, and if you can abstract it away to CSS, that’s good. I know what you mean though, it’s less of a big deal and easier to fix.

      The over-arching concept of the pseudo elements part of the talk is that anything that is “designy fancy” that doesn’t hold semantic/content value is a fantastic thing to get OUT of the markup and IN to the CSS.

    • Lemme see:

      You’re saying that by generating *content* with CSS you’re writing less HTML for *presentational* purpose ?!

      I’m still saying that you’re not tackling the problem the best way :)

      Or, at least, that your img solution that you’re trying to fix it shouldn’t even be thought of as a viable one in the first place.

    • 1. Generate HTML content with CSS: a possible clearer markup source; the additionally created markup ends up in DOM (well, kinda, but in the future things may change that too); very muddy waters about the separation between coding and content&style

      2. Generate HTML content with a server side: a definite clearer markup source; added functionality; the additional dynamically created markup ends up in DOM; a clear separation of coding and content&style

      Provided still that using an img to solve a problem only to create another would be a viable solution ;)

  7. Out of curiosity, did you wear the same shirt?

  8. Jesse
    Permalink to comment#

    That was great, I hope there is a video or audio coming.

  9. Permalink to comment#

    Love the sense of humor that permeates all of your work, Chris. Web developers can be (this isn’t necessarily true most of the time, but some of the time anyway) rather dry, but you certainly aren’t!

  10. Permalink to comment#

    Like everyone else i would love to hear the audio as you have a unique humor about yourself, apart from that i much enjoyed the slides.

  11. SpriteCow.com – I could not remember, thanks!
    Nice graphic slides. Good work!

  12. OMG! It’s pretty sophisticated. I probably implement a similar strategy in .NET and IIS. Chris, your new website theme has only one stylesheet attached. Has you used the same technique here too?

  13. Chris, what are the chances of getting my hands on that AutoVersion.php file to tinker with?? The idea of it handling the myriad of .css files that are sometimes needed on my projects without having to create one giant messy codeblock in my html would be nice. Do you know if it Grubs through the files and gathers the individual css files or do you have to hardcode them in?

  14. Did a search on AutoVersion.php and came up with some useful info. “compress css on the fly” too. GREAT ideas here Chris (as usual) Thanks.

  15. Pablo Mendoza
    Permalink to comment#

    Should we hate IDs selectors in the future?

  16. Wow Chris. As always your info is top notch! I never would have thought to use :before & Content to make a bad ass button! Are you going to speak at all up in Canada? :) PS – The kid picture of you is pretty bad ass.

  17. Permalink to comment#

    useful article, thanks.

  18. MrF
    Permalink to comment#

    Chris, can you post a link to AutoVersion.php? Thanks.

  19. Joseazr1987
    Permalink to comment#

    Someone has the AutoVersion class that is mentioned in the post?

  20. Alex Batista
    Permalink to comment#

    Where is a like button? Thank you for sharing!

  21. +1

    This one was great and entertaining! :o)

  22. Permalink to comment#

    I’m also interested in nabbing both your version of the autoversion php function (does this compress the css too?) as well as the audio from your presentation.

    I watched your talk on youtube about the :before and :after psuedo elements so I understand the slides a bit better now, but the audio would be great.

  23. PVieira
    Permalink to comment#

    Is there a tutorial step-by-step for what you did with the .htaccess file in order to have just the necessary css files within each page?

  24. Adding content using pseudo elements is blowing my mind. Great slides, Chris – wish I could have been there!

  25. Sweet! Thanks for sharing. Learned lots. Now to practice and apply what I have learned.

  26. Permalink to comment#

    Thanks for sharing! Great job with that presentation. I’d love to be this year at FOWA but finally my company didn’t pay it for me. :P

  27. Charbs
    Permalink to comment#

    Love slide 55! Never ever thought i could include an image path in the ‘content’!

  28. Jenny Olsfen
    Permalink to comment#

    Hey Chris, awesome slides. We’ve been tinkering with breaking up our css files and using an auto-versioning script. Any chance you could publish it on github, that would be truly awesome! Thanks again, cant wait for audio or video for this presentation.

    Jenny

  29. Jenny Olsfen
    Permalink to comment#

    Forgot to mention that id also love to see the Smarty autoversion function you created. Thanks chris!

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