Front End Standarization
# 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