Oh No! Spaghetti Code!
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:
- 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.
- 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.
- 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.
- Namespacing – prefix classnames to give them a scope. This avoids clashes. Just because you CAN nest in SASS, doesn’t mean you automatically should.
- 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.
- Collaboration – designers and devs need to work together to get the greatest value, work out where there is unnecessary repetition and remove it.
