网站制作的时候css引用如何命名

来源:郑州网站建设七彩科技    点击:    发布时间 2015-10-09


刚接触网站制作前端的时候,自己书写html和css过程中很不规范,很大一部分都是使用拼音来代替,有时候拼音使用的太多整体都会有很多冗余代码,那样是很不可取的,在此为大家提供一些技巧,针对个人的爱好来选择一种命名规则是很有必要的。

class引用使用"-"来链接
这种方法很简单,网页是有块组合而成,每一个块的命名为模块拼音的首字母或者说英文翻译,(建议使用英文翻译),而每一子模块,可以使用父模块的引用,然后加上后缀"_l","_c","_r"等等这样来简写,如下图所示:

第一种css命名规则.jpg

这样写的好处是,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;}
 

郑州网站建设郑州网站制作

郑州七彩科技:郑州网站建设,郑州网站推广,郑州网站优化, 郑州网站设计, 郑州网站制作, 联系方式:0371-56768628

Website production网站建设更多

Website Experience建站心得更多

Web production郑州网站制作更多

SEM郑州网站推广更多

返回列表