HTML,CSS的命名习惯总结

CSS与XHTML命名规则及开发指南

在网页设计中，CSS和XHTML的命名规则是开发者必须遵循的规范，它们有助于提高代码的可读性和可维护性。以下是关于CSS和XHTML命名的一些主要规则和指南。

一、CSS命名规则

1. 头：header

2. 内容/容器：content/container

3. 尾：footer

4. 导航：nav

5. 侧栏：sidebar

6. 栏目：column

7. 页面外围控制整体布局宽度：wrapper

8. 左右中：left, right, center

9. 登录条：loginbar

10. 标志：logo

11. 广告：banner

12. 页面主体：main

13. 热点：hot

14. 新闻：news

15. 下载：download

16. 子导航：subnav

17. 菜单：menu

18. 子菜单：submenu

19. 搜索：search

20. 友情链接：friendlink

21. 页脚：footer

22. 版权：copyright

23. 滚动：scroll

等等。

在XHTML文件中，id和class的命名也有其特定的规则。对于id，一般应用于页面结构中独特的元素，如container、header、footer等。而对于class，则用于定义样式规则，可以应用于多个元素。

二、XHTML文件中id和class的命名规则

1. 页面结构容器的命名应清晰明了，如container、header、main、footer等。

2. 导航相关的id和class命名包括nav、subnav、menu等。

3. 功能区域的命名如logo、banner、loginbar等。

4. 内容区域的命名如content、list、msg等。

对于class的命名，除了上述提到的，还有一些特定的规则，如使用颜色的名称或16进制代码来命名（不建议以表现来命名），使用字体大小和对齐样式的英文名称等。标题栏样式的命名采用“类别+功能”的方式。例如，barnews和barproduct等。

三、其他注意事项

1. CSS和XHTML的命名一律小写。

2. 尽量使用英文命名。

3. 避免使用中杠和下划线。

4. 除非一看就明白，否则尽量不要缩写单词。主要的CSS文件如master.css（主样式表）、module.css（模块样式表）、base.css（基本共用样式表）等应清晰命名，便于管理和维护。还有layout.css（布局、版面）、themes.css（主题）、columns.css（专栏）、font.css（文字）、forms.css（表单）等，都应根据其功能进行清晰的命名。补丁类和打印类分别为mend.css和print.css。这些命名规则有助于开发者快速理解代码的功能和结构，提高开发效率。