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

• codeguide.co
• wtfhtmlcss.com
• primercss.io/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.