- Avoid convoluted code
- Building abstract components
- Code that will be easy to maintain
- Single standard
- Use variables
- No element theming
- Create class and extend those on the element for base styling
- Style guide according to which base elements and components will be styled
- Specifity shouldn't be more than 3 level, 2 recommended
- Minimum use of id's
- Use @extend instead of chaining multiple classes
- Modular components - these will be extend with other compontents and should be closed for modifications
- Use attribute selectors when styling something like
[node-*] - Lists - use hanging punctuation, list-style-position: outside
- Sass & compass- use scss syntax
- Break design into as abstract components as possible
- write insemantic classes - these should be meaningful
- Create a TOC file for base and objects
- Properly document the code - with use case in comments
- Documents what will be extended and what will be used as a base
- Use Normalize (with customization if reqiured)
- Use Docblockr comments for documentation
- Use silent classes for helper classes like (clearfix, hidetext, etc)
- Base styling for html and body element
- set box-sizing: border-box using compass
- Set margin in one directio (down)
- Use BEM naming convention with Smacss
- set ligature on heading depending upon the fonts
- One component test shouldn't affect other component
- Use CSS profile in dev tools
- Helium test to check reuse
- grep to check how many time a property is being used (grep -r !important . | wc -l)
- Run stylesheet through csslint
- Output single file for production
- Double heirarcy theming (h1, .h1)
- Prefix based on caniuse
- Set up grids - singularitygs
- Recommended imports - compass, singularitygs, toolkit
- Components that can work without being dependent on other components
- Ability to join this components like lego block
- Two space indentation