读书频道 > 网站 > 网页设计 > Bootstrap实战
3.1.2 CSS规范和样式重用
2013-11-02 15:06:26     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

本书由国内资深前端工程师撰写,是目前内容最为全面和深入的Bootstrap专著。它不仅系统讲解了Bootstrap的各项功能和使用方法,详细讲解了Bootstrap的组件、插件和扩展技术,而且深度解析了Bootstrap的内核源代码  立即去当当网订购

合理而严谨的CSS设计,将使CSS代码更易于维护和重用,从而提升执行效率。一般应先规划样式,并严格区分公共样式和页面对象化样式;然后开始编码,在编码的同时进行调试、验证和代码片断的总结,而不是在所有模板都完成后才进行调试和代码整理。

1.Selector命名规范

一般情况下,Bootstrap选择器命名比较通用,如.btn、.input、.table等,这些类名都遵循对象化和语义化,符合用户使用习惯。当类名发生冲突,或者为了适应不同环境样式时,应该限定类的上下文环境。例如,针对.btn类型就定义了多个上下文环境,下面三个选择器分别适用于按钮、工具条、按钮组这3个不同的组件环境。
button.btn
btn-toolbar > .btn + .btn
btn-group > .btn

同时,Bootstrap样式类通过连字符后缀对一级类型进行细化。例如,针对.btn类样式,可以细分出很多子类样式。这种命名方法有两个好处:一是相同的前缀更方便类型管理;另一个是方便快速检索和应用。
.btn-large     大型按钮
.btn-small     小型按钮
.btn-mini     迷你型按钮
.btn-block     按钮块
.btn-primary    主要按钮
.btn-warning    警告按钮
.btn-danger     危险按钮
.btn-success     成功按钮
.btn-info     信息按钮
.btn-inverse     反转按钮

注意,只有在非常明确、不会影响到其他组件工作,并且其他人不会写这种命名的情况下,才让它变成全局通用的。

2.编码规范

CSS文件编码全部使用UTF-8,因此建议网页编码也应设置为UTF-8,确保编码一致性。在导入CSS文件时,应该明确定义rel和type声明,代码如下:
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

3.Hack规则

Bootstrap不使用IE条件注释:<!–[if IE]><![endif]–>。一般情况下,通过通用/Hack来解决浏览器兼容问题:
.all-IE{property:value\9;}
:root .IE-9{property:value\0/;}
.gte-IE-8{property:value\0;}
.lte-IE-7{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
.not-IE{property//:value;}
@-moz-document url-prefix() { .firefox{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;}}

当然,在自定义CSS样式时,强烈建议使用更优雅的Hack方式,那就是避免Hack。或者在书写上,用点小技巧。例如:
.selector .child{property:value;} /* for ie-6 */
.selector > .child{property:value;} /* except ie-6 */

4.CSS3书写规范

Bootstrap遵循浏览器私有写法在前,标准写法在后,例如:
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

不强制书写顺序。但用户应该养成良好的习惯,让看代码的人更易理解。易读对于团队协作来说是非常重要的。

框架为先,细节次之。如写一个浮动容器的样式,应该先让这个容器的框架被渲染出来,先看到基本的网站框架。然后再去渲染容器里面的内容。最终呈现给用户。像color、font、padding之类的声明通常写在后面。

有因才有果。例如,想使用图片替换文字技术,通常要使用text-indent。如果使用<span>标签:<span class="thepic">这个文字将被图片替换</span>,应该是先将<span>变成块级元素(display: block),再将文字隐藏(indent)。
.thepic{
      display: block;
      text-indent: -9999em;
}

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.1.1 CSS全局样式设计思路
下一篇:3.1.3 CSS重设
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站