You are here: Best Practices > Styling Best Practices

Styling Best Practices

OVERVIEW

Navigate from: Admin Home Page > Style and Templates

ADMINISTRATION

ClosedProper formatting


ClosedClass and ID naming conventions


ClosedProper HTML tag usage


ClosedStyles can be applied to Classes, IDs, and HTML elements


ClosedSpecificity in CSS

Specificity is a concept in CSS that determines how a conflict is resolved (competing CSS rules). The concept of specificity states that when two/more declarations apply to the same element, set the same property, and have equal importance/origin, the declaration with the most specific selector takes precedence.

ClosedSpecificity example

ClosedCalculating specificity


ClosedHiding elements using CSS

Before hiding elements using the CSS, ask yourself the following questions:

ClosedHiding elements

ClosedExample

Your site has the drop-down, titled "Price Book". Because this element does not serve a purpose on your site, you would like to hide it. Use Firebug to locate it's class and create the following CSS rule (with proper commenting):

/*Hiding Price Book Element*/

.pricebook-container{

display:none;

}


ClosedAdding/editing pre-existing CSS

In the process of implementing, upgrading, or maintaining a client site, you will likely find yourself needing to make a change to an existing stylesheet.

ClosedExample


ClosedExternal resources & design principles

ClosedDesign principles

ClosedExternal resource: websites

ClosedExternal resources: books


NOTES

RELATED TOPICS

Related Topics Link IconSee Also