styled-component-template

Styled Component Template

A collection of templates to help create consistent, performant component styling for CSS and most major CSS preprocessors.

Comment Detail

The ordering of these is intentional. These groupings leverage the cascade to make the partials as efficient as possible.

The comments below link to the Sass partial for reference, but apply to every template.

• 01 Provides an 80 character-wide column marker
• 02 Category type: Layout, Object, Component, Theme, etc.
• 03 This is the partial's name spelled out as a proper noun
• 04 A link to the partial on a living styleguide, if available
• 08 Use this comment block to provide any high level background information about the partial. Can span multiple lines, is constrained to an 80 character-long width. May be replaced with SassDoc
• 13 Update to reflect the component's type and name. For example, a layout partial's class name would be called .l-sidebar
• 14 Encapsulated logic prevents unpredictable behavior
• 15 Variables can be used for all subsequent logic
• 19 Use extends with a healthy dose of discretion
• 21 Group properties alphabetically by intent. Use an empty space between each property grouping for easier scanning
• 26 cursor, transition, etc.
• 28 Pseudo classes can inform pseudo elements, therefore they come first
• 37 Use HTML (ex: [hidden]) and ARIA (ex: [aria-busy="true"]) attributes to provide meaningful, semantic states
• 39 Use Sass' ampersand selector to modify the partial's presentation based on a class declared higher up in the DOM. This is useful for theming and modifying behavior based on state. Ex: .t-dark & { … }
• 42 Although @supports is technically not a media query, it is very similar behavior-wise
• 43 Feature queries include Reduced Motion, High Contrast Mode, etc.
• 44 Be sure to develop partials mobile first. I find a library like mappy-breakpoints helps to manage breakpoints and tweakpoints. After declaring a breakpoint, be sure to follow this template's ordering within the breakpoint
• 46 Sass' ampersand selector works really well with a BEM naming methodology. Be sure be sure to follow this template's ordering within the nested selectors. Try not to nest selectors more than 3 deep—if you find yourself doing so, you can probably refactor

Notes

• I prefer to use a comment as a subsection heading. I find it helps making scanning the file easier