How to Organise a Cascading Style Sheet

Pin It

The main purpose of a Cascading Style Sheet is to streamline the process of styling web pages. To maximize the full potential of CSS it is important that style formatting and best practices for improving code readability are introduced from start to finish of a project. Here are fifteen useful ideas to help simplify Cascading Style Sheet management.

1. Adding Additional and meaningful information

Commenting on your stylesheet will make it much easier to understand for you and your co workers when you revisit a forgotten website!

Its important to give additional and meaningful information about the project to quickly let developers know about the latest changes. This could include the authors name, when it was last updated, what was updated, copyright ownership and who is the primary user. These details would be placed at the top of the Cascading Style Sheet. See Below for example.

2. Table of contents

I recommend keeping an overview of your code with a table of contents. This could be written in several different ways. It might consist of just the basic sections of your layout.

See below.

Another way would be to include id and class names within each of the sections. This enables you or another team member to use a search tool to find the code very easily. See below.

3. Including the colors and hex code name for referencing

Adding the color name and hex color codes as comments will make life a whole lot easier for referencing at the development stage of a design. Remember to use shorthand hex code if possible. See below.

In this example we have referenced the colors of the body, header, nav, article, footer sections and text links. Details of typography, such as font sizes and font-families have also been added.

Style sheet header

4. Include a reset style sheet or reset styles

The reset styles or stylesheet can be added after the “Style sheet header” comments. The general idea behind the reset stylesheet is to reduce the inconsistencies among other browsers so any HTML written should look similar no matter what browser your using.

The two most popular reset stylesheets are from Eric Meyer and the Yahoo reset. Both these reset stylesheets are a good starting point but often need tweaking to accommodate a certain design.

If you like the idea of creating a reset stylesheet yourself, then take a look at creating a reset CSS file.

5. Organize your Cascading Style Sheet in a top down structure

Keep things organized, especially when working with CSS as it can soon become a tangled mess. First of all, its a good idea to follow your HTML source code. The order of the HTML should be used to determine the order of the CSS selectors, which means you should always build the structure of your web page first. Start by adding the resets and generic elements such as the (body, h1, p, a, type etc). Then move onto the main sections of the website layout, concentrating on the header, nav, article and footer elements. Then onto listing the most commonly used classes.

6. Comment out your Cascading Style Sheet

CSS comments are there to help the designer decide what is going on within the code. simply add /* before your comment and */ to close the comment out. Areas to comment are the style header, references for the main style guides, different sections of the stylesheet and reminders and notes for yourself and other designers. You can use asterisks, dashes or symbols as part of your comments to help in scanning the CSS.
See below.

7. Use shorthand code

To avoid adding bloat to a Cascading Style Sheet use shorthand properties to keep the size of your CSS files down. Page load times are becoming an important issue with more and more people using mobile devices, but from a designers point of view It helps to make the code look neater and easier to scan. Its very important that you understand the order in which CSS interprets these shortcuts: top, right, bottom, left. See below.

8. Indenting CSS for improved scanning

Indenting the CSS code you’ve worked on, can visual help you locate them at a later date when further changes maybe needed. “Comments” can be added to give the designer guidance. This is ideal if your working with multiple lines. See below

9. Keep your class and id names easy to follow

Instead of names that are puzzling, always use ID and class names that reflect the purpose of the element in question and keep the names short or as brief as possible for code efficiency.

One of the advantages of CSS is to split the structure of the website from the presentation. Using just CSS you should be able to redesign a site without altering the HTML code so versatile naming for id’s and classes is essential. Leave “position” or “style” specific words out of your styles and id’s.

10. Group elements with common CSS declarations

Some elements share the same CSS declarations, so instead of re writing each one separately, group them as one. See below

11. CSS declarations on one line or multiple lines

This topic can be controversial with valid arguments for each. Personally I can see why keeping everything on one line can help you quickly scan your CSS. It can also help in keeping your CSS file smaller by removing unneeded spaces and characters. My preference is for multiple-line CSS, because that’s the way I’ve always done it. see the two examples below.

12.Use CSS inheritance and specificity

Using CSS inheritance and specificity will help you create clean, maintainable and flexible style sheets.

13. Alphabetize your properties

Make scanning easy on the eyes by formatting the main sections of your CSS selector attributes in alphabetical order. Other designers and developers maintaining the CSS will immediately benefit from this type of formatting.

14.Avoiding extra selectors

A bloated Cascading style sheet is usually the cause of unwanted styles. Look for opportunities to combine or condense styles. You’re not alone in seeing duplicate styles for unique elements; it’s a natural part of a good design to have consistent styling throughout your site. Just ensure that you’re only attributing one set of declarations to all the elements that should share styles.

There are several software’s and browser plugins to help you clean your Cascading Style Sheet. Tools like Dust-Me Selectors

15. Validate your CSS

Make use of W3C’s Free CSS Validator. Validating your CSS will give a clear indication as to the quality of your style sheets syntax. It will give you helpful advice on any discrepancies and generally help in the development or maintenance, even if the work is carried out by someone else on your team and its free!

Keep things clean!

Refrain from using hacks if at all possible and use Microsoft’s conditional statements to target old browsers. Keep all conditional statements and code in a external style sheet and don’t add them to your main style sheet. See below

Conclusion

Organizing your Cascading Style Sheet in this way will improve maintenance times, making updating a much simpler process whether your working alone or within a team. It has to be remembered that these helpful tips are Not wrote in stone and everyone has a different idea and way of coding their own style sheets. What is important is that you can take some small part of it and integrate it into your own work flow.

How to Organise a Cascading Style Sheet

Please feel free to add other useful tips or comment on whats been covered….

This entry was posted in CSS3, Web design and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  • Contact details

  • Pinterest

    • 67500_50582234614769
    • Stay on the line
    • Zentangle #122 - Ins
    • Stay on the line | I
    • “Curiosity” by René
    • A Perfect Monster: T
    • Synesthesia Garden -
    • santiago caruso
    • santiago caruso
  • Follow Me on Pinterest
  • Recent Posts

  • Category Posts

  • RSS UX Web Design Tutorials

  • Twitter :@stephen_mp
  • Follow

    Get every new post delivered to your Inbox

    Join other followers