Coding is something that takes time to learn and novice developers
might not use the best practices when converting web interfaces from a
Photoshop file into a fully functional web site. It would be really good
to have access to an experience programmer, but not everybody can
afford to hire one or knows someone that is with spare time.
So you might ask yourself what to do to improve the code before delivering a web page. Well, lucky you, there is a tool out there which I will review for you today. The tool is called CSS Lint, it is totally free and I definitely recommend trying it and see what you can get out of it. The difference between a good and a great programmer is all in the small details CSS Lint can fix for you – or, at least, can tell you to fix them and why.
CSS Lint is an open source application that checks your code syntax and, according to the latest web standards, gives you a list of mistakes it spotted in your CSS code. It is similar to the W3C Validator, only it gives you better descriptions of your issues and offers suggestions about how to solve them. The tool is very easy to use. The only thing you have to do is paste the source code and choose the rules you want to be enforced (and there are lots of them). CSS Lint will start analyzing your code immediately after you hit the lint button and it will not take too much time until you will see a full preview of how good your code is.
As said before, you can choose your code to be checked by certain rules and I will give you a list with all the rules you can choose from.
All these rules definitely make sense, but there is no time to take a look at all of them, so I will choose the most important and give you an explanation about why it’s a mistake to use them, and also some tips about how to replace them with valid code. This is only to give you a preview of the tool, you can obviously dig into it more later.
. container { background: #000; background: rgba (255, 255, 255, 0.5); }
Moreover, the following lines are also OK:
. container { border: 1px solid black; border: 1px solid red; }
However, this is not accepted and is puts up a warning when the two properties are separated by another different one or when the properties have the same value:
.container { border: 1px solid black; border: 1px solid black; }
or
.container { border: 1px solid black; color: red; border: 1px solid black; }
a { color: red; } would be accepted, but a { colr: red; } would be displayed as a warning, because the property colr does not exist. The following snippet: a { -moz-foo: bar; } would not be displayed as a warning.
The tool searches for the popular @font-face property and
warns you when there are more than five of them. However, I personally
don’t recommend you use more than one and, if you can, try to avoid
using them at all.
Moreover, using one of these grid systems will decrease the amount of code you have to write yourself, which will help you deliver the web site faster and make the final product better.
CSS Lint warns you when there are more than 10 floats used (which is something most of the designers already use when they create the basic layout). Analyzes have been made and it seems the grid systems improve web site performance (source), so why not take advantage of them?
.small { font-size: 10px; }
.medium { font-size: 13px; }
.big { font-size: 16px; }
This way, instead of declaring the size of the font 15 times, just
point the container to a class. This is known to be much faster and to
improve the loading speed of your web page. If there are more than 10 font-size properties used in your CSS file, this tool will show you a warning and a description of the issue.
The following code displays as a warning:
h3 { font-weight: normal; }
.box h3 { font-weight: bold; }
As you can see, the h3 has been defined twice, once for general use and once when used together with the class called box. This is not allowed! However, headings can be defined more than once when the hover property is used:
h3 { font-weight: normal; }
h3:hover { font-weight: bold; }
The bottom line is that CSS Lint should be taken as what it is – a tool. This means that no developer should code like this tool wants only because it says so. There are some rules that developers might not agree with (like the controversial OOCSS rules) and nobody forces you to use this tool as a Bible. CSS Lint should only be a tool to help you if you want to know where you can improve. None of us like to find out that we have issues in the way we code – so some of us might reject it.
Even though there are some issues with it, I think CSS Lint is a tool you should start using. None of the ways of coding is the best one, unless we think it is for the purpose of our project. If you think you’re doing everything right, then so be it. Otherwise just try to use CSS Lint a few times and see if it improves your results. If it does, it might be worth to stick with it.
CSS Lint is also a very good way for beginner developers to learn more about the way they code and the way they should do it. There is nothing wrong with that and it is never too late to learn something new.
Do you think CSS Lint is useful? Did you know about it or have you used it? Did it improve the way you code or the loading speed of your website? Or was it a waste of time?
So you might ask yourself what to do to improve the code before delivering a web page. Well, lucky you, there is a tool out there which I will review for you today. The tool is called CSS Lint, it is totally free and I definitely recommend trying it and see what you can get out of it. The difference between a good and a great programmer is all in the small details CSS Lint can fix for you – or, at least, can tell you to fix them and why.
CSS Lint is an open source application that checks your code syntax and, according to the latest web standards, gives you a list of mistakes it spotted in your CSS code. It is similar to the W3C Validator, only it gives you better descriptions of your issues and offers suggestions about how to solve them. The tool is very easy to use. The only thing you have to do is paste the source code and choose the rules you want to be enforced (and there are lots of them). CSS Lint will start analyzing your code immediately after you hit the lint button and it will not take too much time until you will see a full preview of how good your code is.
The rules
As said before, you can choose your code to be checked by certain rules and I will give you a list with all the rules you can choose from.
1. Errors
- Beware of broken box sizing.
- Require properties appropriate for display.
- Disallow duplicate properties.
- Disallow empty rules.
- Require use of known properties
2. Compatibility
- Disallow adjoining classes.
- Disallow box-sizing.
- Require compatible vendor prefixes.
- Require all gradient definitions.
- Disallow negative text-indent.
- Require standard property with vendor prefix.
- Require fallback colors.
3. Performance
- Don’t use too many web fonts.
- Disallow @import.
- Disallow duplicate background images (new feature)
- Disallow selectors that look like regexs.
- Disallow universal selector.
- Disallow units for 0 values.
- Disallow overqualified elements.
- Require shorthand properties.
4. Maintainability and duplication
- Disallow too many floats.
- Don’t use too many font sizes.
- Disallow IDs in selectors.
- Disallow !important.
5. Accessibility
- Disallow outline: none.
6. OOCSS
- Disallow qualified headings.
- Heading should only be defined once
All these rules definitely make sense, but there is no time to take a look at all of them, so I will choose the most important and give you an explanation about why it’s a mistake to use them, and also some tips about how to replace them with valid code. This is only to give you a preview of the tool, you can obviously dig into it more later.
Disallow duplicate properties
A few years ago assigning the same property to a container was a mistake, although it is not considered one today. Today this is used as a way to deal with varying levels of browser support for CSS properties. There are browsers out there which support RGBA colors and there are some that do not, so a snippet like the following one would be accepted:. container { background: #000; background: rgba (255, 255, 255, 0.5); }
Moreover, the following lines are also OK:
. container { border: 1px solid black; border: 1px solid red; }
However, this is not accepted and is puts up a warning when the two properties are separated by another different one or when the properties have the same value:
.container { border: 1px solid black; border: 1px solid black; }
or
.container { border: 1px solid black; color: red; border: 1px solid black; }
Require use of known properties
As more and more properties are accepted in a CSS file, this rule makes sure you don’t have any typos in your code. It is like spelling check in Microsoft Word. This rule checks each property name and makes sure it is a known CSS property. If there is a vendor-prefixed property (the ones beginning with a -), they are ignored by the tool, because they may add in their own properties. A normal CSS validator would warn when such a property is used (-moz-border-radius sound familiar?), because it doesn’t recognize the name, but CSS Lint doesn’t.a { color: red; } would be accepted, but a { colr: red; } would be displayed as a warning, because the property colr does not exist. The following snippet: a { -moz-foo: bar; } would not be displayed as a warning.
Don’t use too many web fonts
Using too many web fonts is clearly bad technique, not only from a design perspective, but also from an accessibility and usability point of view. A web page that has to load more than one (maximum two) web fonts at every refresh is going to load very slowly and we know how this affects the user experience on a site.
Web fonts should not be overused.
Disallow too many floats
The float property is used to achieve a columnar layout in CSS. Some of us have been thought we have to use as many floats as possible to ensure everything stays in place, but this is not the case anymore. Today there are lots of grid systems out there which you can download and they do not have an excess of this property. They are also made by expert developers and do not have usability flaws. The 960 Grid System and The Grid System are two incredible grid generators and I recommend you check them if you haven’t already.Moreover, using one of these grid systems will decrease the amount of code you have to write yourself, which will help you deliver the web site faster and make the final product better.
CSS Lint warns you when there are more than 10 floats used (which is something most of the designers already use when they create the basic layout). Analyzes have been made and it seems the grid systems improve web site performance (source), so why not take advantage of them?
Don’t use too many font-size declarations
If your website is well-organized, then it probably has a small set of font sizes. However, many designers prefer to use a clearly visible hierarchy and do this by playing with the font sizes. Well, this would not be a problem either if developers would code it properly. Instead of using font-size 15 times, define three classes and use each one of them five times. To better illustrate, take a look at the code below:.small { font-size: 10px; }
.medium { font-size: 13px; }
.big { font-size: 16px; }
The font-size property should not be overused - try classes instead. Image from: www.dtelepathy.com
Disallow !important
The !important property is used to increase the specificity of a given property value. If a web page has many instances of this property, it is a clear sign that the developer uses it because he has problems styling the page effectively. Therefore, CSS Lint displays a warning when the !important property is used.Heading should be defined only once
The heading is an Object-Oriented CSS (OOCSS) which works by defining certain objects that can be used to place a particular object anywhere on a web page and display the same. For example, the heading elements (h1 to h6) are built-in objects and should look the same wherever they appear. This means developers are not allowed to define the same element multiple times.The following code displays as a warning:
h3 { font-weight: normal; }
.box h3 { font-weight: bold; }
As you can see, the h3 has been defined twice, once for general use and once when used together with the class called box. This is not allowed! However, headings can be defined more than once when the hover property is used:
h3 { font-weight: normal; }
h3:hover { font-weight: bold; }
CSS Lint is nothing more than a tool
The bottom line is that CSS Lint should be taken as what it is – a tool. This means that no developer should code like this tool wants only because it says so. There are some rules that developers might not agree with (like the controversial OOCSS rules) and nobody forces you to use this tool as a Bible. CSS Lint should only be a tool to help you if you want to know where you can improve. None of us like to find out that we have issues in the way we code – so some of us might reject it.
So, the conclusion?
Even though there are some issues with it, I think CSS Lint is a tool you should start using. None of the ways of coding is the best one, unless we think it is for the purpose of our project. If you think you’re doing everything right, then so be it. Otherwise just try to use CSS Lint a few times and see if it improves your results. If it does, it might be worth to stick with it.
CSS Lint is also a very good way for beginner developers to learn more about the way they code and the way they should do it. There is nothing wrong with that and it is never too late to learn something new.
Do you think CSS Lint is useful? Did you know about it or have you used it? Did it improve the way you code or the loading speed of your website? Or was it a waste of time?
No comments:
Post a Comment