Conventions
- Create and extend CSS files following global patterns. Minimize customization, as features are rarely styled in isolation.
- Avoid descendant selectors (i.e. don’t use
.sidebar h3). - Avoid attaching classes to elements (i.e. don’t do
div.headerorh1.title). - Avoid using
!important, except in rare cases. - Use a LESS / SCSS compiler for readability. CSS-in-JS is popular, but not as useful in Agile teams with only basic CSS skill sets.
- Use shorthand properties everywhere (i.e.
border: 1px solid red) - Always specify margin and padding as complete selector sets (i.e. use
margin: 1rem 0 0 0to specify top margin rather thanmargin-top: 1rem)
CSS Files
Aim for the smallest CSS footprints by organizing LESS / SCSS styles into separate files that can be imported selectively for each view as needed.
Order styles from general to specific. Watch out for selector order - the last selector loaded wins.
Variables
Repeating elements are good candidates for turning into variables:
@mediabreakpointscolorborderandborder-radiusbox-shadow@font-face
Declaration Order
Order declarations alphabetically under selectors (they're easier to maintain that way).
Place vendor selectors (-webkit, -moz, -ms, -o) before their conventional counterparts.
Selector Names
Leverage the name to describe a feature or function better than or in place of a comment (i.e. .site-header-mobile).
Classes
- Follow a kebab lowercase case convention (
class="block-header-mobile"), or Block_Element-Modifier (BEM) syntax when not using SCSS/LESS (class="search-card__header-mobile). - Name and collect selectors into the blocks, features or components they describe. Avoid one-offs.
- Avoid IDs as code hooks, but if unavoidable, prefix the class name with "js-" or "ts-" (
class="js-search-button")
IDs
- Avoid IDs as styling hooks. Reserve for JavaScript/TypeScript hooks. Follow camelCase convention (i.e.
id="modal-Dialog-Open-Click-21")
Order classes to create a visual hierarchy, like:
.card-wrapper
.card
.card_header
.card_header_image
.card_main
.card_main-red
...
Create global classes that can be added as modifiers to any HTML element as needed (i.e.: hide, center and apply block shadow to the card block class="card hide center shadow")
Text Case
Sentence
- upper =>
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG - lower =>
the quick brown fox jumps over the lazy dog
Flat
- upper =>
THEQUICKBROWNFOXJUMPSOVERTHELAZYDOG - lower =>
thequickbrownfoxjumpsoverthelazydog
Pascal
TheQuickBrownFoxJumpsOverTheLazyDog
Camel
theQuickBrownFoxJumpsOverTheLazyDog
Snake
- upper (aka train case, screaming kebab) =>
THE_QUICK_BROWN_FOX_JUMPS_OVER_THE_LAZY_DOG - lower =>
the_quick_brown_fox_jumps_over_the_lazy_dog - pascal =>
The_Quick_Brown_Fox_Jumps_Over_The_Lazy_Dog - camel =>
the_Quick_Brown_Fox_Jumps_Over_The_Lazy_Dog
Kebab
- upper =>
THE-QUICK-BROWN-FOX-JUMPS-OVER-THE-LAZY-DOG - lower (aka dashcase, spinalcase) =>
the-quick-brown-fox-jumps-over-the-lazy-dog - pascal (aka HTTP-Header-Case) =>
The-Quick-Brown-Fox-Jumped-Over-The-Lazy-Dog - camel =>
the-Quick-Brown-Fox-Jumped-Over-The-Lazy-Dog
Units
Use rem instead of px units for sizing. This helps the UI scale proportionally when the browser zooms. Set the rem base scale globally by specifying a font-size in the <html> and/or <body> element.
Set this font-size to ten pixels so rem units can be readily be calculated as multiples of ten. For example: 10px = 1rem, 16px = 1.6rem, 250px = 25rem, 599px = 59.9rem ... and so on.
html,
body {
font-size: 10px;
}
Breakpoints
Write base styles for mobile devices first and override them with breakpoint media queries for progressively larger displays.
Spec breakpoints that fall between the widths of major display types. The combination of max and min width breakpoints approach makes working with phones easier.
@media (max-width: 59.9rem) {}
@media (min-width: 60rem) {}
@media (min-width: 90rem) {}
@media (min-width: 120rem) {}
@media (min-width: 180rem) {}
Variable names can help implementation.
More expressive variable names are better.
Position media queries so they are close the base styles they modify.
.site-menu-desktop {
display: none;
}
@media (min-width: 600px) {
.site-menu-desktop {
display: initial;
}
}
Or
Fonts
Font Families
Current favorite web font families are sans-serif => Open Sans, Whitney SSm, and Barlow. For code blocks => Monospace
Font Scale
A typographic scale for font sizing based on classic proportions like 1:2, 2:3, 2:5, 5:8, etc.
Note: a Minor Third scale can accomodate up to five header sizes. Most sites only need three.
Colors
Using Hex instead of HSL is usually easier for others on the team edit and maintain. Keep the byte count low by using the three-digit shorthand syntax.
// darken primary color by 10%
--color-font-link-selected(var(--color-primary) l(-10%)
Using HSL allows for more programmatic color control.
Keep colors global where possible for repeatability across products.
Color Functions
Color Functions
color: color(var(--color-background-primary) l(-10%));
Icons
Font icons like Google Font Icons or IcoMoon (with the online IcoMoon App) can consume less memory than PNG and JPG sprites. These icon sets can also be versioned. The defaults are free, and you can upload your own.
Use named wrapper (container) and block classes to shape w/ width, height, overflow around base class elements.
Scalable Vector Graphics
Good resolution at any scale. Can be version controlled individually. This approach employs a pseudo element to add an SVG icon before or after a string of text with a mask property. It is aligned with display:inline or display:inline-block, and remember to add the content selector.
Example 1
SVG code specified directly in mask-image url.
Example 2
SVG file path specified in mask-image url.
/assets/avatar.svg
External References
- Google Design Standards
- Google Style Guide
- Apple's IOS Human Interface Guidelines
- Bootstrap Framework
- The New Code
Architectures
- Block Element Modifier (BEM)
- Object Oriented CSS (OOCSS)
- Scalable and Modular Architecture for CSS (SMACSS)