CSS Engineering
微博: frontnode
QQ: 2080432723
开源地址: github.com/frontnode
Web开发,流程改进,最佳实践,性能优化
CSS ART

CSS TOOl
- Layout
- Theme
- Radius Border
- Gradient
- Shadow
- Transform
- Animation
CSS ZEND
TOO EASY
- No namespace
- No macros
- No mixins
- No function
- No variable
.text {
color: blue;
}TOO HARD
.marketing-section-enterprise {
overflow: hidden;
max-height: 375px;
padding-bottom: 20px;
margin-top: 10px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
background-color: #614381;
background-image: -moz-linear-gradient(#202d5f, #614381);
background-image: -webkit-linear-gradient(#202d5f, #614381);
background-image: linear-gradient(#202d5f, #614381);
background-repeat: repeat-x;
border-bottom: 0;
box-shadow: inset 0 10px 20px rgba(0,0,0,0.1);
color: #fff;
}
.marketing-section-enterprise.marketing-inline {
margin-bottom: 30px;
}
.marketing-section-enterprise h1>a {
color: inherit;
text-decoration: none;
}
.marketing-section-enterprise .marketing-header .lead {
color: #cecbda;
}
.marketing-section-enterprise .marketing-button {
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
padding: 9px 15px;
border-radius: 4px;
font-size: 18px;
background-color: #1d6ac8;
background-image: -moz-linear-gradient(#45b3f3, #1d6ac8);
background-image: -webkit-linear-gradient(#45b3f3, #1d6ac8);
background-image: linear-gradient(#45b3f3, #1d6ac8);
background-repeat: repeat-x;
box-shadow: 0 1px 1px rgba(0,0,0,0.25);
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-decoration: none;
color: #fff;
}
.marketing-section-enterprise .marketing-button:hover {
background-position: 0 -10px;
}
NOT BOTH
We have ways to make our work more efficient and code more clean


Structure Your CSS
SMACSS
- Base
- Layout
- Module
- State
- Theme
Title
DRY CSS
.jpg)
By Jeremy Clarke
Principle
- Keep style separate from content
- Avoid specificity by harnessing the cascade
CSS E
By frontnode
CSS E
- 1,034