文档章节

CSS开发规范

名字已被取
 名字已被取
发布于 2015/09/23 20:46
字数 2190
阅读 6
收藏 0

目录

CSS开发规范

概述

制定本规范的目的在于使我们的CSS代码更加易于维护和重用,从而提升效率执行本规范时建议的流程
建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup),即DCDVR的流程。首先需要规划样式并分为共有样式 和页面个性化样式,然后才开始编码,编码的同时进行Debug,Validate和代码片断的总结,而不是在所有模板都完成后才进行这三个步骤。

一、selector 命名

  • 命名除 .fn- , .ui- , .sl- 外,可自定义命名。请慎用 selected current disabled first last success error。

  • 一般情况下,如果命名比较通用,比如 current,请限定在相应的上下文环境中。比如其父节点ID为#parent 等比较通用的命名,建议写成 #parent .current{},而非 .current{},即使是为了重用,也应该注意。只有在非常明确不会影响到其他组件工作,并且其他人不会写这种命名的情况下,才让它变成全局通用的。

  • 作为JS接口的class或者ID,必须是以 J- 前缀开头的。除 JS 接口命名外,其他命名一律使用小写字母。

二、CSS文件注释

组件注释  

/**
 * @name: 组件名
 * @overview: 组件介绍
 * @require: 依赖的样式
 * @author: 小鱼(sofish@163.com)
 */
  • 块状或行内元素,都请使用 /* comment */ 注释,注释文字前后端保持各有一个空格。

  • 为了您的体验着想,一目了解的代码,就不要注释了,比如 “display:none; /* 让元素看不见 */” 。

三、CSS文件

  • 文件编码必须使用utf-8(无BOM)

  • 文件一律通过link方式引入(NOT @import)

  • 当只是单个页面使用时,才写在<head>的<style>中。

四、hack规则

  • 一般情况下,不要使用 IE 条件注释: <!-[if IE]><![endif]->

  • 通用 Hack

.all-IE{property:value\9;}
.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;} }

当然,强烈建议你使用更优雅的hack方式。那就是避免hack。或者在书写上,做点小trick。比如:  

.selector .child{property:value;} /* for ie-6 */
.selector > .child{property:value;} /* except ie-6 */
  • 关于Hack: 在firefox写完,IE有问题?还是其他浏览器也出现了。你知道IE Hack 能解决。我想,你也可能知道,用其他方法也能绕过。建议少用Hack。


五、CSS书写规范

1.如下写法为例:

第一种方式:(强烈推荐)  

/* 区域模块-1 */
.tech, .ued{
    background:#f60 url(xxx/orange.png) no-repeat 0 0;
}
/* 区域模块-2 */
.tech{
    width:950px;
    margin:0 auto;
}
.tech .wd{
    width:620px;
    float:left;
}

第二种方式:(如果让其他人看,请先格式化) 

/* 区域模块-3 */
.ued{width:100%;padding:30px 50px;}
.ued .visual{display:inline-block;font:700 normal 12px/1.5 arail;}

2.需要非常注意的点

  • 区域模块间用空行分隔

  • 多个选择器写一起时,逗号(,)后紧跟一个空格

  • 避免行内样式,即使是JS,也应该尽量使用class/ID来决定显示,而非行内样式。

  • 避免使用低效选择器,参考http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html

  • 尽量使用缩写,比如 font:700 normal 12px/1.5 arial; 一般不要写成

font-weight:600;
font-style:normal;
font-size:12px;
line-height:1.5;
font-family:arial;

通常需要使用缩写规则的:

padding: top right bottom left; <--> padding: top-bottom right+left; <--> padding: top left-right bottom; <--> padding: top-right-bottom-left; 如:padding:1px 2px 3px 4px;
margin: 同上 
color: red; color;#FFF; color:#ABCABC (颜色名>16进制写法;颜色名采用小写,16进制使用大写;写3位,还是6位,自便)
background: color imageUrl repeat attachment position; 如:background:#ddd url(wd.png) no-repeat scroll 10px 20px;
border: size style color; 如: border:1px solid #ddd;
font: weight variant style size/lineHeight family; 如 font:700 small-caps italic 12px/1.5 "Courier New"; font-weight 统一用 500 代替 normal, 用 700 代替 bold;
list-style: type position image; 如:list-style: square inside url(wd.png); 不过,通常我们要使用的是 list

CSS3 书写规范:浏览器私有写法在前,标准写法在后。  

-moz-box-shadow: 1px 2px 3px #ddd;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;

书写顺序
不强制书写顺序。但我们应该养成良好的习惯,让看代码的人更易理解。易读对于团队协作来说是非常重要的:
1. 框架为先,细节次之。
比如写一个浮动容器的样式,我们应该先让这个容器的框架被渲染出来,让大家看到基本的网站框架。然后再再去渲染容器里面的内容。最终呈现给用户. 通常像 color font padding 之类的,写在后面。  

.selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}

2.有因才有果。
比如想使用”图片替换文字“技术,通常要使用的text-indent。如果我们使用标签的是 span:<span>这个文字将被图片替换</span>,那么正确写法:

.thepic{display:block;text-indent:-9999em;}
.thepic{display:block;text-indent:-9999em;}

 

我们应该是先将 span 变成”块级元素“,再将文字 indent。而不是先 indent 再变成块级的。
又如我们,如果想让一个 span 使用 margin, 那么我们应该这样写:

span{display:block;margin-bottom:10px;}

而非margin-bottom先行,因为没有 display 之前,行内元素是没有 margin 的。

六、IE私有特性

  • expression

记住一句话:无论什么时候,都不要使用它。用 Javascript 吧。更优雅,更灵活。

  • filter

应该尽量避免使用 AlphaImageLoader,可以适当在投影/发光/渐变/去色方面上使用。

  • IE bug

七、如何规划你的 CSS 文件结构

1.一定要有全局设置

全局设置可以避免重复书写同样的东西。比如3人在一个项目中,假设项目中涉及到的链接有 10 种颜色,如果有全局重设,我们就可以统一设置颜色。如果没有,我们可能每个都会为自己所负责部分的链接定义相应的颜色。这样一来就导致多处定义,且定义不 统一。以后维护需要到各个地方都改。这是很麻烦的事。另外就是css文件也会因此变大。所以,在写之前,大家应该先分析视觉稿,统一全局设置。 

/* global reset */
body{padding:0;margin:0;font.....}
a{color:#07f;}
a:hover{color:#555;}

需要注意的是,一般情况下,不要直接给标签写样式。而应该使用 class。像下面这种写法,并不合适:

h1{font-size:30px}
h2{font-size:20px}
h3{font-size:10px;}

如果有另外一个 h2 也要使用 10px 的,而其他的都仍使用 20px 的,那可就不好办了。所以,推荐用这种方法:

/* global classes */
.text-size30{font-size:30px;}
.text-size20{font-size:20px;}
.text-size10{font-size:10px;}
...
<h2 class="text-size20">...
<h2 class="text-size10">...
<h2 class="text-size10">...

       

2.一定要模块化

有两点需要注意的,一是,注意代码重用的模块化;另一是,注意 HTML 结构的模块化,而不是分块。

  • 代码重用的模块化:

<div class="margin-test">
        <div class="margin-2">i am 2.</div>
    </div>
    <div id="module-1" class="module">
        <h3>TITLE</h3>
        <p class="module-item">
            some text
        </p>
    </div>

    <div id="module-2" class="module">
        < h3>TITLE</h3>
        <p class="module-item">
            some text
        </p>
    </div>

    /* module, reuse style in module scrope*/
    .module{}
    .module-status{}
    .module-item{}
    .module-status .module-1-item{}

    /* customize */
    #module-1 .module-item{}
    #module-2 .module-item{}

HTML 的模块化:
我们应该这样写(他们的视觉是一体的,代码也应该是一体的):  

<div id="module-1" class="module">
    <h3>TITLE</h3>
    <p class="module-item">
        some text
    </p>
 </div> <!-- #module .module -->

而不是这样写:

<h3>TITLE</h3> <!-- 第一块 -->
<div id="module-1" class="module">
<p class="module-item">
    some text
</p>
</div> <!-- 第二块 -->

八、值得注意的事

1.Background Color

  • 一般我们都会写: background:url(path/to/image) no-repeat 0 0;

  • 当元素背景是深色的时候,比如#000,我们通常会选择一种比较浅的颜色来做为文本的颜色,比如#fff,为了避免网速缓慢导致CSS已经 加载,而图片仍未加载完成或图片服务器挂掉时文本不可见,请尽量使用加上CSS定义的背景颜色,如:background:#e8edef url(path/to/image) no-repeat 0 0;
    2.has Layout
    别用轻易使用hack,IE下很多兼容性问题都是 has Layout 引起的。试着给元素加上:

display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)

3. 代码测试:
一般情况下,我们需要测试通过的是电脑端的A-Grade浏览器:

更多关于这个列表的资料,请看:http://developer.yahoo.com/yui/articles/gbs/

本文转载自:

名字已被取
粉丝 3
博文 44
码字总数 4065
作品 0
杭州
网页/平面设计
私信 提问

暂无文章

PCB设计-Allegro软件入门系列-铺铜操作(下)

铺铜是PCB很常见的操作,PCB的敷铜一般都是覆地铜,增大地线面积,有利于地线阻抗降低,使电源和信号传输稳定,在高频的信号线附近敷铜,可大大减少电磁辐射干扰,起屏蔽作用。 本讲讲解啊一...

demyar
17分钟前
2
0
如何通过WASI SDK 在Linux上编译ZXing C++

Mozilla在今年三月份的时候公布了WASI。WASI的目标就是让WebAssembly在任何地方都可以运行,而不仅仅像现在这样只能运行在Node.js和Web浏览器中。WASI目前依然处于初级阶段,这篇文章分享下如...

yushulx
19分钟前
2
0
.Net界面开发神器—DevExpress官方汉化包免费下载!还在等什么?

点击获取DevExpress v19.1.7新版试用下载 DevExpress Localization Service允许您创建一组自定义的附属程序集,要将语言包添加到程序集中,请查看本文中为大家列出的对应版本的汉化包,下载并...

FILA6666
19分钟前
2
0
php生成二维码

        header('Content-Type: image/png');        //清除缓冲区,防止之前面不知道的情况下被加头部信息导致不显示图片内容        ob_clean();        $...

横着走的螃蟹
24分钟前
2
0
伪类和伪元素

伪类和伪元素 伪类和伪元素,对于绝大多数同学来说,都是耳熟能详的名字,但确实又有很多人搞不清楚它们之间的区别,以致于混淆概念。而当概念都混淆的时候,也往往意味着你不会经常使用它,...

不负好时光
26分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部