Web Directions

Conffab

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

Oh No! Spaghetti Code!

Fiona Chan at South 2013
  • CSS
Sign up for a free membership to watch this and hundreds of other videos
  • Details
  • Slides
  • 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 The Declarative Power of CSS Selectors

    The Declarative Power of CSS Selectors

    Thumbnail for CSS: Code Smell Sanitation

    CSS: Code Smell Sanitation

    Thumbnail for Design leadership for introverts

    Design leadership for introverts

    Thumbnail for Web app installs: Why, when, how

    Web app installs: Why, when, how

    Thumbnail for Create Impact with CSS Filters

    Create Impact with CSS Filters

    Thumbnail for The Latest in Browser Developer Tools

    The Latest in Browser Developer Tools

    Thumbnail for WebVTT & Video Accessibility

    WebVTT & Video Accessibility

    Thumbnail for Accessible SVGs

    Accessible SVGs

More presentations from South 2013

    Thumbnail for CORS: Cross Domain Requests for Javascript

    CORS: Cross Domain Requests for Javascript

    Thumbnail for Hack Yourself First

    Hack Yourself First

    Thumbnail for Future Perfect Tense

    Future Perfect Tense

    Thumbnail for The Future of JavaScript: ECMAScript 6

    The Future of JavaScript: ECMAScript 6

    Thumbnail for Making Web Apps as Smooth as Native

    Making Web Apps as Smooth as Native

    Thumbnail for Validating Forms with the HTML5 Pattern Attribute

    Validating Forms with the HTML5 Pattern Attribute

    Thumbnail for People Not Users

    People Not Users

    Thumbnail for The Z Dimension

    The Z Dimension

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

© Conffab 2023