Cascading Style Sheets/Troubleshoot Order

Use a reset block as the single location to style element selectors without classes or IDs to avoid cascading issues Use a CSS Validator to ensure that typos and conflicting declarations aren't causing bugs on your page Reference IDs and classes directly without prefixing them with parent tag or class names Use shorthand syntax for classes and longhand syntax for IDs to avoid setting unnecessary defaults and simplify debugging of dynamic class changes through scripting or property changes through pseudo-classes Don't use the same class to set both dimensions and other box model rules including margins, borders, and padding to avoid limiting the reuse of size or spacing rules among different elements Use a simple class selector, such as .new{ font:bold;} instead of creating complex descendant selectors to define a single property, such as .menu .title .new{ font:bold; } to maximize to readability and reusability of the codebase Don't use DOM property names (length, item, namedItem, tags, urns) as ID values since they will cause JavaScript conflicts in IE since it considers property names to be reserved words Don't use attribute name values as ID values since they will cause JavaScript conflicts in IE. For example, using "description" as an ID value may conflict with the description meta tag. Create unique new classes instead of parent dependent subclasses Copy common properties, such as colors and font size, to new classes as a preventive measure so that an element is not dependent on multiple classes due to a single property of each one, since the class references in the HTML may end up looking like inline styling. This also helps avoid inheriting unneeded properties, such as padding and margins, and subsequently needed to reset these properties in new classes Minimize usage of the descendant selector (e.g. #parent .child) and the child selectors when styling elements to avoid long lookups of the DOM tree Define classes to style block level elements(.content) instead of using tag references by ID (#main p) to make them independent of their parent elements Define state changes in CSS by prepending copies of existing selectors with semantic class names that map to JavaScript functions, then append the class name to the documentElement when the DOM event is triggered Avoid semicolons on the last style declaration to avoid accidentally typing the end bracket before the semicolon and generating an error Avoid naming conventions in which a class describes the property it invokes so that the style sheet does not become a one-to-one mapping of names to functionality which leads to HTML code which resembles inline styling with multiple class references for every element. Use styles to set properties for tables instead of table tag attributes for cross browser consistency Add subclasses for common needs, such as highlighting the first or last item in a list, hiding and showing comment text, emphasizing the current navigation selection, and switching star rating colors on and off Use semantic ID names for standard layout components, when there is only one such component per page, such as banner, logo, badge, screenshot, thumbnail, breadcrumbs, navigation, sidebars, marquee, subnav, content, gutter, headmargin, footmargin, sidemargin, baseline, overlay, fold, ads, widgets, and audio/video players For example, <img id="background" src="background.png"/> <p id="logo"><em>Happy Fun Ball</em></p> <p>Normal text</p> Use semantic class names for standard prose components that may need specific styling, such as sentence, phrase, clause, salutation, lead-in, suffix, prefix, anagram, homonym, contraction, gerund, idiom, interjection, onomatopoeia, timespan, etc. Use semantic class names for standard article components that may need specific styling, such as headshot, caption, mugshot, masthead, folio, subhead, dateline, byline, topic, bio, ticker, alert, boilerplate, dropcap, slogan, keyword, tease, sample, snippet, sidebar, boxscore, ranking, standing, poll, addendum, soundbite, pullquote, plugs, followup, letterhead, etc. Use semantic class names for essay components that may need specific styling, such as objective, excerpt, aside, citation, footnote, topic, annotation, summary, table of contents, etc. For example, <p class="aside">(a parenthetical aside)</p> <p>Normal text</p> <p class="aside">(another parenthetical aside)</p> Style fonts and colors for standard layout components first to avoid redundancy and take advantage of the cascade when defining nested elements Reset styles at the beginning of the style sheet to overwrite inconsistent defaults across browsers Remove redundant and obsolete styles when moving test code to production Use classes instead of IDs for any code intended to work inside the sandbox of a third party API, since IDs may be stripped out to avoid conflicts Use the following XSLT CSS preprocessor template to add CSS variables to your stylesheet using browser or server-side scripting: <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="text" omit-xml-declaration="yes" media-type="text/css" /> <xsl:param name="color" select="'#fff'"/> <xsl:template match="*"> h1 { color: <xsl:value-of select="$color"/>; } </xsl:template> </xsl:stylesheet>