公司的代码规范之html,css

• 关于普通项目的目录结构,推荐的结构如下:

Project
  -index.html
  pages
    -list.html
    -detail.html
  static
    js
      -app.js
    css
      -app.css
    image
      -bg.jpg

• 缩进代码(无论哪种代码)使用tab键,开发的时候,设定一个tab键位,是4个空格

• 过于长的代码,应该做好注释,注释方式如下, 便于修改时候查看结构;各个页面的css如果合并在一处,那么,也要注释,并且能从代码中体现出来,加前缀可以区分,如:

    <!--index start-->
    <div class="index">
        <div>
            <p>一个tab缩进(4个空格)</p>
        </div>
        <img src="" />
        ...
    </div>
    <!--index end-->

/*page_a style .page_a是a.html的最外层容器的class*/
.page_a .box{
    width:100px;
    height:100px;
    background:red;
}
/*page_b style  .page_b是b.html的最外层容器的class*/
.page_b .box{
    width:110px;
    height:100px;
    background:blue;
}

• 代码应该缩进整齐,开始标签和结束标签对齐,在sublime或者其他编辑器上,可以整齐折叠,便于查看

缩进后的代码

• 大部分时候,<link>标签置于页面头部,<script>标签置于页面底部
  

  代码示例

• 在写手机端页面时候,一定要加<meta name="viewport" content="">标签

• 在写css的时候,尽量把css抽取出来成为一个单独的文件,不要写在标签和html中

• 可以多使用语义化的标签,如<section> , <header> , <footer> , <article> 等,对搜索引擎有好处

• 在定义class和id的名字的时候,一定要避免混淆,可读性强.下面是常见的错误的情况,会导致修改一处的样式,其他地方也会受到影响,这种情况要避免,假设有a.html和b.html,他们都有需要命名一个class为.box他们公用一个样式style.css:

<!--a.html-->
<link rel="stylesheet" type="text/css" href="style.css">
<div class="page_a">
    <div class="box">
        
    </div>
    <img class="thumbnail" src="">
</div>

<!--b.html-->
<link rel="stylesheet" type="text/css" href="style.css">
<div class="page_b">
    <div class="box">
        
    </div>
    <img class="thumbnail" src="">
</div>

/*style.css*/
.box{
    width:100px;
    height:100px;
    background:red;
}

上述的代码,导致a.html和b.html中的.box都是一个样式,如果这时候客户仅仅想要改变b.html中的.box的样式,一改动.box的话,就会导致a.html中的.box也变化,如果.box的页面使用的多了,就会出现不可控制的结果,所以,推荐的写法是加前缀,style.css改写成:

/*style.css*/

/*page_a style*/
.page_a .box{
    width:100px;
    height:100px;
    background:red;
}
/*page_b style*/
.page_b .box{
    width:110px;
    height:100px;
    background:blue;
}

通过给每个页面的最外层容器加和这个页面相关的class,通过前缀的方式,来区别各个页面上共同的class的样式,对于命名很有帮助.

• css的库和自己的库结合.经常使用amaze-ui等css框架时候,框架提供了很多的class,比如amaze-ui的按钮类:

<button class="am-btn am-btn-lg am-btn-success">按钮</button>

如果要添加自己的样式,不应该在amaze-ui的css中使用的类,下述是错误的:

.am-btn-lg{
    color:red;
}

这样会导致.am-btn-lg类在这个页面的其他地方异常,正确的方式应该是添加自己的类,然后在写自己的样式:

<button class="am-btn am-btn-lg am-btn-success self-style">按钮</button>

.self-style{
    color:red;
}

原则就是不修改引入的库的任何东西,要改变的话,新添加自己的.

• 关于命名规则:为了避免和js混淆,自己命名class和id时候,都应该可以改用下划线_,命名应该下上相关,语义化,如:

<div class="page_index">
    <!--页面的容器,box-->
    <div class="box">
        <header>标题</header>
        <!--页面的主要内容 content-->
        <section class="content">
            <!--页面列表-->
            <ul class="list">
                <!--列表项目-->
                <li class="list_item"></li>
                <li class="list_item"></li>
                <li class="list_item"></li>
                <li class="list_item"></li>
            </ul>   
        </section>
    </div>
</div>

这样,仅仅根据class的命名,就可以大概清楚这个标签是什么作用,处于页面什么位置了,非常清晰.