CSS Best Practices
CSS is not a very complicated language, but it is used on a global scale and it is most likely one of the most used WEB languages. In this article I will try to briefly introduce you to the best CSS practices.
Just to make sure we are all on the same page here, I’m going to explain how you can implement CSS into your HTML pages, namely, in 3 ways:
Embedded CSS – this would be a fast way to add CSS to your HTML documents, by adding your styles directly into your HTML tags. (i.e. <h1 style=”color: green;”>Welcome!</h1> )
But I do not recommend it much, it should be used just when it’s necessary, otherwise, you’d be using CSS without much control, and you’ll see for yourself why once you’ll find out the other 2 ways of adding CSS.
Internal CSS – this is a bit more practical way to add CSS and it’s done in the <head> section of your page(s). And this is done as shown below:
<head>
<style type=”text/css”>
CSS goes here
</style>
</head>
External CSS – I find this one to be the most practical and powerful way to add CSS into your documents and I’ll explain soon why. To add an external CSS stylesheet, you’ll have to create a file with a .css extension (i.e. styles.css) and then you’ll have to load it into your HTML documents by adding a META tag in the <head> section.
<link rel=”stylesheet” href=”style.css” type=”text/css”>
In this example, the CSS file is located in the same place as the HTML document, if it’s placed somewhere else, you need to type the full location starting with your HTML’s document location as the base. For example, if you will put the CSS file in a folder named css, then you’ll have to use href=”css/style.css”
Now that we cleared the CSS integration section, let’s dig in some best CSS practices I’ve learned along the way, to have a professionally maintained code.
Organize your CSS code
There are so many ways you can organize your CSS code and files and everyone ends up with a personal preferred style.
Make your code easy to browse through, type each CSS declaration on a new line. It may make your CSS larger, but easier to edit and go through. When you feel you’re done with it, you can use some free software to remove any spacing from your CSS file(s), which should help your website be lighter on the server & bandwidth, but this is usually not an issue for smaller websites.
Structure your CSS code
Structure your CSS code by page sections, usually it’s best to start with the top and end up with the bottom of it, that most likely being the page’s footer.
Structure your CSS files
At larger websites, you may feel having too much CSS code in one place, it’s why is best to structure your CSS into more CSS files. Usually, a dedicated CSS file is only used for printing matters, one is for the header or a certain portion of a web page and so on.
Go alphabetical
After discovering this idea from another article, I ended up suggesting everyone to use it, it does save you some of the time you usually spend finding your declarations in larger blocks of CSS code.
.classID {
border: 1px solid red;
color: blue;
margin: 0;
padding: 0;
z-index: 999;
}
Give your CSS class names meaning
Often I stumble upon badly written CSS class and ID names that I can hardly find my way through. It’s easy to go through your recently written code, but if you revisit your code later, you may just end up wondering what you were actually coding there. To avoid this, get used to write meaningful names (i.e. .leftside .footerLinks .mainTitle #menu etc)
Case-Sensitive CSS
CSS is Case-Sensitive, therefore it matters whether you name your classes with camel-case (i.e. .TextLink { … } ) and if you’d try to call that class with witout camel-case (i.e. class=”textlink”) it will not recognize it. Here it’s just a matter of each and everyone’s preference, I recommend it however, only for larger CSS files.
Ending your CSS declarations with ;
In order to differentiate a declaration from another, you end each with a semi-colon ;
However, you can choose not to use it for your last CSS declaration, since no other declaration will need to be recognized. Some find it best to take advantage of it because you’d save 1byte per each page load, but if the code itself is not for a large website, then I recommend to use the semi-colon at all times, because it often happens to forget about it and have code written after it, which will obviously end up giving you errors and at times, hard to even spot the reason why.
Comment your code
Comments for programming and scripting languages are a total life-savior. It helps you edit your own code smoothly, it helps others read your code easily and most of all, it helps you remember what you were trying to do, when reading your own older code.
Use short hexadecimal colors when possible.
If a color you use is built out of 3 pairs of 2 digits, then you can shorten it. For example, you can have this very dark-blue color #112233, shortened to #123. It clones each once more, individually.
More classes in the same HTML element
(i.e. <p class=”color display position”) in this example, I added 3 classes for the same element and it priorities them from left to right incrementally.
Build your custom CSS libraries
At some point you’ll realize you’re reinventing the wheel, by coding the same blocks of code as how you’ve been doing for previous projects. It’s best you make your own resources and start saving somewhere some custom and pre-written CSS classes. Thus, having your own CSS library.
Shorthand CSS declarations
The below example should speak for itself, but what you should know, is that when there is a short-hand CSS declaration you can use and you do not, it’s simply poor coding and loads the server uselessly.
Good example:
border: 1px solid #CCC;
font: 11px arial #000;
Bad example:
border-width: 1px;
border-style: solid;
border-color: #CCC;
font-family: arial;
font-size: 11px;
font-color: #000;
Less classes, more cascading
Adding tons of classes and IDs to your HTML documents is rather poor coding. Take advantage of CSS’s cascading power whenever you can. If you have a paragraph in a container and you’d like to style it, do not add it a class or ID, but cascade to style from its container. Bad and good example:
Good example
HTML
<div class=”container”>
<p>Welcome!</p>
</div>
CSS
.container {
float: left;
width: 200px;
}
.container p{
color: blue;
text-indent: 12px;
}
Bad example:
HTML
<div class=”container”>
<p class=”welcometext”>Welcome!</p>
</div>
CSS
.container {
float: left;
width: 200px;
}
.welcometext {
color: blue;
text-indent: 12px;
}
There are so many CSS best practices you can adjust to and there are a lot of resources out there. Feel free to experience which suit you best
Always make sure you:
– end your CSS declarations with a semi-colon;
– watch out for Case-Sensitive CSS declarations;
– specify the size unit (px/em etc)
– add the hash # for hexadecimal colors.
– validate your CSS code often at W3.org
– do not use CSS hacks unless there is really no alternative
– comment your code
– use double quotation marks when defining paths (“images/image.png”)
Happy coding!
No related posts.
You may also Like
How Will Article Marketing Help With My Search Engine Rankings
7 SEO Plugins for WordPress
