Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Avoid common CSS pitfalls

Monday, June 3rd, 2013 by Servage

CSS is providing quick and simple ways to affect an object just with a simple list of properties, but that again will become complicated when you are going to professional, high-scale and good performance level. With this intricacy, web programmers likely commit some mistakes, which are found common in many instances. Therefore, in this post my intention is to highlight them so web developers can save their time from frequently revising codes.

In Usage of CSS Reset

We all have our own style, a knack, to coding in our website designing process. We wish to show our elements in our special ways. The same is true for the browsers because after all browsers are created by humans like us and they have their own choices to represent the elements in some different ways than others. Due to this simple reason, browsers differ from each other in styling. Let me elaborate it further. Firefox may use Times New Roman fonts as default whereas Chrome will have Helvetica. Firefox may leave some space just before and after the paragraph whilst IE may not.

You might have question that why browsers are setting some default CSS styling though we all are giving our own CSS sheets along with all html pages. Right, we most of web designers define CSS for each documents, but still many web developers wary to do it for some reasons. Therefore, it is imperative for browsers to place a default CSS to keep consistency throughout the displays. All right, we accept this, but what about our own defined styles that we want to show in our web pages.

At dinosaur age of web, we had no choice to set our rules over the browsers and keep consistency across all browsers for our web page display.  At some point, universal search symbol * (asterisk) became common to nullify the browser default styles, but it was not a practical solution particularly for a big CSS sheet to nullify all elements at a time and reset new ones. Yes, reset new ones.

Thus, it is termed as CSS reset and today many full reset are out in the market like Eric Meyer reset or Yahoo!’s YUI Reset CSS. These full reset versions are empowering you to reset all CSS elements at a time and save you from the mistakes creating inconsistent display of your web page across the latest browsers.

Overly Specific Selectors

Some time we web programmers are a bit lazy in coding and sometime acting as an overtly sensitive fellow. In fact, any extremism is not good for us and we have to keep balance in our coding and make our coding practices more standard rather than personal. Let me bring you at real-life example. In normal HTML documents, we define an unordered list through

<ul>

and list some items as

<li>

inside it.

In CSS we use the same with an ID such as

#nav

and can place some links of the related pages with

<a>

tag inside. Thus, syntax will look:

Ul #nav  li  a (…)

You might have question that what is wrong with this perfect HTML syntax. True, but when you see closely you will find that there is no need to place ul just before #nav because #nav or #navigation is itself a specific selector for lists so you don’t need to specify them more. The same is true for li element thus, our syntax

#navigation  a (…)

Will prove the most accepted and balanced syntax for good CSS. Of course, if you want to nest some list items you can style this different way rather than I have described here in the overly simple example. For nested item, you can place ul or li elements according to need, but still you don’t need to do with most specific ways like

#navigation  li  ul  li a (…)

But you can do it like

#navigation  ul  a (…)

Or in case of header

#header  ul  a (…)

References

Avoid common CSS pitfalls, 5.0 out of 5 based on 1 rating
Categories: Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.