html的命名

在我眼里，每个人都要自己的独立的什么观啊什么观，读书少，说不出来。

当然其实我想说的是，每个人都有自己不同的特点。

就拿Html命名来说吧

<div class="content-info"></div>else<div class="info"></div>else<div class="contentSlide"></div>

如果你足够奇葩也能

<div class="n_n"></div>

我刚学习的时候就是这样的。：(

下面是我的习惯，你今天也可以写好你的习惯 ：)

<div class="header-Wrap">     <div class="header-Info"></div></div><div class="content-Wrap">     <div class="content-Info"></div></div><div class="footer-Wrap">     <div class="footer-Info"></div></div>

想法不一样，写出来的东西也就不一样了。

我想首先从结构开始说起，wrap——info——。。。

wrap就是最外层的div，没有快高限制，而info则限制了版块区域的宽。

<div class="header-Wrap">     <div class="header-Info w960"></div></div><div class="content-Wrap">     <div class="content-Info w960"></div></div><div class="footer-Wrap">     <div class="footer-Info w960"></div></div>

现在添加了class(w960)，意思就是它们几个info的宽度都设定了为width:960px

你会问呀，干嘛不直接写在Info里头了，答案是我不想。

思想是我从那本什么什么高质量代码上学的，我觉得好就用了。

它讲的很清楚，比如分类编写css文件啊什么的。它把css分为3种，base.css ，common.css ，xxxxx.css

base.css当然是最基本的css啦，什么body,*{padding:0margin:0},设置input,h1到h5，ul什么的

common.css就是共同公用的css，比如input的text那个框的样式基本通用，好！设定好放在里头，我借鉴的习惯就是把wrap，info这基础公用的写在里面了。

<div class="content-Wrap">     <div class="content-Info w960">           <div class="content_conent"></div>           <div class="content_slide"></div>          </div></div>

xxxxxx.css就是content_content与content_slide等等这样细节上的属性了，当然希望每一次每一个wrap与info希望有相同的一些class

更详细的有

<pre name="code" class="html"><div class="content-Wrap">     <div class="content-Info w960">           <div class="content_conent"><div class="c_header"></div><div class="c_info"></div><div class="c_txt"></div></span>.....           </div>           <div class="content_slide"></div>          </div></div>

希望你不要把它教条化，这事，还有看任何书，自己顺眼就行，能借鉴就借鉴。

还有一些细节，比如一二级wrap，info开始使用首字母大写，且不是下划线，意思就是放在了common.css的东西，不要顺便乱改。毕竟我觉得下划线和横线的区别是下划线可以选择整行字母，这对细节xxxx.css更好选择，但对于common,css没那么好了。

第二层info层里面如果真有分左右的话就有浮动了，那就要用上clearfix了，不知道clearfix自己Google吧。：)

过了第二层，我曾经还用过这样的。

<div class="content-Wrap">     <div class="content-Info w960">           <div class="content-base-top">              </div>           <div class="content-base-content">                  <div class="f-r content-content"></div>                  <div class="f-l content-slide"></div>           </div>                <div class="content-base-footer">                      </div>        </div></div>

最后来个综合

<div class="content-Wrap">     <div class="content-Info w960">           <div class="content-base-top">              </div>           <div class="content-base-content">                  <div class="f-r xxx-content">                         <div class="xxx_xxx"></div>                         <div class="xxx_xxx"></div>                  </div>                  <div class="f-l xxx-slide"></div>           </div>                <div class="content-base-footer">                      </div>        </div></div>