CSS工作流
2015-04-04 11:59
148 查看
书写规范
1、使用2个空格的缩进; 2、使用Unix风格换行符(LF); 3、删除行尾多余的空格; 4、文件末尾增加一个空行。 以上的创作规范可以在编程器,如在Sublime Text中写一个插件自动实现以上功能。
重置
1、CSS Reset:如使用*选择器是一种简单粗暴的效果,会重置浏览器的默认样式,其效率会降低很多,尽管没有人通过实践证明过它:*{margin:0; padding:0; }
所以使用针对部份样式进行重置,如下:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
网友分享的常用样式重置
2、Normalize.css:它可以保护有用的浏览器默认样式,而不是去完全去掉它们。它的特点有:
(1)可以修复浏览器自身的Bug并保证跨浏览器的一致性;
(2)模块化,按需定制。
Normalize.css下载
Normalize.css使用方法
3、Neat.css:基于Normalize的全新cssReset,兼容IE6+以上及其它浏览器。其特点:
(1)人性化的细节处理:如textarea 默认只能垂直拖动,防止宽度改变破坏布局,汉字字号小于 12px 不易阅读,为 元素设置默认值为 12px等。
(2)移动设备优先: iPhone 横屏时默认会放大文字,如果页面已经做了响应式,这可能会破坏布局。
(3)考虑响应式:IE6 以上浏览器,图片默认支持缩放。
(4)跨平台最佳 font-family。
(5)中文排版解决方案。
(6)解决表单渲染问题。
Neat.css样式解决方案
前缀
1、手写前缀:标准属性应该放到最后,IE不用前缀。.foo{ -webkit-transtion:width .3s; -moz-transtion:width .3s; -ms-transtion:width .3s;/*IE 不用前缀*/ -o-transtion:width .3s; transtion:width .3s;/*标准属性应该放到最后*/ }
2、Emmet插件:如使用Sublime Text的Emmet插件功能,在输入trans3s时按下Tab键就会自动生成前缀。
3、Autoprefixer:对比Emmet,只用写标准的css属性,不仅可以增加前缀,还可以批量删除。
闭合浮动
CSS 后处理工具:CSS GraceCSS Grace 介绍及使用
.foo{ clear:fix; overflow:hidden; }
前后处理
(1)后处理器是什么?- css压缩:clean-css
- 自动加前缀:Autoprefixer(基于postCss)
- css属性排序:CSScomb
- Rework,取代Stylus
- PostCSS
(2)预处理与后处理器的关系?
后处理器的特性:CSS原生语法,学习成本低,支持预处理器,完善整个CSS工作流,把逻辑交给JS。
相关文章推荐
- #笔记# CSS工作流
- 以工作流为核心的企业开发平台架构
- DIV+CSS三列式布局的实现方法
- 模拟阴影效果纯CSS圆角矩形
- CSS 网页布局中文排版的9则技巧
- 收藏:css
- 25 个超棒的使用 CSS 设计的网页背景
- 网页设计中常用并且很重要的css
- CSS学习笔记
- CSS中display:inline-block和overflow:hidden无效
- CSS
- css实现阴影效果(box-shadow)
- css中的颜色及长度
- css隐藏/显示文字的方法
- CSS换行:word-wrap、word-break和text-wrap差别
- 用一两句话说一下你对“盒模型”这个概念的理解,和它都涉及到哪些css属性
- CSS学习笔记:表格
- 移动端 touch 手机拖动 css停止问题
- 纯CSS画图——哆啦A梦
- css清除浮动float方法