Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

Oh No! Spaghetti Code!

Fiona Chan at South 2013
  • CSS
Sign up for Conffab Free to watch this and hundreds of other videos for free
  • Details
  • Keypoints

Remember the (painful) times when you had to use !important just so you could quickly override some styles you inherited? Or the times you stared at a giant stylesheet and couldn’t figure out where everything is? Large, unmaintainable CSS code is a common problem for many websites. It is often neglected because things can still somehow work even when the CSS is really bad! But not only does this slow down performance, it also inhibits developers from producing quality code. But if you start your site with a solid foundation, developing a large scale website with maintainable CSS is actually not so hard. In this talk, I’ll share with you some of the lessons I’ve learnt from building and maintaining large CSS files, and how Sass has helped to make that job easier.

Going to talk about how not to end up with spaghetti code.

“A small part of me dies every time I have to write !important just to get something to work.”

Process:

  1. Build the simple components first, because the more complex ones are made up of the simple ones. Fiona’s base component is .box, a box of content.
  2. Naming your component. Naming is hard! Don’t tie the class to the content, do presume you’ll reuse the component. So name things in the abstract – “feature” rather than “breaking news”. But not box1, box2 as that’s too hard to remember. Find the middle ground.
  3. Components should just work. Example is .clearfix so that boxes with floated elements clear as expected. Can be injected into your base classes using preprocessors, rather than using an actual class in the DOM. Uses placeholders and extend. But, there’s the caveat not to over-use the powerful features of preprocessors.
  4. Namespacing – prefix classnames to give them a scope. This avoids clashes. Just because you CAN nest in SASS, doesn’t mean you automatically should.
  5. Communication – set a code standard. It must be written down, communicated across the team, ensure new starters know about it. Make this a living style guide – use real code to document your design requirements and implementation.
  6. Collaboration – designers and devs need to work together to get the greatest value, work out where there is unnecessary repetition and remove it.

You may also be interested in

Thumbnail for CSS: Code Smell Sanitation

CSS: Code Smell Sanitation

Fiona Chan

Thumbnail for The Declarative Power of CSS Selectors

The Declarative Power of CSS Selectors

Fiona Chan

Thumbnail for Once More with Feeling

Once More with Feeling

Tim Kadlec

Thumbnail for CSS Grid Layout

CSS Grid Layout

Rachel Andrew

Thumbnail for Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Stephanie Rewis

Thumbnail for The Power and Responsibility of Unicode Adoption

The Power and Responsibility of Unicode Adoption

Katie McLaughlin

Thumbnail for Does Your Web App Speak Schadenfreude?

Does Your Web App Speak Schadenfreude?

Greg Rewis

Thumbnail for CSS: Code Smell Sanitation

CSS: Code Smell Sanitation

Fiona Chan

More presentations from South 2013

    Thumbnail for Making Web Apps as Smooth as Native

    Making Web Apps as Smooth as Native

    Andrew Betts

    Thumbnail for How the Internet of Things Changes How We Design

    How the Internet of Things Changes How We Design

    Alexandra Deschamps-Sonsino

    Thumbnail for I Yield For Generators

    I Yield For Generators

    Adam Ahmed

    Thumbnail for Connected UX

    Connected UX

    Aarron Walter

    Thumbnail for The Future of JavaScript: ECMAScript 6

    The Future of JavaScript: ECMAScript 6

    Axel Rauschmayer

    Thumbnail for Validating Forms with the HTML5 Pattern Attribute

    Validating Forms with the HTML5 Pattern Attribute

    Chris Lienert

    Thumbnail for Functional Javascript

    Functional Javascript

    Dhanji R. Prasanna

    Thumbnail for The Z Dimension

    The Z Dimension

    Glen Maddern

Conffab
  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up

© Conffab 2025