CSS Best Practices to Follow and Bad Habits to Avoid

Posted in Quick Tips, Tips, Tutorials6 months ago • Written by 13 Comments

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-and-bad-habits-to-avoid

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.

/*
Theme Name: Simple Parallax Website
Description: Simple Parallax Scrolling Effect
Author: Samuel Norton
Author URI: http://www.1stwebdesigner.com/
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.


/****** General Styles *********/

body {...}
h1, h2, h3 {..}
p {...}
a {...}

/****** Header Style *********/
#header {...}

/****** Navigation Style *********/
#nav {...}

/****** Footer Style *********/
#footer {...}

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.

css-compressor

css-minifier

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.

</pre>
<div>
<div id="logo"></div>
<div id="tagline">< /div></div>

You can group them on your CSS code like this:

.
container {width: 960px; margin: 0;  padding: 0;}.
container #logo {font-family: Arial, sans-serif;  font-size: 30px;  color: red;}.
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.


/****** General Styles *********/

body{
	margin: 0;
	padding: 0;
	width: 100%;
}

h1, h2, h3 {
    font-family: Arial, sans-serif;
	font-weight:normal;
	font-size: 55px;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0;
}

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.

hex-vs-colorname

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.

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
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

span {font-size: 12px; color: red;}
p {font-size: 12px; color: red;}

BEST PRACTICE

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

p#container {color: red; font-size: 8px;}

BEST PRACTICE

#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.

#container {
margin-top: 10px;
margin-right: 2px;
margin-left: 5px;
margin-bottom: 14px;
}

BEST PRACTICE

You can just combine all these styles in one line. Check out the code below.

#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

.
left_col {margin: 0; padding: 0;}

BEST PRACTICE

.
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.

34 Written ArticlesGoogle+

is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and Wordpress.

13 Comments Best Comments First
  • sascha fuchs

    Tuesday, February 11th, 2014 15:25

    8

    Sorry the most off your tips comes from the Stoneage. Today we build CSS more modularized and less static.

    +7
  • Ingo Malchow

    Monday, February 10th, 2014 11:05

    1

    While those tips are overall well described, i do find the section about resets slightly missleading, especially for newbies. normalize.css stands in contrast to e.g. the well known reset css from eric meyer.
    A reset just sets everything necessary to zero, that includes margins, borders, or some other browser inconsistencies to a sane value like line-height. From this you’d need to style it up again to whatever you have in mind.
    normalize.css goes a different route and gives elements a proper styling that could be usable already, without the need to reset them first. One example is
    abbr[title] {
    border-bottom: 1px dotted;
    }

    That might sound nitpicky, but semantically there is a difference between reset and normalize ;)

    +5
  • Yhiel

    Tuesday, February 11th, 2014 10:46

    5

    Great tips! I will surely use these tips on my workflow. Doing this properly will get you out of trouble. Thanks.

    +4
  • Surjith

    Tuesday, February 11th, 2014 08:13

    4

    RULE #1

    Avoid using ID in CSS.

    http://lmgtfy.com/?q=Avoid+using+ID+in+CSS

    [Please remove misleading content]

    +1
  • Dharmesh Dev

    Monday, February 10th, 2014 14:15

    3

    Can you please elaborate on the last point of using hyphens in place of underscore ???

    +1
    • Jaime

      Monday, February 17th, 2014 02:43

      13

      Great article, but I also have doubts about the underscore section. I use to use the underscore, and I never had problems about it.

      -1
  • leialcanices

    Tuesday, February 11th, 2014 11:01

    7

    A great tutorial for beginners. I will now use reset css from now on. Nice tips Sam

    +1
  • krnl

    Thursday, February 13th, 2014 09:31

    9

    What does that thing with the “break after dot” mean? How would that be useful? I’ve never seen that before in anyone elses code. It looks unhealthy and makes me wanna cry. If I ever find someone who writes this in code I have to read later on, I’ll beat whatever it takes out of him. This is not maintainable. This is horrible.

    Your other best practices are good best practices.

    0
  • Joshua Dorenkamp

    Monday, February 10th, 2014 13:02

    2

    Nice set of tips! Great for beginners.

    I like to include a “=” flag before my group comments for easier jumping to sections

    /* =header */
    And then ctl+f it to jump there quickly

    Of course that was before the magic of css preprocessing

    0
  • Justin Beaudry

    Saturday, February 15th, 2014 15:43

    12

    Also Chris Coyier has some a great article on css-tricks.com that demonstrates the CSS value weight of say ID’s versus Classes, etc. http://css-tricks.com/specifics-on-css-specificity/

    It is recommended that ID’s not be used to style as their weight value is higher than a Class. However, ID’s are useful in HTML for Javascript interaction.

    0
  • Veronika Dullova

    Saturday, February 15th, 2014 12:07

    10

    Good summary, especially for beginners. Didn´t know about hex vs. color name thing.

    Re: “Mixing Tag Names with ID or Class Name”, I am guilty of keeping tag names sometimes (with a, p or span tags mostly I think), because when I read the file (sometimes after longer time period when I wasn´t working on the project) and see p#container instead of just #container, it helps me to skim the file quicker.

    0
  • noveland

    Tuesday, February 11th, 2014 10:59

    6

    Definitely applying this on my own projects! Thanks man for sharing! I appreciate!

    0
  • Justin Beaudry

    Saturday, February 15th, 2014 15:37

    11

    Using underscores versus hyphens is a stylistic choice. Every project should have a style guide to demonstrate how this project represents its class names, etc. In my projects I use hyphens but that doesn’t make it ‘bad practice’ to use underscores.

    As well, if you’re looking into frameworks like normalize.css why not use something like twitters bootstrap? The default classes provided can be customized to fit your project needs and it abstracts a lot of the difficult ‘up and running’ cases in CSS.

    As far as minifying your CSS is concerned there are some great tools in node that simplify this process and can even be set to ‘watch’ your CSS as you change files to minify your css. There are other payed tools that do this is as well such as ‘Codekit’, but node is free and fairly simple if you follow the example CLI.

    I also highly recommend looking at SASS or LESS for preprocessing your css with mixins and variables.

    -1
  • Justin Beaudry

    Saturday, February 15th, 2014 15:43

    12

    Also Chris Coyier has some a great article on css-tricks.com that demonstrates the CSS value weight of say ID’s versus Classes, etc. http://css-tricks.com/specifics-on-css-specificity/

    It is recommended that ID’s not be used to style as their weight value is higher than a Class. However, ID’s are useful in HTML for Javascript interaction.

    0
  • Justin Beaudry

    Saturday, February 15th, 2014 15:37

    11

    Using underscores versus hyphens is a stylistic choice. Every project should have a style guide to demonstrate how this project represents its class names, etc. In my projects I use hyphens but that doesn’t make it ‘bad practice’ to use underscores.

    As well, if you’re looking into frameworks like normalize.css why not use something like twitters bootstrap? The default classes provided can be customized to fit your project needs and it abstracts a lot of the difficult ‘up and running’ cases in CSS.

    As far as minifying your CSS is concerned there are some great tools in node that simplify this process and can even be set to ‘watch’ your CSS as you change files to minify your css. There are other payed tools that do this is as well such as ‘Codekit’, but node is free and fairly simple if you follow the example CLI.

    I also highly recommend looking at SASS or LESS for preprocessing your css with mixins and variables.

    -1
  • Veronika Dullova

    Saturday, February 15th, 2014 12:07

    10

    Good summary, especially for beginners. Didn´t know about hex vs. color name thing.

    Re: “Mixing Tag Names with ID or Class Name”, I am guilty of keeping tag names sometimes (with a, p or span tags mostly I think), because when I read the file (sometimes after longer time period when I wasn´t working on the project) and see p#container instead of just #container, it helps me to skim the file quicker.

    0
  • krnl

    Thursday, February 13th, 2014 09:31

    9

    What does that thing with the “break after dot” mean? How would that be useful? I’ve never seen that before in anyone elses code. It looks unhealthy and makes me wanna cry. If I ever find someone who writes this in code I have to read later on, I’ll beat whatever it takes out of him. This is not maintainable. This is horrible.

    Your other best practices are good best practices.

    0
  • sascha fuchs

    Tuesday, February 11th, 2014 15:25

    8

    Sorry the most off your tips comes from the Stoneage. Today we build CSS more modularized and less static.

    +7
  • leialcanices

    Tuesday, February 11th, 2014 11:01

    7

    A great tutorial for beginners. I will now use reset css from now on. Nice tips Sam

    +1
  • noveland

    Tuesday, February 11th, 2014 10:59

    6

    Definitely applying this on my own projects! Thanks man for sharing! I appreciate!

    0
  • Yhiel

    Tuesday, February 11th, 2014 10:46

    5

    Great tips! I will surely use these tips on my workflow. Doing this properly will get you out of trouble. Thanks.

    +4
  • Surjith

    Tuesday, February 11th, 2014 08:13

    4

    RULE #1

    Avoid using ID in CSS.

    http://lmgtfy.com/?q=Avoid+using+ID+in+CSS

    [Please remove misleading content]

    +1
  • Dharmesh Dev

    Monday, February 10th, 2014 14:15

    3

    Can you please elaborate on the last point of using hyphens in place of underscore ???

    +1
    • Jaime

      Monday, February 17th, 2014 02:43

      13

      Great article, but I also have doubts about the underscore section. I use to use the underscore, and I never had problems about it.

      -1
  • Joshua Dorenkamp

    Monday, February 10th, 2014 13:02

    2

    Nice set of tips! Great for beginners.

    I like to include a “=” flag before my group comments for easier jumping to sections

    /* =header */
    And then ctl+f it to jump there quickly

    Of course that was before the magic of css preprocessing

    0
  • Ingo Malchow

    Monday, February 10th, 2014 11:05

    1

    While those tips are overall well described, i do find the section about resets slightly missleading, especially for newbies. normalize.css stands in contrast to e.g. the well known reset css from eric meyer.
    A reset just sets everything necessary to zero, that includes margins, borders, or some other browser inconsistencies to a sane value like line-height. From this you’d need to style it up again to whatever you have in mind.
    normalize.css goes a different route and gives elements a proper styling that could be usable already, without the need to reset them first. One example is
    abbr[title] {
    border-bottom: 1px dotted;
    }

    That might sound nitpicky, but semantically there is a difference between reset and normalize ;)

    +5

Comments are closed.

107.20.109.52 - unknown - unknown - US