
Code in Style

#header { width:500px; height:250px; }By following this commonly used technique your stylesheet will be more organized and easier to code. The following techniques will all be aided by making sure that your layout is consistent throughout your CSS files.
Organize by Location

CSS Comments

/*
and then be sure to end the comment with */
. Crucially, anything within the comment, be it code or text, will not be parsed by the browser, which makes CSS comments very useful for leaving notes and descriptions relating to various parts of the stylesheet.
Perhaps a further two uses for CSS comments could be to leave comments for your clients, so should they wish to make further edits to their site in future they have a guide in place to help. Also, there may be differing styles for the same ID or class that you wish to preserve for potential use or for testing. Instead of labeling IDs and classes with a 2 at the end, e.g. header2
, stopping that styling from being parsed simply wrap what would be header2
in /*
and */
.
As well as keeping your stylesheet more organized, as using the ‘2 technique’ can easily become messy, this technique also aids in the creation of different versions of styling within the stylesheet in an unobstructive way with ease of redeployment (copy and paste rather than changing numbers and deleting old styling).
However, whilst CSS comments are very useful it is also important to bear in mind the size and length of the stylesheet and to balance accordingly. Comments should not take up more space than the actual CSS; they should be short and to the point. It is also important to bear this in mind in relation to different versions. Do you really need all the versions you have saved within your stylesheet? Could you save a duplicate stylesheet elsewhere? Having multiple versions of styles within your stylesheet can become confusing so consideration of alternatives is crucial, such as saving duplicate files.
Avoid Duplication
Once the stylesheet is structured in an accessible way it can be easy to pick out unnecessary duplications within styling. Due to the nature of CSS, IDs and classes automatically inherit styling from their parent which removes the need to double up on styling. Perhaps the easiest technique is to define a number of key styles at the start of the stylesheet. Defining universal styles for links and text is helpful and removes the need to constantly define styling for every ID and class. Notably, this is also an effective way to maintain a consistent style across a website and has a positive impact on reducing the size of the stylesheet as well. Using a tool such as Google Chrome’s Inspector, it is possible to see which styles are being inherited and from where, which further helps in the elimination of unwanted duplications within your stylesheet.Use What You Need
Following on, to further streamline your CSS consider what CSS classes you are implementing. Do you need to use them all? It is easy to get carried away and define classes that you to not directly need but think you may do in future; in order to keep your CSS stylesheet streamline, small and organized only use CSS classes that are integral to your website’s functioning. Only code what is needed. In order to achieve this avoid duplicating styles, as stated, and remember to delete unused styles and those that are no longer relevant.Conclusion
By following these simple techniques it is possible to create better organized and smaller CSS files that are easy to navigate and edit, both now, and in the future for yourself and your clients. Have any great tips for keeping your CSS organized and streamlined? Let us know in the comments!David Pickett
David Pickett is a musician and web designer from the UK. Follow him on twitter.
Read Next
30 Most Exciting New Tools for Designers, 2023
As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…
3 Essential Design Trends, December 2023
While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…
10 Easy Ways to Make Money as a Web Designer
When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…
By Louise North
The 10 Most Hated Fonts of All Time
Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…
15 Best New Fonts, November 2023
2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…
By Ben Moss
Old School Web Techniques Best Forgotten
When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…
By Simon Sterne
20 Best New Websites, November 2023
As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…
30 Amazing Chrome Extensions for Designers and Developers
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
Exciting New Tools for Designers, November 2023
We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…
The Dangers of Doomscrolling for Designers and How to Break Free
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
By Louise North
From Image Adjustments to AI: Photoshop Through the Years
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
3 Essential Design Trends, November 2023
In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…