Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/mislz28/public_html/wp-content/themes/css-faq-v2/timeweather/timeweather.php on line 19
  • CSS Faqs
5 August 2008

Order CSS Properties

Applying special formatting to arrange CSS properties is, more often than not, beneficial when writing a code. It renders the script better structured and easier to understand. Developers have a wide selection of grouping schemes to choose from with every undertaking.
Some of them prioritize fonts and colors while others place heavier importance on positioning and float-related elements. In essence, elements are usually arranged depending on website’s topology and the layout structure. The approach is similarly applicable to CSS selectors:

body,
h1, h2, h3,
p, ul, li,
form {
border: 0;
margin: 0;
padding: 0;
}

There are also developers who alphabetize the group properties.
body {
background: #fdfdfd;
color: #333;
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0;
}

It is entirely up to you to pick which structuring tool to use. The important thing is that you bear your main purpose in mind and stay as objective as possible. Structuring your code will earn you respect from your team mates. You will also be spared from having to argue with other people if they shifted from your original format.

The Magic Of Indentation
To get a better idea of your code, you also have the option to implement one-liners that will represent brief code fragments. However, you should be careful not to define more than three attributes for a given selector. Use this method with caution. Underline the dependencies between all elements from a same class. This technique will surely improve the readability of your code to help you locate an element within your style sheet.

#main-column { display: inline; float: left; width: 30em; }
#main-column h1 { font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 20px; }
#main-column p { color: #333; }

Chria Coyier thought of another method, which calls for you to indent only those lines that you have revised. The technique is most useful to help you remember recently edited lines. The use of keywords such as @new, etc. is highly recommended to help you navigate more easily throughout the page based on the occurrence of a keyword and easily go to the problem you wish to fix.

#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; /* @new */

Tags:

This entry was posted on 5 August 2008 at 2:47 PM and is filed under CSS Faqs. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed at this time.