The Beginner’s Guide To CSS Best Practices

By May 23, 2015 Blog No Comments
The Beginner's Guide To CSS Best Practices

We recently released an updated version of Brander, our portfolio WordPress theme that enables users to customize CSS, so we thought it would be a good idea to go over some of the CSS best practices to cover essential tips for beginners and help more advanced users brush up on their coding skills.

What Is CSS?

CSS stands for cascading style sheets, and is the essence of the look and feel of an HTML page. While HTML is the content itself, CSS is the style and presentation of that content. It overrides the browser’s default settings and rules for displaying content. The important thing for beginners to understand is the issue of inheritance, which greatly affect most of the CSS best practices. The order of priority when browsers read and apply CSS is as follows: inline style (inside the actual element in HTML), internal style sheet (a section inside the head element), external style sheet (separate CSS document linked to the HTML document), and, lastly, browser’s default CSS rules.

The Beginner's Guide To CSS Best PracticesBuy Theme Open Demo

Keep It Readable

Just like with any other type of code, it’s important to keep your CSS code organized and well-structured. While many developers agree on this one, it’s also one of the often overlooked CSS best practices. This will not only make it a lot easier for you to go back and change the code or fix bugs, but it will also ensure every element looks and feels just the way you wanted it to. You’ll want to declare the most generic items first, and then move on to coding the nitty-gritty details of each element. When done properly, this will let you override particular styling without any problems, and could potentially save you a lot of headache down the road.

Work Smarter, Not Harder

Out of all the CSS best practices, this one can save you the most time. While it may be seen as a personal preference, grouping elements is a much better idea than declaring the same attributes for different elements separately. For example, if you want both h1 and h2 elements to have the same font size, color and margins, you can group them using a comma:

h1, h2 {
font-size: 1.5em;
color: #222;
margin: 1em, 0, 1.5em, 0;

The Beginner's Guide To CSS Best PracticesBuy Theme Open Demo

CSS Best Practices For Better Comments

A comment in CSS, just like in any other language, is a piece of code that the browser completely ignores and doesn’t display to the end-user. Well-written, concise comments will help you understand your code a lot easier later on, but can also be incredibly helpful when you’re organizing the code itself. You can divide your code into sections, and begin each of the sections with a comment. This way, you’ll know which section does what, and you’ll be able to find them a lot easier. For example, you can start the header section of your code with a simple comment like this:

/* ----------------------

Keep in mind that the number of spaces or line breaks doesn’t matter when writing the CSS code, which means you can include as many blank lines before and after the comment to ensure better readability.

Leave a Reply