There is no denying to the fact that CSS is highly effective when it comes to better presentation of documents or web pages. It separates the document content from its presentation. CSS helps to get a table-less layout. It has many options which help you to design an effective web layout. However, while working with CSS, there are certain do’s and don’ts that should be kept in mind. This helps in getting the efficient results from CSS. Discussed below are some of the do’s and don’ts to be considered while working with CSS.
Let us begin with talking about the do’s and don’ts of CSS selecting.
Do not use descriptive class names like ‘ green’, ‘orangeDot’ etc. Also do not use names like ‘left’, ‘right’ etc., instead go with class names that describe the meaning and purpose of the content and not its appearance. Therefore, the classes should be named as ‘main’ or ‘primary’. Always try to use same class name for various elements in various situations. There is no hard and fast rule that names can only be attached to one type of element. When you decide between class name and id, first determine whether the element you want to style is really unique? If it is not, it is better to use classes. This saves you from tons of ids used only for styling.
You should use multiple class names on single element. This helps to optimize your CSS and avoid complex class names in your markup. You can use the selectors at the beginning of the stylesheet to set or reset the default styling of any element. Do make use of descendent selectors. Once you get used to them, you will realize that they are quite easy to work with. Using them you can come up with 100 class names each section in a document.
The combinations selectors allow you to effectively target an element. You should first determine the lowest container in hierarchy. It should not have any repeating elements. Then add class name to the container and target the elements in the type selectors. You should keep in mind that not all selectors are supported by certain user agents. Therefore, you should not rely on them.
To conclude, you should select those class names which describe the content’s purpose. Try to use few class names and use them on various elements. Make use of type selectors to set/reset default styling. In order to optimize your CSS, you should use multiple class names on single elements. To effectively target your elements, use combined selectors. Do not name classes based on appearances and do not add unnecessary class names. You should not use universal selector for resetting entire document. Also, try not to use browser dependent selectors.
Now let us talk about the do’s and don’ts involved in structuring a document.
It should be kept in mind that to get a web standard compliant document, you need to focus on its structure. The structure of a document should be logical and meaningful. There are many tags available and you should make use of them. Do not rely on divs tags alone. When it comes to analyzing the code, validation is important. However, it is important to ensure that the validation is meaningful.
To sum it up, do pay the required attention to the structure of the document. Create a logical structure using tags in a meaningful order. Use a variety of tags. Try to use as few HTML elements as you can. Do not hesitate from rejecting a particular design effect if it does not provide a cleaner markup.
Do not make excessive use of tags. Do not use presentational tags. However, if you must, try to keep them to a minimum. And do not compromise in terms of markup.
(Have been liking our posts for a while? Subscribe now! We’ll make sure that you never miss an update. And talk to our CSS experts now if you need professional help with your Web strategy.)
