刚接触网站制作前端的时候，自己书写html和css过程中很不规范，很大一部分都是使用拼音来代替，有时候拼音使用的太多整体都会有很多冗余代码，那样是很不可取的，在此为大家提供一些技巧，针对个人的爱好来选择一种命名规则是很有必要的。
class引用使用”-“来链接
这种方法很简单，网页是有块组合而成，每一个块的命名为模块拼音的首字母或者说英文翻译，（建议使用英文翻译），而每一子模块，可以使用父模块的引用，然后加上后缀”_l”，”_c”，”_r”等等这样来简写，如下图所示：
这样写的好处是，css中不用使用前缀，大大的降低了css代码的体积，而且管理容易，举例如下
.box{} 盒子
.box-l{} 盒子左边子模块
.box-l-l{} 盒子左边子模块的左边模块
.box-l-c{} ….
.box-l-r{} ….
.box-r{} ….
.box-r-l{} ….
.box-r-c{} ….
.box-r-r{} ….
class引用使用分层
网页布局基本上都是使用分层的,比如商城网站建设中，使用1f和2f等分层，其实css也是可以这样命名，c1或者c2，也可以f1和f2等，内部再结合第一种方法，也可以结合层内部的英文命名规则等。这种方法css需要使用指定在哪个层下，这样才能避免重复命名，引起兼容。
另外两种方法一般都会使用base.css，但是我不建议使用，下面给出我所用的前缀，供大家参考
@charset “utf-8″;
*{ margin:0px; padding:0px;}
img{ border:none;}
a{ text-decoration:none; color: #333333;}
a:hover{ text-decoration:none; color: #a43130;}
li{ list-style: none;}
.clear{ clear:both;}
.fl{ float: left;}
.fr{ float: right;}
.fr.fl{display:inline;}
.mauto{ margin: 0 auto; width: 1200px;}
.txt_c{ text-align: center;}
.f12,.f14,.f16,.f18,.f20,.f24{ font-weight: normal; color: #333333; font-family: “Microsoft YaHei”,”微软雅黑”;}
.f12{ font-size: 12px; font-family: “Microsoft YaHei”,”微软雅黑”;}
.f14{ font-size: 14px;}
.f16{ font-size: 16px;}
.f18{ font-size: 18px;}
.f20{ font-size: 20px;}
.f24{ font-size: 24px;}
郑州网站建设，郑州网站制作
转载请注明：成都SEO0)
原创文章，作者：鲁 大师seo，如若转载，请注明出处：http://www.luseo.cn/archives/4461.html
