Front-end tips from Mark Otto at jQuery conference

Working in a busy London agency surrounded by amazing developers it’s easy to feel that you need to learn every language. What I took from the recent jQuery conference in Oxford is that it’s okay to be awesome at one thing and be super passionate about it.

I’ve started developing using Bootstrap created by Mark Otto and Jacob Thornton and was really excited when I found out that Mark Otto was talking at the jQuery conference.


It was a great talk and here are the 10 points I took away from him:

1. Simple Class Structure

  • Dashes separate important keywords
  • No chaining

2. Identifiable classes

  • Avoid common keywords
  • Abbreviate, but don’t create a new language

3. Base classes and prefixes

  • Isolate common styles
  • Avoid collisions with similar components

4. Minimize overrides

  • Avoid shorthand
  • Build for re-use

5. Keep it CSS-y

  • Keep it simple
  • CSS isn’t a programming language
  • Stick to variables, nesting, and mixins
  • Preprocessing can cloud vision

6. Minimize nesting

  • Mostly used for increasing specificity
  • Makes code more fragile

7. Formatting Matters

  • “Every line of code should appear to be written by a single person, no matter the number of contributors”.
  • http://codeguide.co
  • Positioning
  • Box model (display, float, width)
  • Typography (font, line-height)
  • Visuals (background, border, opacity)
  • Misc (CSS3 properties)

8. Document guidelines

9. Embrace utility classes

  • Single purpose
  • Obvious nomenclature

10. Automation and tracking

  • Linters and validators
  • Grunt and Gulp
  • Stats and reporting
  • cssstats.com
  • CI tools with GitHub


The three key takeaways

  • Simplicity conquers all
  • Focus on what’s between the curly braces
  • Document and evolve guidelines with your team

I realise it’s sometimes challenging to uphold some of these practices when we are working on a project. But if we can start adopting some of these we can write great modular CSS.


Leave a reply

You can use these tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  1. Natalie Loh says:

    @dryden, this was really helpful! Just added a bunch of links to my reading list from this post. What are your thoughts on using Sass? I find that I’m tempted to overdo nesting when I’m using it!

  2. Dryden Williams says:

    Hey Natalie,
    Really glad you liked the post, going to do a few more in the near future so checking back. Looking forward to seeing you for our Beer for an idea event very soon.

Sign up for the Manifesto newsletter and exclusive event invites