CSS - HealthTeacher/style-guide GitHub Wiki
Much of this was inspired by idiomatic-css. Please add to this guide if you find any particular patterns or styles that we've adopted internally.
Table of Contents
Naming
- Adhere to the SuitCSS naming conventions.
- JavaScript hooks should follow the
js-myJsHook
pattern. - Testing hooks should follow the
qa-myTestHook
pattern. - Do NOT apply styles to
js-
orqa-
prefixed classes.
Syntax
-
Use single quoted strings.
-
Never target an element by it's
id
, always useclass
names. -
Only use single-line selectors for selectors with a single attribute.
// bad .foo { color: #fff; font-size: 1.5rem; } // good .foo { color: #fff; }
-
Always prepend decimals values with a zero.
// bad font-size: .25rem; // good font-size: 0.25rem;
Organization
-
Alphabetize all CSS attributes.
-
Within a selector, place
includes
before CSS attributes.// bad .Component { font-size: 1.5rem; @include transition(background 0.3s linear); } // good .Component { @include transition(background 0.3s linear); font-size: 1.5rem; }
-
Only use nested selectors for browser states (e.g. –
hover
,focus
, etc), not for children or chains.// bad .Component { &.is-expanded {} .Component-child {} } // good .Component { &:hover {} } .Component.is-expanded {} .Component-child {}
Animation
- Always test your animations on varied devices early and often. Testing during prototyping will help avoid shipping animations that hurt performance and drop frames.
- Avoid using JavaScript for simple hover interactions. Rely solely on CSS when possible.
- Use the Velocity.js for complex animations.