3) Know your Tools

  • Chrome Developer Tools for CSS
    • Inspect element
    • Computed Styles - displays all applicable style attributes, and what is used to determine the style.
    • Styles - displays all styles application to the current DOM node, grouped by ancestor element.
      • Auto suggest of style attributes
      • Alter values with arrow keys, page up/down.
      • Color picker
      • Menu: new style, set element state, change color format
      • Metrics Pane
    • Sources - review changes, save your CSS
      • Revision Nodes
      • Drag to Editor
      • Save to disk
    • Force Element State - force pseudo element state, ex. :hover
  • Visual Studio 2012
    • Code Regions
    • CSS Color Picker
    • CSS Snippets - generates cross browser CSS. example - type 'transition' then TAB
    • CSS Hierarchies
  • Blend for Visual Studio