25 Pro Tips for Improving Your CSS Workflow
25 Pro Tips for Improving Your CSS Workflow
Writing CSS can be messy, slow and take ages to debug when you’ve got a whole lot of design and layout changes going on in one stylesheet.
So let’s get straight to it: I’ve compiled some of the most useful tricks and techniques below to help improve your efficiency when coding CSS. It may even provide a handy reference for when you’re developing your next project.
Let’s dig in.
1. Bundle Properties
If you find you’re writing the same properties over and over, see if you can truncate them by removing unnecessary classes and IDs. Then, add all the common properties into the remaining sections.
If you can pair down your sections, you can help create a more efficient file to run and it’s a lot quicker to code as well. This is also where planning your stylesheet beforehand really comes in handy.
2. Use IDs for Constants
The unfortunate limitation of CSS is that you can’t define constants like you can in PHP. Constants are terms you can define once that hold the applicable data you want to use.
You could stop typing several styles over and over and only type one term that you set for your design block. Since CSS wasn’t created to program your site, but only to act as an interior designer so to speak, it doesn’t have the capability of creating constants.
Still, it’s something that would be so useful, especially in the event that bundling your properties just isn’t going to work out for you.
What you could do is create an ID that includes all the styles you need. When you actually need to use it, just add the selectors you need to the declaration. It definitely makes writing CSS a whole lot quicker.
3. Comment Your Constants
Sure, CSS doesn’t include constants, but that doesn’t mean you still can’t write a reference for what would otherwise be constants. Why not list your common styles in a multi-line comment?
How you type it out is up to you, but you can place it after your table of contents so it looks similar to this example:
This is particularly helpful for me since I often forget my color scheme half way through my stylesheet. Having a reminder close by helps speed up the coding process since you know exactly where to look and you won’t have to search through a mountain of CSS to find the point where you last referenced a certain style.
4. Group Selectors
Why stop there, though? While you’re at it, why not group as many selectors as you can together? You could potentially save yourself from typing out even more of the same styles.
While this might not work in all cases and the above example probably won’t apply to your specific needs, it can serve as a reminder for the next time you code some CSS to help you save time and save on space.
5. Use a Preprocessor
A CSS preprocessor is an extension of the regular CSS language that helps you code faster while also adding a lot of other features that wouldn’t normally be available for you to use.
The most common CSS preprocessors for WordPress are SASS and LESS and you can learn how to use them both by checking out our CSS resource list we recently published. In it, there are many links that are included for learning everything you need to start using SASS and LESS right away.
CSS preprocessors are gaining a lot of steam and it’s not difficult to see why once you see just how fast you can create your stylesheets with them.
6. LoVe/HAte Pseudo Classes
As CSS expert Eric Meyer explains, listing your link styles in a certain order is important. Otherwise, you could end up with link styling that doesn’t work the way you had hoped.
You can combat this and save yourself time not having to troubleshoot in the future by following a simple order for link pseudo classes. You can remember this order with the mnemonic device LoVe/HAte and it goes something like this:
Unvisited link styles are listed first, then visited, hover and active links follow. Truthfully, unvisited and hover links can be interchanged, but then the order would be a bit more difficult to remember.
Unfortunately, this doesn’t include the focus pseudo class, but it can be placed before the active link styles. There’s also a mnemonic phrasing that includes this pseudo class and it’s LoVe’s Hurts Fade Away:
7. Use Shorthand CSS
If you want to code with speed and efficiency, but without the steeper learning curve of using a preprocessor, you can code with CSS shorthand. The rules are a lot simpler to learn so you can get started using it quicker.
With CSS shorthand, you can condense multiple lines into one, without losing on functionality. For example, below are three lines defining a border style:
They can be condensed into one line like this:
You can probably imagine how much time you could save not having to write a whole bunch of extra properties and values so I’ll cut to the chase: W3C has an excellent reference for CSS shorthand. It includes everything you need to know and it’s a short article so you can keep it bookmarked for quick reference later on.
Not only is it a time saver, but it saves on some space as well. The only downside is it can be difficult for others to understand when they’re reviewing your CSS.
If you’re writing a stylesheet for a theme or plugin you’re planning on releasing to the public, it may be a good idea to limit the amount of shorthand you use, especially if you’re going to submit it to the directory.
On the other hand, if you’re coding for yourself or to create a premium theme or plugin, using CSS shorthand is more likely to be the perfect solution to help you speed up production.
8. At Least Use Shorthand for Colors
CSS shorthand may not always be the best solution for you, but you can adopt one of the shorthand rules for color codes.
If you find you’re using a hexadecimal color code where the hex values for each channel are the same, you can shorten it.
Simply put, if you look at a color code as having pairs – the first and second value, the third and fourth, and the last two values – where each pair have the same character. you can omit one of them from each pair.
It might not save as much time as adopting shorthand fully, but the seconds you save adds up and since everyone familiar with CSS can still understand this shorthand code is a color, you don’t have to worry about your stylesheet not being clear.
9. The TRouBLed Shorthand Order
If you do decide to use CSS shorthand, just remember the mnemonic device TRouBLed for listing margins, padding and borders so you can help prevent errors and the need for troubleshooting.
The capital letters stand for top, right, bottom and left. This is the order you should enter your measurements when you’re styling an element.
Simple syntax errors can slip your mind and make troubleshooting trickier. I know it does for me since I tend to plan for the worst case scenario and forget it could be a tiny error I previously overlooked.
10. Don’t Use Units for Zero Values
Sure, for most values when listing properties you need to add a unit of measurement, such as pixels or percent, but not always. With the exception of line height, values for properties need to have a unit directly after unless the value is zero.
Don’t waste your time typing a unit is you don’t need it. While it may not save you loads of time by itself, all these speed tips can save you quite a bit of time altogether.
11. Don’t Redeclare Inherited Values
Don’t re-type something you already have down. It may seem like a no-brainer, but that’s exactly what you would be doing if you decide to redeclare inherited values.
Web developer Roger Johansson explains in his top CSS tips that many child elements inherit their parent values. This being the case, there’s no need to add the same values twice.
12. Links Don’t Need Quotes and Spaces
When you’re adding a URI to your stylesheet, the regular and proper format includes spaces and either single or double quotes like in this example:
After url( there is a space and quotations and after the URL, there’s another set of closing quotations and a space. These are actually optional.
To save you a bit more time and space, this same line can be written like this:
13. Put Standards Compliant Browsers First
When you’re writing your stylesheet, it can save you a lot of time if instead of trying to think of workarounds for all those pesky browsers that won’t play nice, write your CSS for all the standards compliant browsers first. From there, work your way back to the others.
That way, it becomes a lot more likely for your site to be as up-to-date for the current standards as possible. Since you may sometimes find your modifications for older browsers rely on what styles you write for modern browsers, it just makes sense to start with coding for modern browsers first to save you from having to change things later on.
14. Hide Your Stylesheet from Old Browsers
Older browsers won’t be able to process and display much of your CSS a lot of the time. Since few people use them anymore – and that number’s only getting smaller by the day – it doesn’t make much sense to create some specific styles fit for those older browsers. It’s increasingly making more sense to just hide modern styles from older browsers.
Importing was introduced in CSS2 so if you import your stylesheet into your pages, older browsers that can only process the original CSS such as IE4 won’t be able to see your stylesheet. You can basically hide your modern styles to help prevent many compatibility issues with those older browsers.
Here’s how you can hide your stylesheet with the import rule:
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
Keep in mind that the path to your stylesheet may need to be updated according to your particular setup, but this example should, at least, give you a start.
There are many articles out there that provide this tip, but this tip isn’t necessarily the right option for your site. The thing is, you’re better off following the WordPress Codex and using enqueue to load your stylesheets in your functions.php file.
Luckily, Daniel Pataki already published a post here on WPMU DEV to teach you exactly how to properly enqueue your styles. So ditch the import rule and enqueue instead.
15. Reset Your Margin and Padding
Since all browsers have their own set of default settings for pages and they aren’t all the same across the board when it comes to margin and padding, it’s a good idea to start with a clean slate and, in a manner of speaking, erase or ignore what those browsers have set and start from margins and paddings of zero. This is called a reset.
Before you start adding your own styles, enter in a reset first. It saves you time trying to enter styles to compensate for every browser.
A simple reset can look something like the example below, but there are many out there you can use such as Eric Meyer’s Reset and which one you use is up to you and your specific needs.
You can certainly tailor this to your need by adding your own selectors and in fact, I recommend it since it won’t necessarily be ideal for everyone.
16. Don’t Use Conditional Comments for IE
There are many articles floating around on the internet that tell you to use Microsoft’s conditional comments for correcting compatibility issues in earlier versions of Internet Explorer.
This is all well and good, except these conditional comments are not deprecated. Instead, use enqueue in your functions.php file to load IE specific styles.
Here’s an example straight out of the Twenty Sixteen theme to give you an idea of how to make it happen:
This is the most current way to load separate CSS files you created to deal with older browser rules.
17. Create Your Pages First
An easy way to ensure you can code faster is by leaving out unnecessary elements in your stylesheet and you can do this by first fleshing it all out. Instead of coding your stylesheet then having to go back and edit it once you actually create your pages, you can save time by coding your layout and creating a markup in your WordPress header, footer, and all the different page PHP files.
It’s even more efficient than planning your layout and design by creating a table of contents for your stylesheet so it’s a good idea to work out your other files first.
18. Use the Right Editor
Everyone certainly has their favorite editing programs for writing code, but not all of them can have you working more efficiently. When I first started out, I coded pages through the control panel of my hosting account.
It was hugely inefficient in so many ways right down to the fact that I couldn’t press “Tab” on my keyboard to create indents. That key had no effect. Needless to say, my sites looked horrible and so did my code.
The memory makes me shudder just thinking about it and if you’re in a similar situation in that you aren’t particularly fond of your editor, take a look at Sublime Text Editor. There’s a free and premium version for Mac, Windows and Linux, and it makes coding super fast. I’m sure it would make even the Flash jealous.
You can change all instances of the same classes and IDs you use by just editing one of them, with just a couple clicks you can minify and upload your files to your server, see results of your code without refreshing your browser, instantly optimize your code and a heck of a lot more.
It’s definitely an editor that’s worth taking a look at, but no matter what software you use to code, make sure it works efficiently for you.
19. Analyze Your CS
It’s important to look over your stylesheet once you’re done to make sure it’s as clean and lightweight as possible. This can be a pain, though, especially since it can take quite a while to do.
Fortunately, there are free tools out there such as CSS Analyzer, CSS Dig and CSS Lint. All you need to do is enter your code, select some options and click a button to instantly get a report card for your CSS code.
CSS Lint even promises to be mean and hurt your feelings all in the name of progress and helping you see where you can improve your coding skills. At the end of the day, that’s all that’s important so I suppose we should just make like Taylor Swift and “Shake it Off.”
Either way, these are all easy options available to help you make quick work of editing your stylesheet to make sure it’s as structurally sound as possible.
20. Use a CSS Cleaner Tool
When you’re writing your stylesheet, consistency is key. Whether or not you choose to include or omit optional spacing or quotations is up to you, but it’s important to be consistent throughout your stylesheet.
For an easy way to make sure you’re consistent, there’s a free online tool called Format CSS where you can enter your valid CSS, pick some options, then click a button to instantly clean up your CSS to make sure it follows the same formatting throughout.
It saves you from painstakingly going through each line of your code to manually check for formatting errors. Sweet deal.
21. Don’t Write Mixed Case IDs and Classes
HTML and XHTML are case sensitive so many elements on your site can break easily if you forget this simple rule. Troubleshooting can get much more time consuming if you’re searching for tiny syntax errors. For me, this can be downright exhausting.
All this extra time spent troubleshooting can be avoided if you simply don’t use capital letters in your CSS IDs and classes.
Instead of using mixed case selectors such as in the example above, try making them all lower case:
It’s an optional tip for sure, but it can be easy to make a mistake later so you can consider this as a sort of preemptive strike.
22. Check for Proper Syntax
On that note, as you’re coding away, be aware of your syntax and make sure it’s correct. Sometimes, just a simple character can break many elements of your design so rather than expect the worst and try to rewrite the section that seems broken, check to make sure everything looks right as you go.
For example, check to make sure your IDs follow the proper naming structure: They can’t start with a hyphen or a number and can only consist of letters and numbers, both lower and upper case.
This is a big one for me since I used to find that I’d rather rewrite everything than spend much time figuring out why something didn’t work, but honestly, it’s a lot quicker to double check your syntax as you write your stylesheet than having to go through it later.
It can be handy to have a reference on hand for this, especially since memorizing everything is quite difficult. Mozilla has a great developer’s quick reference sheet for CSS syntax that you can bookmark to help you with this part of troubleshooting.
23. Validate Your CSS
As I already started mentioning, before you get heavy handed with your troubleshooting, you can instantly check your syntax and CSS by validating it. This is a super quick way to make sure any errors in your code aren’t structural.
The W3C has a free online CSS validator. You just need to upload your CSS file and in the click of a button, you can validate your code. I’m not sure it can get any easier than that.
24. Update Whenever Possible
This may be an obvious tip for most people, but it bears repeating since the WP Tavern has reported statistics for plugin updates. They found that nearly half of the plugins in the WordPRess Directory aren’t updated after two years.
Of course, there are many reasons for this including a lack of time or funding, but it’s hardly an optional step. Since updates to the world of WordPress are numerous and frequent, it’s not a question of when there could be changes that may break your site, but when.
It’s important to keep yourself up-to-date in the latest coding standards and one of the best ways to do this is to sign up for our free WhiP newsletter since we condense all the latest WordPress news into an easily digestible post. Some of the news you read may not go down as easily as a cookie, but at least you know when you need to update your CSS and other files.
25. Use a Framework
All these tips can potentially save you a bunch of time, but sometimes, it’s just way easier and faster to use a framework. Since most of the nuts and bolts are already laid out for you, there’s no need to get as heavy-handed with coding.
There are many frameworks out there like Twitter Bootstrap and as for WordPress theme frameworks, there’s tons of those as well including our own Upfront theme. For a list of other theme frameworks, check out one of our other posts called Choosing a WordPress Theme Framework – The Ultimate Guide.
For a list of the top resources for learning CSS from start to finish including learning how to use preprocessors and Bootstrap, check out one of our other posts: A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources.
What are your best tips for a faster workflow when coding CSS? I would love to hear your thoughts so feel free to share your experience in the comments below.