webslave.ws

As with most things, a logical and structured approach is the b

In the past section we were talking about some of the things you should have in mind when you are coding your CSS web pages. Those quick tips will help you to improve the performance of each page running on your website as well as simplify all the steps in the developing process. The following examples will be a detailed continuation of the previous article related to this issue. CSS is today the best alternative to have a logical structured and powerful website. That’s why our recommendations will be so useful for you in order you can get the most out of them and apply all what you can into your personal or corporative project. Now, I will show you some examples that will simplify your life. Enjoy them!

1. Improve the use of CSS classes: It is not good abuse of classes when it really is an unnecessary technique. There are people that use a ton of CSS classes. The only thing you have to do is make a logical division of each page in your website. If you do that you don’t have to write several classes. The following example is a common misuse of CSS classes.

Bad CSS idea regards to classes:

<ol>
<li>
<p align="justify">a.link{<strong>color</strong>:red;text-decoration:none}</p>
</li>
</ol>
<ol>
<li><strong><ul></strong></li>
<li><strong><li><a</strong> class="link" href="#"<strong></strong>Apple Juice<strong></a></li></strong></li>
<li><strong><li><a</strong> class="link" href="#"<strong></strong>Coca Cola<strong></a></li></strong></li>
<li><strong><li><a</strong> class="link" href="#"<strong></strong>Beer<strong></a></li></strong></li>
<li><strong><li><a</strong> class="link" href="#"<strong></strong>Wine<strong></a></li></strong></li>
<li><strong><li><a</strong> class="link" href="#"<strong></strong>Water<strong></a></li></strong></li>
<li><strong><li><a</strong> class="link" href="#"<strong></strong>Whisky<strong></a></li></strong></li>
<li><strong></ul></strong></li>
</ol>

Good CSS idea regards to classes: This example shows you what you have to do to avoid the excessive use of classes. With this example you don’t have make a continuous repeating of class in each link.

<ol>
<li>
<p align="justify">#nav a {<strong>color</strong>:red;text-decoration:none}</p>
</li>
</ol>
<ol>
<li><strong><ul</strong> id="nav"<strong></strong></li>
<li><strong><li><a</strong> href="#"<strong></strong>Apple Juice<strong></a></li></strong></li>
<li><strong><li><a</strong> href="#"<strong></strong>Coca Cola<strong></a></li></strong></li>
<li><strong><li><a</strong> href="#"<strong></strong>Beer<strong></a></li></strong></li>
<li><strong><li><a</strong> href="#"<strong></strong>Wine<strong></a></li></strong></li>
<li><strong><li><a</strong> href="#"<strong></strong>Water<strong></a></li></strong></li>
<li><strong><li><a</strong> href="#"<strong></strong>Whisky<strong></a></li></strong></li>
<li><strong></ul></strong></li>
</ol>

2. Think in write CSS pages more flexible: Sometimes we think that our web pages are printed sheets and you should have in mind that users have the right to customize the way they want the pages appears. That’s why you have to think in flexibility. When you are designing and structuring your web pages, think in flexible designs that let your users interact better with your web pages.

3. Use tools that help you to validate your code: In the World Wide Web there are too many tools that will help you to validate the CSS code of your website. The most important tool for that is the W3C CSS Validation Service. It is an amazing FSF online application focused in help developers to validate the CSS web pages. This application can help you to detect common errors in order the users of your web site don’t have any problem when they are accessing into your website. The W3C Validation Service is a tool that can even be downloaded to your personal computer. Something pretty good is that this tool is completely free and you can use it during your developing process to test your pages developed in CSS.