Creating a well-managed set of CSS codes can be a challenge. As technology evolves, it's not really easy to say if you're doing the right CSS practices or you're just messing up the code and compromising the quality of your website on different browsers.
Through practice, you should be able to avoid CSS errors. So, to give you a guide on the dos and dont's when writing CSS codes, we listed below the CSS best practices to follow as well as the bad habits to avoid. So, get ready and let's get started.
CSS Best Practices
Use CSS Reset
Browser inconsistencies are one of the biggest problems of front-end development nowadays. Styles like margins, paddings, line heights, headings, font sizes and so on may look different on different browsers. The goal of a reset style sheet is to reduce browser inconsistencies by providing general styles that can be edited and extended.
One of the great examples for a reset CSS stylesheet is normalize.css, a modern HTML5 CSS reset. All you have to do is include it before your own style definitions in your HTML file under the Head section. Otherwise, these styles will override your own style definitions.
Provide Style Sheet Information
Put a Title, Author, Tags, Description, URL information and so on on your stylesheet. This will give the user/developer a reference person to contact whenever they need support regarding your creation.
2 | Theme Name: Simple Parallax Website |
3 | Description: Simple Parallax Scrolling Effect |
6 | Tags: Parallax, Website |
Organize Elements on the Stylesheet from Top to Bottom
Usually for beginners, they put the elements on the stylesheet according to what they want to put first. But this is not a good practice for CSS code structure as it will give you a hard time finding CSS code elements on the stylesheet. Ordering them from inclusive styles (such as body, H1, p, a and the likes) followed by a header to a footer will make a lot of sense.
As an example consider the code structure below.
1 | /****** General Styles *********/ |
8 | /****** Header Style *********/ |
11 | /****** Navigation Style *********/ |
14 | /****** Footer Style *********/ |
Shrink CSS file size with CSS Compressors
It's really a great idea to shrink the CSS file size as it will remove white spaces, line breaks and remove redundant CSS styles. Through this, you can help browsers to speed up the loading of your CSS codes. Using tools like CSS Compressor and CSS Compressor & Minifier can make this happen.
Group IDs and Classes That Fall under the Same Element
If you have an element that contains different IDs and classes, you might want to group them to make them look organized and easy to find so looking for errors would not take time.
As an example, you have a class container that contains a div tag that has an ID of logo and another div tag that has an ID of icons.
4 | <div id="tagline">< /div></div> |
You can group them on your CSS code like this:
2 | container {width: 960px; margin: 0; padding: 0;}. |
3 | container #logo {font-family: Arial, sans-serif; font-size: 30px; color:red;}. |
4 | container #tagline {font-family: Verdana; font-size: 10px;} |
Use Annotations/Comments to Identify a Set of CSS
Another best practice for CSS coding is putting a comment on each group of CSS. This will make it easy for you to look for specific groups of CSS once you got in to some CSS errors.
1 | /****** General Styles *********/ |
10 | font-family: Arial, sans-serif; |
Structure Naming Convention
Using proper naming conventions on IDs and classes will make a lot of sense to your work. This will help your work easier and faster in case you need to add elements or redesign a website.
For instance, putting a class of title-red will not make sense when you change the color of the title so why not just put title instead. Always name your elements properly based on their use not on their properties such as what color or font size the element have.
Use Hex Code instead of Name Color
According to a performance test run by Sean Connon, Senior Web Developer at Alien Creations, Inc, hex codes seems to be just barely faster on 4/5 runs. Check out the test performance here. Therefore, we recommend using hex codes rather than name colors.
Use CSS Vendor Prefixed
If you are aware of the new features of CSS3, you must also know that each browser has its own specification when it comes to a specific style. That's why browser prefixes are being used to make sure that the browser supports the specific features/style you want to use.
Many designers and developers are having an error with this simple matter because they forgot to add vendor prefixes to target specific browsers.
The CSS browser prefixes are:
- Chrome: -webkit-
- Firefox: -moz-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
For instance, you want to add a CSS3 transition to your CSS code, you will just use transition property along with a vendor prefix. Check out the code below.
1 | -webkit-transition: all 1s ease; |
2 | -moz-transition: all 1s ease; |
3 | -ms-transition: all 1s ease; |
4 | -o-transition: all 1s ease; |
5 | transition: all 1s ease; |
Validate Your CSS
Using W3C free CSS Validator will let you know if your CSS code was properly structured. Another benefit of using it is it can point you the error on your stylesheet, thus, saving you more time on troubleshooting it manually.
Bad Habits to Avoid
Creating Redundant CSS
Using styles again and again for specific elements is not a good practice. It's very important that you clean your code and remove redundant styles. For example, if you have a paragraph tag and span tag that has the same font size and color, you might just group them using a comma.
Take a look at the code below.
BAD PRACTICE
1 | span {font-size: 12px; color: red;} |
2 | p {font-size: 12px; color: red;} |
BEST PRACTICE
1 | span, p {font-size: 12px; color: red;} |
Mixing Tag Names with ID or Class Name
Adding tag name to an ID or Class Name is not a good practice since it would slow down the matching process unnecessarily.
Check out the code below.
BAD PRACTICE
1 | p#container {color: red; font-size: 8px;} |
BEST PRACTICE
1 | #container {color: red; font-size: 8px;} |
Targetting Margin and Padding Positions Separately
Using separate CSS codes to target margin or padding either on top, left, right or bottom is not a good idea. Shrinking your code and combining it in one line will make your code more readable and makes the loading of the browsers faster.
BAD PRACTICE
For example, you have a div id of container and you target all the positions' margin separately. See the code below.
BEST PRACTICE
You can just combine all these styles in one line. Check out the code below.
1 | #container {margin: 10px 2px 5px 14px;} |
Using Underscores on ID or Class Name
Using underscores might give you unnecessary results on old browsers. It is highly recommended to use hyphens.
Take a look at the example below.
BAD PRACTICE
2 | left_col {margin: 0; padding: 0;} |
BEST PRACTICE
2 | left-col {margin: 0; padding: 0;} |
Final Words
Throughout this article, I provided you some tricks and guidelines on how to write a better CSS code and what mistakes to avoid. Keeping these rules while you're coding will help you implement clean codes and prevent you from having errors in the future. Make sure you validate your CSS code using W3C CSS Validator for a quality and error-free CSS code.
courtesy: http://www.1stwebdesigner.com/tutorials/css-best-practices/
