Cacher is the code snippet organizer for pro developers

# image responsive
.image {
  width: 100%,
  height: auto
}

px -> 100 px
em ->  1em = follow the parent above the level
rem -> 1em = follow the root parent
body{
  font-size:10px;
}

install EMMET for automization shortcut in CSS & HTML
example EMMET function:
body {
  fz(tab will automatic change to font-size)
}

/*Button*/
.button {

}
.spaceAfterThisWord {

}
after selector before bracket brace use space


BEM (Block Element Modifier)


Block
  .alert
Element
  .alert__title
  .alert__content
Modifier
  .alert--success
  .alert--warning
  .alert--error

example call class in html:
<div class = "alert alert--success">
  <div class="alert__title"></div>
  <div class="alert__content"></div>
  
if there are some same names : 
  .shopping-cart
  .shopping-cart--sidebar
  .shopping-cart--popup


assets
    |- css
    |    |
    |    |- Vendor
    |    |
    |    |- main.css
    |
    |- fonts
    |
    |- images
    
if use gulp or sass, change css folder name to stylesheets
dist: src -scripts, -stylesheets, -fonts, -images

JS
  |
  |- vendor
  |
  |- main.js
  
images
  |
  |- icon-fb.png
  |
  |- icon-twitter.png
  |
  |- icon-fb--hover.png
  |
  |- icon-fb--active.png
  
if responsive better to use em than px, if fixed better to use px