- 关于普通项目的目录结构,推荐的结构如下:
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的命名,就可以大概清楚这个标签是什么作用,处于页面什么位置了,非常清晰.
