逻辑块样式命名系统

最新推荐文章于 2024-09-20 16:06:21 发布

dizyh

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量714

点赞数

文章标签： class xhtml 优化 div ie 数据库

本文链接：https://blog.csdn.net/dizyh/article/details/1855093

版权

　　逻辑块样式命名系统的好处是：1、结构清晰；2、定位方便；3、复用简单；4、起名省心（虽然现在的浏览器支持以中文做样式名，但混着样式属性书写时的中英文切换挺烦人）。

　　class和id的选择：

　　当程序员需要控制某个div块（比如选项卡效果）时，他必须使用id来选择。如果样式表中也引入了id标识，那么因为id所要求的唯一性，程序员就必须避免重名问题（尤其是在设计表单的时候，为了可读性，数据库字段名和表单标签id及name的一致性是很有必要的）。即id用于样式时可能会干扰程序设计。因此建议样式设计者用class，程序员用id。互不干扰。

1、特殊命名。

　　页头（head）、页脚（foot）、导航（nav）、搜索（search）、登录（login）……等少量逻辑块处使用英文。其复用性也几乎没有。

1.1、banner的命名

　　我个人使用“banner+数字”的方式命名。比如“.banner1”。

1.2、表单的样式命名。

　　在设计表单的时候，为了可读性，数据库字段名和name的一致性是很有必要的。量大时我们可以单独给表单一个样式表“form.css”。建议根据字段名定义样式名。

2、使用下划线区分逻辑块层次。有喜欢用单词首字母大写“NewsSp”之类来区分的，但视觉上不好分辨层次。而且大小写切换频繁时容易出错。

　　第一层：假如一个大框架块分为三竖栏，最外层逻辑块的样式名为“cont1”。

　　第二层：三个小框架性的逻辑块分别为“cont1_left”、“cont1_middle”、“cont1_right”。建议缩写为“cont1_r”等。

　　第三层：具体内容模块为“cont1_left_area1”。（通常而言，条理分明的设计图加上合理的切图，到这一层就可满足需要了。）

　　第四层：如果在a1块内还有一层怎么办？按照意义写英文好了。比如“.time”（样式控制“.cont1_right_area1 .time {}”）。或者懒省事点儿使用“cont1_left_area1_1”。

　　第五层：如果这时还有内层，那么这个设计图一般来说属于不够合理，过于复杂了。又或者是切图者功力不够。

3、统一用“包含”定义法，以增强各块样式独立性、并减少为样式起名的麻烦。

.cont1_right_area1 .ul1 {}
.cont1_right_area1 .ul1 li {}

/一个典型模块的完整样式//

xhtml结构代码：

　　<div class="sort_show">
　　　　<ul class="ul1">
　　　　　　<li><dl><dt><img src="pic01.jpg" /></dt><dd class="title">炒房团重现内幕炒房团重现内幕</dd> <dd class="cont">温州炒房团重现江湖、山西晋商包机进京、各种模展开…… <span>[详细]</span></dd></dl></li>
　　　　　　<li><dl><dt><img src="pic02.jpg" /></dt><dd class="title">炒房团重现内幕炒房团重现内幕</dd><dd class="cont">温州炒房团重现江湖、山西晋商包机进京、各种模展开…… <span>[详细]</span></dd></dl></li>
　　　　</ul>

　　　　<ul class="ul2">
　　　　　　<li><span>国内新闻|</span>　成品油价税费改革后油价会下降</li>
　　　　　　<li><span>国内新闻|</span>　成品油价税费改革后油价会下降</li>
　　　　　　<li><span>国内新闻|</span>　成品油价税费改革后油价会下降</li>
　　　　　　<li><span>国内新闻|</span>　成品油价税费改革后油价会下降</li>
　　　　　　<li><span>国内新闻|</span>　成品油价税费改革后油价会下降</li>
　　　　　　<li><span>国内新闻|</span>　成品油价税费改革后油价会下降</li>
　　　　　　<li><span>国内新闻|</span>　成品油价税费改革后油价会下降</li>
　　　　　　<li><span>国内新闻|</span>　成品油价税费改革后油价会下降</li>
　　　　</ul>
　　</div>
</div>

css样式表：

/*模块一*/
.cont1_right_area1 {}

/*模块头·标题*/
.cont1_right_area1 .heading { position:relative;} //这个属性可让h2的背景“left:-1px;”后轻松遮盖cont1_right_area2的div边框。
.cont1_right_area1 h2 {}
.cont1_right_area1 h2 span { position:absolute;} //这个地方一般放“更多”。

/*模块头·选项卡*/
.cont1_right_area1 .sort { position:absolute;} //当有选项卡且没h2标题，直接把“模块头”三句删除并去掉这里的绝对定位即可。
.cont1_right_area1 .sort li {}
.cont1_right_area1 .sort .onfocus {}

/*推荐列表*/
.cont1_right_area1 .ul1 {}
.cont1_right_area1 .ul1 li {}
.cont1_right_area1 .ul1 dl {}
.cont1_right_area1 .ul1 dt {}
.cont1_right_area1 .ul1 dt img { display:block;}
.cont1_right_area1 .ul1 dd {}
.cont1_right_area1 .ul1 .title {}
.cont1_right_area1 .ul1 .cont {}

/*列表*/
.cont1_right_area1 .ul2 {}
.cont1_right_area1 .ul2 li {}

　　说明：“.ul1”“.ul2”等看起来无意义，但通过其所属模块，加上注释、命名系统辅助，意义仍然好分辨。更方便整块复制，只需把前缀“area1”改为“area2”即可。

/一个典型模块的完整样式结束//

3.1、为了单元模块增删方便，样式命名要定义到可控制最小结构的标签上。

　　比如下例，若使用包含定义法，我们定义到ul即可。

.cont1_right_area1 .ul1 li span a {}

3.2、如果在cont1中有好几个同样式的列表，是否可以提出公用样式？

　　当然可以。只要确认需要，就可以增加一句：

.cont1 ul {公共属性} //绝不影响原命名结构，而且增删方便。（注意，要放到所有ul私有定义前面。）

　　如果是全局：ul {公共属性}

　　如果是cont1和cont2里分别各自有一半ul有通用样式怎么办？不建议使用复合样式“class="css1 css2"”。联动性太强，宁可多写几句单独样式。

４、后期增删逻辑块时的样式命名。

.cont1_right_area1
.cont1_right_area15 //第一次插入
.cont1_right_area2

.cont1_right_area1
.cont1_right_area13 //第二次插入，还有第三次的话，我看就重做效果图吧——需求设计太烂了。
.cont1_right_area15
.cont1_right_area2

　　如上插入其间的模块命名为：“.cont1_right_area15”。因为，用逻辑块切图，我至今没见过序号到两位数的。

附笔：

1、属性的书写格式——竖排还是横排。

　　竖排的优点是：添属性方便；写兼容（hack）、注释方便（但这也要看兼容技巧了）。
　　竖排的缺点是：当属性很多时，不便查看它和其他块的样式关联，因为样式的名字都离的太远了。

例一：

.cont_l_area1 { height:130px;}
.cont_l_area1 h2 { padding-top:11px; padding-bottom:2px;}
.cont_l_area1 .ul1 { height:130px; line-height:14px;}

　　当需要h2、ul及外围div的高度互相配合时，竖排将难以注意到其关联性。

例二：

　　通常来说我们只需要兼容三个浏览器：ie6、ie7、ff3。区别ie6和ff3需要用“!important”，但区别ie7和ff3还需要“*+html”。

.cont_l_area1 { padding-right: 150px; padding-right:18px!important;} /* IE6：150像素；FF3：180像素 */
*+cont_l_area1 .menu { padding-right: 150px!important; } /* IE7：150像素 */

　　如果竖排也不便观察其样式关联性。

　　小结：第一，hack技巧不同会导致样式控制方法不同；第二，若切图和样式配合合理，基本上无需hack。

2、属性的书写顺序。

　　无论是竖排还是横排，都要有不同属性间的顺序问题。

　　关于这个，要注意属性间的关联性，然后再安排顺序。

.cont_l_area1 .ul1 li { float:left; margin-left:-1px; width:56px; padding-left:9px; padding-top:7px; background:url(img/hot_memu_line.gif) no-repeat 0px 7px; }

　　因为在xhtml标准声明中，padding和width/height有直接关联，因此二者需要连写。margin间接参与width/height，故放到padding前。总顺序是“margin - width/height - padding”。

　　常用属性的建议顺序：display - position - float - clear - margin - width/height - padding - color - font - background

3、当强调某一超链接时的字体颜色控制。

　　内容有关，建议“末端定义”。例如在某一个列表中或某一段中要用红色强调某一条时，“class”还是“程序自行控制”？

　　因可视其为“内容的一部分”，而不建议“class”。由程序上自行控制。

4、样式定义的资源占用。

　　关于样式定义的资源占用，有人建议少用“*”等通配符、少用“包含”等等，但现在客户端的机器性能都过强，考虑这些都是浪费。一个网页中的小FLASH的资源占用就远远超过这些了。

5、关于样式的尺寸优化。

　　强烈建议保持样式表的原始结构，我们也可以少一道发布前的格式化工序。

　　一个样式表，即便是门户性的大页面，其总尺寸也就25KB左右（优化最多也就能节省1KB而已）。而首页上那种轮换展示图，一张就少不了10KB。所以，清理、优化样式表实无必要。还不如把4张轮换图片改成3张来得实惠。

　　举例“淘宝”，他们做了空格清理等，也许还优化合并了些重复样式定义，但首页上的图片少一张就能超过他们为了亿级访问量对样式表所做的所有优化。

　　举例“百度”，搜索引擎的页面一般都是很简洁，没有图片可供优化，这时设计页面时尽量让结构类似，样式定义也就可以提炼出更多的通用定义，这种优化比去掉几个回车空格省的代码多得多了。