CSS Best Practices

Now that we looked at the best CSS practices. Skillcrush has a small list of things you should never do.

1. Use an image of what you can do in CSS.

Throughout the past few weeks, you've learned lots of ways to use CSS to style elements from how to use color to change the dimensions. As you style your website, you want to use all the CSS properties, tips, and tricks to help you instead of using images. For example, I should just set a section with a background color with CSS instead of using a background image of a color I want.

2. Reuse class names.

Using the same class names over and over again in code is a quick way to cause problems in your code. The computer will have no idea how to tell the class names apart so you'll be getting an error message very quickly. Skillcrush suggests using different class names for these situations, but they also recognize you can still reuse class names as long as you attach them to an HTML selector. This might look in your code like this.

p.blog-post {
  font-family: Roboto;
  font-size: 17px;
}

article.blog-post {
  width: 600px;
  float: left;
}

I still am using the blog-post class name for these elements, but I added the HTML selector before the class name to let the computer know which class names I'm referring to. This might seem tougher for newbies just starting to learn how to code, so I recommend sticking to naming your classes differently. It will be much easier and will be less of a headache for you later.

3. Overwrite your code.

Remember how computers read CSS? We discussed this earlier in how you organized your code and how you should write your code the same way computers will read it. When you overwrite your code, any changes you make at the end of a document will override or change the code you made at the top of your code.

This sounds silly since it is writing the same code multiple times. It can also be a pain for developers when your code has thousands of lines of code. As you overwrite your code, that means you will have to sort through every line to make changes. If you must change styles, it is best to change the style at the source and find the original in your code.

Things to avoid with CSS

Now that you know some of the things you can and can’t do in your code, it is time to talk about things you should avoid doing in your code. These aren't necessarily right or wrong, but Skillcrush discourages students from using these in your style sheet unless it is a last resort.

1. Negative margins

This is one of the practices I am guilty of the most when I code and need to improve on it. We talk about spacing and margins often and how these areas will be the place you play around the most as you style a website. In some cases, you will not want a space between elements or have them be very close.

It is easy to think negative margins can be the solution to this problem, but they actually can create more problems for you. The biggest problem with negative margins is overlapping elements. Developers don't want overlapping elements.

Instead of using negative margins, Skillcrush suggests students play with the padding or a nearby margin. For example, I would try setting the padding to zero and playing with the opposite sides of the element's margins. If that doesn't get me the results I want, then I can use negative margins

2. Fixed heights

I talked about this often when I explained width and height. Fixed heights don't make a good user experience. Remember a fixed height leads to a scroll bar for any text that might overflow from its container. It is best to avoid this as much as possible.

3. Using borders on lots of elements.

Borders are great on a website, but there is a limit on how many you should use. Too many can throw off all your measurements. Plus it would just look odd seeing a bunch of borders all over a website.

Skillcrush suggests using borders sparingly per page. They suggest using borders on one to two elements. If you need more lines to separate your page into different areas, try other ways to keep things organized such as playing with the spaces or using the background color.

4. Floating too many things.

This is another topic addressed in this series and is something newbies can easily do as they are learning how to code. Floating too many items can create lots of problems with your site. When I built my first website as a developer, I floated way too many elements which resulted in a messy website in the browser. When it comes to floating, it is best to float only when it is necessary and as little as possible.

5. Floating to the right

You might have noticed in my previous post that I floated my items to the right in some of the sample code. That isn't a good CSS practice. Floating elements to the right can mess up all the hard work you've done on your website very easily.

If you want to work in responsive web design, floating right will give you a headache as you translate these layouts to your site. Avoid the headache by just floating left as much as you can.