simpleeui
/
standard.html

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>使用规范 - SimpleeUI - 上海同道前端UI库</title>
	<link rel="stylesheet" href="css/simplee-debug.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="header">
    <div class="container">
      <div class="grid grid-4 first logo"><a href="index.html">SimpleeUI</a></div>
      <div class="grid grid-11">
        <ul class="menu unstyled inline">
          <li><a href="index.html">首页</a></li>
          <li><a href="css.html">CSS组件</a></li>
          <li><a href="javascript.html">JS插件</a></li>
          <li><a href="standard.html">使用规范</a></li>
        </ul>
      </div>
      <div class="grid grid-5 last"><a href="mailto:gaom19900925@gmail.com">@_Simplee_</a></div>
    </div>
  </div>
  <div class="content clearfix">
    <div class="container">
      <div class="grid grid-20">
        <h3>CSS规范</h3>
        <table class="m-table demo">
          <tr>
            <td><a href="#category">分类(Category)</a></td>
            <td><a href="#name">命名(Naming)</a></td>
            <td><a href="#format">格式(Format)</a></td>
            <td><a href="#practice">最佳实践(Practice)</a></td>
          </tr>
        </table>
      </div>
      <div class="workplace grid grid-20">
        <h4 id="category">分类(Category)</h4>
        <div class="document-box">
          <h4>一、CSS文件的分类和引用</h4>
          <p>通常，在中小型网站项目中，我们只引用一个CSS文件，来让页面结构更清晰。对于大型的网站或管理系统，我们需要把CSS文件进行分类。</p>
          <p>分类原则按照性质与用途来分类，主要分类包括“公共型样式”、“特殊型样式”。如果有换肤的需求，还需要“皮肤型样式”。并按此顺序依次引用。</p>
          <ol class="list-num">
            <li><p>公共型样式 - global.css：主要包括“重置(reset)和默认(base)”、“统一调用的背景图(CSSSprites)”、“清除浮动(clearfix)”、“网站通用布局”、“模块及扩展”、“元件与扩展”、“皮肤类基础样式”。</p></li>
            <li><p>特殊型样式 - style.css：主要适用于放置与网站主体、栏目差异较大或维护率较高的页面。如专题页面等。</p></li>
            <li><p>皮肤型样式 - skin.css：如果网站或管理系统有换肤方面的需求，则将颜色、背景等放在这里。</p></li>
          </ol>
           <h4 id="css-structure">二、CSS文件内部结构和顺序</h4>
           <p>在保持样式都能生效的基础结构上，我们需要思考的是如何让团队更有效率的工作、和后端保持良好的对接。所以我们根据盒模型的具体用途将其分为4个类型，分别为：<span class="text-error">布局(grid)</span>、<span class="text-error">模块(module)</span>、<span class="text-error">元件(unit)</span>、<span class="text-error">皮肤(skin)</span>分类的命名方法详见命名规则。</p>
           <p>在CSS文件中，我们希望各类型的结构顺序能如下：</p>
           <ol class="list-num">
             <li><p>重置(reset)和默认(base)：主要用于消除默认样式和浏览器之间的差异；设置部分通用基础样式如常规文本样式、超链接样式等，按需设置；</p></li>
             <li><p>统一处理：主要放置统一的背景图片、清除浮动等用于全局处理的样式</p></li>
             <li><p>布局：主要用于页面结构的处理，通常将页面分为页头、导航、主体、侧栏、页尾等。</p></li>
             <li><p>模块：通常将一个整体的常用功能区块定义为一个模块，例如搜索、列表、版权、分页等。</p></li>
             <li><p>元件：通常是一个不能再分的元素，且会复用于各个模块之中，例如按钮、文本框、图标等。</p></li>
             <li><p>皮肤：只用于有换肤需求网站及项目，用来设置皮肤型样式的文本样式、背景、边框等属性。</p></li>
           </ol>
        </div>
        <h4 id="name">命名(Naming)</h4>
        <div class="document-box">
          <h4>一、使用类选择器</h4>
          <p>ID在一个页面中的唯一性会导致以ID选择器写的CSS无法复用。所以正常情况下只使用类选择器。</p>
          <h4>二、"-"连字符</h4>
          <p>在此规范中，“ - ”作为分隔符来使用，比如搜索模块的结构应该为 .m-search ，其下级模块则是 .m-search-子模块名。为了让CSS命名更清晰和语义上更易理解，所以建议统一使用此方式命名。而不使用“ _ ”和驼峰命名法来命名。</p>
          <h4>三、命名方法：使用单字母+“-”为前缀</h4>
          <strong class="text-error">布局：（.g-） 模块：（.m-） 元件：（.u-） 皮肤：（.s-）</strong>
          <p>以上分类的详细解释见<a href="#css-structure">CSS文件内部结构和顺序。</a></p>
          <p>所有样式选择器都应该以上述命名结构开头，然后在里面使用后代选择器。</p>
          <p>当以上四类结构不能满足项目需求时，可以另外定义一个或多个新的分类。但命名方法必须符合上述命名方法，即： .x- 的格式。</p>
          <p class="text-error">特殊：.j-将被专用于JS获取节点，请勿使用 .j-定义样式。</p>
          <h4>四、命名规范</h4>
          <ul class="list-num">
            <li><p>使用小写字母作为class名</p></li>
            <li><p>尽量使用符合语义的英文单词作为class名，如列表模块：.m-list，列表模块中的每个项： .m-list-item。不要使用leftList、abc-item来命名。</p></li>
            <li><p>可以使用后代选择器来定义模块中的相同子项，如：.m-list li{}，为了最大程度降低页面布局被污染的风险，后代选择器不要在页面布局中使用。</p></li>
            <li><p>相同语义的不同类命名，添加数字或字母进行区分。如：.m-list、.m-list2、.m-list3等，都可以是列表模块，但是是结构和样式完全不相同的列表模块。</p></li>
          </ul>
          <h4>五、模块与元件的扩张类命名</h4>
          <p>当A、B、C...几个类型相同，外形相似的模块或元件，可将基础型的模块或元件作为基类，再此基础上再进行扩展。如：基类为.m-list的扩展类为.m-list-1、.m-list-2等。基类可以单独使用，如：class=”.m-list”，但是扩展必须基于基类使用，如：class=”.m-list .m-list2”。</p>
        </div>
        <h4 id="format">格式(Format)</h4>
        <div class="document-box">
          <h4>一、选择器、属性与值都使用小写</h4>
          <p>在xhtml标准中规定了所有标签、属性与值都使用小写，CSS也是如此。</p>
          <h4>二、选择器的定义在单行中完成</h4>
          <p>为了便于选择器的阅读与编辑，也便于模块的识别。去除代码中多余的空格和换行。</p>
          <pre class="prettyprint">
/* 单行去定义一个选择器 */
.m-list .title,.m-list li{line-height:30px; color:#333;}
</pre>
          <h4>三、最后一个值也以分号结尾</h4>
          <p>理论上，CSS选择器中的最后一个属性值的分号是可缺省的，但是为了将来的修改与维护，请加上它。</p>
          <h4>四、省略值为0时的单位</h4>
          <pre class="prettyprint">
.m-list{padding:0 10px; margin:0;}
</pre>
          <h4>五、在属性值中使用单引号代替双引号</h4>
          <h4>六、属性书写的顺序</h4>
          <p>依次按照 显示属性 > 自身属性 > 本文和装饰属性 的格式进行书写。</p>
          <table class="m-table code table-condensed m-table-bordered m-table-striped">
            <thead>
                <tr><th>→</th><th>显示属性</th><th>自身属性</th><th>文本属性和其他修饰</th></tr>
            </thead>
            <tbody>
                <tr><td>&nbsp;</td><td>display</td><td>width</td><td>font</td></tr>
                <tr><td>&nbsp;</td><td>visibility</td><td>height</td><td>text-align</td></tr>
                <tr><td>&nbsp;</td><td>position</td><td>margin</td><td>text-decoration</td></tr>
                <tr><td>&nbsp;</td><td>float</td><td>padding</td><td>vertical-align</td></tr>
                <tr><td>&nbsp;</td><td>clear</td><td>border</td><td>white-space</td></tr>
                <tr><td>&nbsp;</td><td>list-style</td><td>overflow</td><td>color</td></tr>
                <tr><td>&nbsp;</td><td>top</td><td>min-width</td><td>background </td></tr>
            </tbody>
        </table>
        <p class="text-error">如果属性间存在关联性，则不要隔开写。</p>
        <pre class="prettyprint">
/* height与line-height有关联性 */
.m-list{position:relative; height:20px; line-height:20px; padding:0 5px; color:#000;}
</pre>
        <h4>七、注释格式</h4>
        <p>对选择器的注释统一写在被注释对象的上一行，对属性及值的注释写于分号后。</p>
        <p>注释内容两端需空格，已确保即使在编码错误的情况下也可以正确解析样式。</p>
        <p>在必要的情况下，可以使用块状注释，块状注释保持统一的缩进对齐。</p>
        <p>原则上每个系列的样式都需要有一个注释，言简意赅的表明名称、用途、注意事项等。</p>
        <pre class="prettyprint">
/* 单行注释文字 */
.m-list{position:relative; height:20px; line-height:20px; padding:0 5px; color:#000;}

/*
 *块状注释文字
 *块状注释文字
 */
</pre>
          <h4>八、选择器的使用</h4>
          <ul class="list-num">
            <li><p>原则上禁止使用行内样式style和ID原则其。</p></li>
            <li><p>不直接对HTML标签进行全局定义。</p></li>
            <li><p>选择器嵌套的就够不建议超过4级</p></li>
          </ul>
          <h4>九、避免使用CSS HACK</h4>
          <p>大部分不兼容的问题都可以通过方法和思路来解决。合理的结构和样式会极少碰到兼容问题。而IE下的很多兼容问题都是由haslayout引起的，详细解决方案可以参考<a href="http://sofish.de/1400 ">打败 IE 的葵花宝典：CSS Bug Table</a></p>
        </div>
        <h4 id="practice">最佳实践(Practice)</h4>
        <div class="document-box">
          <h4>统一的语义理解与命名</h4>
          <p class="text-error"><strong>布局（.g-）</strong></p>
          <table class="m-table code m-table-bordered m-table-striped">
            <thead>
                <tr><th width="33%">语义</th><th width="33%">命名</th><th width="34%">class名称</th></tr>
            </thead>
            <tbody>
                <tr><td>外围盒容器</td><td>wrapper</td><td>g-wrapper</td></tr>
                <tr><td>头部</td><td>header</td><td>g-header</td></tr>
                <tr><td>内容</td><td>content</td><td>g-content</td></tr>
                <tr><td>尾部</td><td>footer</td><td>g-footer</td></tr>
                <tr><td>主体</td><td>main</td><td>g-main</td></tr>
                <tr><td>主栏子容器</td><td>mainchild</td><td>g-mainc</td></tr>
                <tr><td>侧栏</td><td>side</td><td>g-side</td></tr>
                <tr><td>侧栏子容器</td><td>sidechild</td><td>g-sidec</td></tr>
            </tbody>
          </table>
          <p class="text-error"><strong>模块（.m-）</strong></p>
          <table class="m-table code m-table-bordered m-table-striped">
            <thead>
                <tr><th width="33%">语义</th><th width="33%">命名</th><th width="34%">class名称</th></tr>
            </thead>
            <tbody>
                <tr><td>标志</td><td>logo</td><td>m-logo</td></tr>
                <tr><td>版本</td><td>version</td><td>m-version</td></tr>
                <tr><td>导航</td><td>nav</td><td>m-nav</td></tr>
                <tr><td>子导航</td><td>subnav</td><td>m-subnav</td></tr>
                <tr><td>面包屑</td><td>crumb</td><td>m-crumb</td></tr>
                <tr><td>菜单</td><td>menu</td><td>m-menu</td></tr>
                <tr><td>选项卡</td><td>tab</td><td>m-tab</td></tr>
                <tr><td>列表</td><td>list</td><td>m-list</td></tr>
                <tr><td>搜索</td><td>search</td><td>m-search</td></tr>
                <tr><td>分页</td><td>pagination</td><td>m-pagination</td></tr>
                <tr><td>登录</td><td>login</td><td>m-login</td></tr>
                <tr><td>排行</td><td>rank</td><td>m-rank</td></tr>
                <tr><td>热点</td><td>hot</td><td>m-hot</td></tr>
                <tr><td>广告</td><td>advertise</td><td>m-ad</td></tr>
                <tr><td>幻灯</td><td>slide</td><td>m-slide</td></tr>
                <tr><td>提示</td><td>tips</td><td>m-tips</td></tr>
                <tr><td>帮助</td><td>help</td><td>m-help</td></tr>
                <tr><td>投票</td><td>vote</td><td>m-vote</td></tr>
                <tr><td>新闻</td><td>news</td><td>m-news</td></tr>
                <tr><td>下载</td><td>download</td><td>m-download</td></tr>
                <tr><td>注册</td><td>regsiter</td><td>m-reg</td></tr>
                <tr><td>友链</td><td>link</td><td>m-link</td></tr>
                <tr><td>版权</td><td>copyright</td><td>m-copyright</td></tr>
            </tbody>
          </table>
          <p class="text-error"><strong>元件（.u-）</strong></p>
          <table class="m-table code m-table-bordered m-table-striped">
            <thead>
                <tr><th width="33%">语义</th><th width="33%">命名</th><th width="34%">class名称</th></tr>
            </thead>
            <tbody>
                <tr><td>按钮</td><td>button</td><td>u-btn</td></tr>
                <tr><td>标签</td><td>tag</td><td>u-tag</td></tr>
                <tr><td>导航</td><td>nav</td><td>m-nav</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    HOMOLO.COM | &copy; 2013 Built By Simplee. All Right Reserved
  </div>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.js"></script>
</body>
</html>