CSS is widely used during the design and development of websites these days. But there are many people who are accustom to the old inline CSS method of using CSS. In addition to which there are many who don’t implement the CSS correctly or define the classes correctly. There are several basics tips that everyone should be aware off to get it right.

All most all the web designers around the world use CSS to enhance the functionality and presentation of the website. But do the people involved in web design in India and anywhere for that matter do it right? In order to make sure you do, here are a few CSS mistakes that you should avoid.
Using ids:

One of the layers of specificity is the kind of selector your have constructed: ids versus class versus tags. As an example:

#my-link { color: red; }
.my-link{color: green;}
a{ color: blue; }

Using the first is the most specific of the three (the id). Since ids can be used only once per page it wins. Check example below:

<a href=”#” id=”my-link”>Our example links</a>

What would the color of the text be, assuming no other styles? Hence the text will have appear in red on the website. Following the CSS specificity, it is the the next most specific style is the class. The problem with using ids in your code is that we rarely see the example above, with one id or class or tag selector on a given item. Ids are often used in context:

#header a{border:2px dashed #000; }

Long Selectors:

#header #title .left-side img.logo (opacity:0.5 }

Not only is this selector using ids, it’s also long. just like ids, if you are using long selectors (that are greater than three levels deep) you are increasing specificity. As a result, you will be compounding the problem over time as regular maintenance and updates occur. The solution? Don’t write long selectors! For our previous example, was there any reason that using .logo by itself would not suffice? Probably not. In general, your selectors should be only two levels deep or three at the most.

Inline styles:

Inline styles are  crimes of specificity and also violate the cardinal reason we use CSS; to separate style from structure. It is common knowledge that  the website designers stopped using tables for layout and embraced CSS in external style sheets, they also stopped mixing our styles in with our structural elements and stopped using structural elements to generate style.

From a specificity perspective, an inline style can only be overridden by an important flag. Generally, that means if someone is writing a style on that element and using the important flag, they are doing so as a reactive rather than a proactive action. The use of !important can be very handy at times in the CSS, but it must be used wisely rather than as a crutch. Here is how we might remove an inline style:

<a href=”#” style=”text-decoration:underline; color:yellow;”>Links</a>

<a href=”#”>Links</a>

.hazzard-link {text-decoration:underline; color:yellow;}

We can simply abstract the line CSS to a class.

Top-down CSS:

Now we are moving out of specificity to talk more about bad habits that may have made it into your workflow. Let’s imagine that we have received a design comp and are beginning to add styles to it once we have written out basic structure in HTML. The problem with some CSS is that you can tell that it’s written in the top down style. This mimics the HTML layout, instead of abstracting the design elements, often using ids for context, such as #header, #content. This usually results in long selectors (how many times have you seen .menu ul li a{} ?) and the code is going to be really rough to debug and do maintenance on. This CSS can be fixed by working on abstracting the design components from the page. This will also help remove redundancy in the code.

Redundancy / DRY violations:

Redundancy means you have a tendency to repeat what you do (in terms of CSS). It is generally understood in web programming and all kinds of programming, that if you repeat yourself, you are wasting time, hence the maxim, DRY (Do not repeat yourself). The same applies for CSS as well. Take the example:

.some-title{font-weight:bold;}

.some-other-title{font:weight:bold; color:red}

We can group these together:

.some-title, some-other-title { font-weight:bold;}

.some-other-title{color:red;}

On the other hand you can also use common name for them and add a modifier class to go with the title to show that it’s different color:

<h3> The heading</h3>

Conclusion:

Thus there are many such small tit bits that if we get it right can really enhance the website and  optimize the performance.

Are you looking for Web Design India contact to our experts Today.

Why Choose Alakmalak As a Your Growth Partner?

Alakmalak is a Web Development Company In India that offers services for several technologies. There have been around for a very long time and have developed over 2500 projects for clients all around the world. They have highly skilled web developers with a great deal of experience.

 

• How to avoid some common CSS mistakes?
• Top common CSS mistakes and How to fix them?