Articles

6 CSS Mistakes Web Designers and Developers Make

February 27, 2013 • By

Let’s be honest even though we all strive to be the best at everything most of us still make common mistakes that we honestly believe is the correct way to write them out. You are not the person to blame as we generally learn from online tutorials and from sample files that we may download to play around with.

The problem with this is what we are actually learning may not be proper, but rather what the tutorial author or author of the sample think is right, and results in a negative domino effect. Additionally, the same may apply to purchasing books and learning from them, as it all depends on the author and how they learned as well.

Getting to the main focus of this post, we are not perfect, and we all make mistakes when we develop whether knowingly or not. In order to help clear up on some common mistakes made in CSS, we cover six CSS mistakes web designers and developers tend to make.

CSS Shorthand Properties, Who Needs Them?

For those of you who do not know, CSS shorthand properties make a huge difference to the readability, efficiency, and performance of your style sheet in large scale. Instead of having let us say, four margin properties: top, right, bottom, left, you can have one containing all four of these properties in a single short and readable line. Having hundreds of lines in one style sheet, you will be glad you did use the shorthand properties instead.

For those who do not use the shorthand properties, it may be the cause of learning each property separately for understandings sake, however, it is inefficient especially for having to skim through a huge style sheet to locate certain CSS properties making you spend more time searching rather than coding or editing. Therefore, you should start to adapt to shorthand properties when possible as you will see the benefit of using them instead in the long run.

To show an example of shorthand versus non-shorthand properties, let us have look at these margin properties:

margin-top: 2px;
margin-right: 4px;
margin-bottom: 6px;
margin-left: 8px;

Those are the non-shorthand properties; now compare them to the shorthand properties:

margin: 2px, 4px, 6px, 8px;

As you can see in the shorthand property above, it is far more efficient and readable when you search through hundreds of lines of code to find certain CSS classes and ID’s and their elements within.

Forget Hexadecimal, Color Names are Good Enough

No, not quite. For the color property in CSS, we all generally know that it can take names instead of hexadecimal such as blue or red. However, what you do not realize is blue or red in one browser is different from the blue or red in another.

What it is actually doing is telling the browser to interpret blue or red to what it thinks blue or red are, which can result to a lot of frustration when you realize that the blue in one browser is not the same blue you liked in another. Instead, to assure the color you choose is the same across all browsers, take the time to find the hexadecimal code for it, many programs such as Photoshop can provide that for you, so there is not excuse not to.

If I Fall, Will You Catch Me?

You are on a tightrope and you forget to ask a friend to catch you if you fall, but on that very occasion or practice run, you did not, but what if you did?

Thinking about the above statement leads me to the next common mistake made that I once made before, not providing fallback fonts. You have a favorite font installed on your computer that you just absolutely love to use as the default font in your website designs, however, not everyone has that exact same font and without fallback fonts or font stacks, the font face will default to the browser’s default font.

The problem with defaulting to something else is that some fonts do not look too great on certain designs, therefore, to maximize control over how your website looks, use fallback fonts or font stacks so that if your favorite font is not installed on a computer, it will go to the next font in your provided stack and so on and so forth.

Multiple Selectors for the Same Results

It happens to all of us, we are creating multiple selectors to find out that we end up with similar properties, but we take up twice as much space than needed. When you find yourself with multiple selectors with similar properties, it is more efficient and effective to just combine the two together by separating the selectors with commas as shown below:

.a, .b { … }

ID and Class Use

One of the most common mistakes made is the understanding of when to use IDs and when to use classes. Many of us confuse the two and use classes where IDs should be used instead. Generally, no problem will arise from the use of either; however, improper usage will always be a scar on your portfolio. IDs are used for a single entity while classes are used for many.

For example, your driver’s license is an ID to identify you, but not a license to identify others while a class might be a law that governs these licenses or IDs. Look at JavaScript as another good example for how IDs and classes are used. When you need to manipulate information from a certain element, you identify this element using its ID to distinguish it from others. However, a class is used to govern a set of elements and therefore is not ideal for such JavaScript action.

Doctype

The doctype in HTML5’s world is as easy as remembering the term, but many seem to ignore the fact that declaring the doctype is important and go on without it. When you make an error in your HTML or CSS such as forgetting to close or open a tag, the browser in which is viewing the website will attempt to use its own accommodations to fix it, which makes the results completely different from browser-to-browser.

Instead, by providing the doctype, you put the browser into a standards mode keeping your errors as errors, rather than attempt to fix them, which helps point them out to you to keep your website fluent across many different browsers and platforms.

(Visited 124 times, 1 visits today)