CSS Guidelines and Advice

Most of this page is a simplification of SMACSS.

Overall

• We use SASS
• Formatting is done via CSS classes attached to HTML elements in HTML files
• Avoid using IDs for CSS formatting, as it limits the ability to re-use the CSS
• Use IDs for attaching Javascript functionality, or as targets of links

Categories of CSS

• Base rules define formatting of HTML elements. Usually defined on a single element selector, but sometimes on attribute selectors, pseudo-class selectors, child selectors or sibling selectors
• Layout rules divide the page into sections. They hold modules
• Modules are the reusable parts
• State rules are additional rules on layouts and modules based on the state, e.g. active/inactive, screen size, or located on the home page versus in an inside page
• Theme rules are typically optional (beyond what's provided by Bootstrap)

Bootstrap handles base rules and theme rules for us, mostly.

CSS (actually SASS) Files

• base.scss
• layout.scss
• theme.scss
• Each module gets its own file, which includes the state rules for the module

Naming Conventions

• CSS classes that exist to provide hooks for Javascript should begin with js- and should not have any formatting function, and therefore don't even need to be defined in a CSS file
• Layout rules start with layout-
• State rules start with is-
• Module names are simply the name of the module. A class for a calendar would be simply calendar
• Variations on a module start with the module name and hyphen. A class for a month view of a calendar would be calendar-month
• Class names are all lower case with - (hyphens) separating words

Motivation

For the motivation behind these guidelines, please see CSS Motivation.