|
|
|
|
注册会员
|
UID: 1048
来自:
精华: 1
积分: 117
帖子: 110
注册: 2008-2-27 7:50:07
状态:
离线
威望: 2.00
金钱: 18.45 元
|
|
|
|
|
| 52.css |
|
http://www.52css.com/article.asp?id=576
http://www.52css.com/default.asp?cateID=5
命名规范
常用的CSS命名规则：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list
Web开发者（也就是您）可以通过创建CSS类及id名称并使用这些名称来对div以及其他的页面元素、标签进行标识。对开发人员来说，在命名重新定义XHTML标记（tags）的CSS selectors时，必须保证其与预定义的标记准确匹配，但就类以及id选择器名称而言，则仁者见仁，智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。
在阅读了由Andy Clarke（of Stuff and Nonsense and All That Malarkey）以及Eric Meyer所撰写的关于CSS类以及id命名规范的系列文章之后，我开始思考在自己的Web站点设计过程中对类以及ids的命名方式。
直观命名
当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：
Example Source Code [www.52css.com]
top-panel
horizontal-nav
left-side
center-column
right-col
这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义，因此满足了标识页面元素以及相应的CSS样式的需要。
但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置，因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时，这些命名没有涉及文档内容的结构。因此，下面给出了对CSS类以及ID命名更好的方法。
结构化命名
结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记（markup）中的类和id名称。
有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容（content）以及标记（markup）进行重用。当你理解这种方式时，很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频（audio）等外观格式上显得非常不合适。因此，应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。
可以按照如下所示的结构化方式来对类以及id名称命名：
Example Source Code [www.52css.com]
branding
main-nav
subnav
main-content
sidebar
这些名字同直观命名方式一样非常易懂，但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记（structural markup）的初衷，即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。
即使你不打算在其他的媒体上对Web页面进行格式修改，使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如，结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当，因为无论它出现在页面的哪一边，这个名字仍然对开发人员来说直观易懂。
一些命名惯例
Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一，但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表：
Example Source Code [www.52css.com]
header
content
nav
sidebar
footer
这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢？尽管这是我所希望的，但我并不这么认为。我的确希望能够看见一整套对于我们每天都可以看到的常用页面元素的命名标准。同时，使用标准化的命名方式可以使得寻找页面元素以及对Web站点升级带来方便，尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。
Article Provenance: Internet
Article Tags: div+css网页布局div+css网页布局 常见问题常见问题 规范规范 命名命名
评论: 0 | 查看次数: 1911 发表评论
你没有权限发表留言！
52CSS.com 网站导航
HomePage
Div+CSS教程 [194]
CSS布局实例 [97]
CSS2.0教程 [144]
CSS酷站欣赏
CSS模板下载
CSS在线手册
Web标准 [68]
XHTML教程 [55]
GuestBook
Tags
最近更新
CSS QQ交流群
xhtml+css互助学习交流QQ群
网站重构及Web标准交流QQ群
⑴ 973327 ⑵ 562560
⑶ 973298 ⑷ 194681
⑸ 304057 ⑹ 341695
⑺ 109688 ⑻ 139592
⑼ 267003 ⑽ 527525
⑾ 559937 ⑿ 589598
（不定期轮换开放可加的群）
超过20天未发言者会被删除！
可以再加群，谢谢配合理解！
Div CSS酷站欣赏
[02/17]The Highland Fling[02/17]We Make Merch We Sell Merch[02/17]Kingsfield Church Connecting with God Each Other and the World[02/17]Adventure Trekking in Nepal[02/17]Web Design Hamilton - VO2 Studio
Div CSS模板下载
[09/04]Scuba Holding[09/04]Keeping It Clean[09/04]Culture Shock[09/04]Simply CSS[09/04]Doctors Office
Search
关键字 类 型 日志标题 日志评论
User Panel
登录用户注册
Links
MySpace Layouts
wow gold
buy wow gold
wow power leveling
RuneScape Gold
warhammer gold
ホームページ制作
不動産検索システム
求人情報
CSS Web Design 我爱CSS - 52CSS.com Some Rights Reserved . WebMaster:MrJin . Power by Pjblog | xhtml | css | 站长统计 网站统计
|
|
|
|
