How to avoid chaos in your style sheets

If you’re a designer, you’ve no doubt come across CSS (Cascading Style Sheets) many times before. Maybe you’ve heard your colleagues speak about how powerful they can be for styling websites, decreasing page load times, or saving web developers precious time. (It’s certainly less of a headache than styling each page individually within the HTML code.)

CSS can also be a lifesaver when you want to rebrand your whole website, since updating your style sheet will apply the changes across the board. CSS can be incredibly valuable to both developers and designers when working together to create beautiful, dynamic websites.

“Keeping a clean CSS file helps you implement design ideas without delay.”

But if you’re still not exactly sure how knowledge of CSS can benefit your work, or you’re simply not confident about how to use it, then keep reading for a step-by-step guide to CSS, and how to keep your style sheets in order to benefit your designs and clients alike.

Related: Learn how to design with your developer in mind

1. Follow fashion—use frameworks

Just as fashion icons set the tone for what will be “in” this season, tech trendsetters influence the style of thousands of websites. How?

Web developers create and publish frameworks, a set of rules for common website elements. This gives other developers a starting point for their website design.

Frameworks can help you get a decent-looking website up and running quickly. It’s like trusting that you’ll look okay in anything you pull off the rack in a fashionable high-end retail store—you don’t want your website to be a fashion faux pas akin to wearing a neon green shirt with purple Wellington boots.

A framework is a reliable base, but you should still experiment. Tweak the colors, fonts, etc. You never know—your style sheet could become the next popular framework. After all, who knew ripped jeans would come back in style, or even become fashionable in the first place, right?

2. Strive for simplicity

You’ll find that as a website grows, you’ll develop a pretty long, scrolling list of various elements and CSS rules. Some of the rules might overlap or override each other eventually (in that case, usually the more specific rule will win).

You can end up with a lot more code than you expected, especially considering the different variations of a rule you need for different browsers and screen sizes.

“Influential style frameworks can set trends for a generation of websites.”

Sooner or later, you’ll feel like you’re splashing through endless puddles of CSS code, struggling to find the exact rule for the exact section you want to edit.

It’s good practice to always check before adding a new style rule—maybe an existing one could apply.

3. Structure your file

There are many ways to refactor your CSS code to make it easier to navigate and use. Some of the easiest methods are the most effective and have the most mileage. Here are some of the quickest ones:

• Keep your spacing uniform: Maintain the same spacing between rules and within declarations throughout your file so that it’s easier to read.
• Use semantic or “familiar” class/id names: Instead of using a class name like “bottom_menu”, try using the semantic tag “footer”. Or when you have an image in your “contact” section, make sure you’re using a class on your image like “contact_image”.
• Keep it DRY (Don’t Repeat Yourself): Ideally you want to repeat as little of your code as possible. Do you find the declaration “background-color: #000” repeated throughout your CSS file? Consider typing it once and instead, using multiple selectors on the one declaration.
• Put your tidiness to the test with these tools: Run your CSS through CSS Lint or W3C—these will help to parse your CSS file correctly, and highlight problem areas. Your web browser’s developer tools are also extremely useful for pinpointing specific elements on your website and using the area as a sandbox to experiment with different styles and positioning.

4. Go beyond the basics

If you have some programming skills, you can use more advanced CSS options like Syntactically Awesome Style Sheets (SASS) or LESS. With these pre-processors, you can take advantage of more complex code options like variables, nesting, mixins, and functions to further clean up your CSS and avoid duplicates.

CSS is a great tool to improve the presentation of your website. These visuals are what create your brand and your identity, and they influence the UX of your website.

But with great power comes great responsibility. Remember to keep your CSS organized. Just as keeping a tidy closet is important so you can find your favorite neon green shirt without hassle, keeping a clean CSS file will help you implement those spontaneous design ideas without delay.