css命名规范

css命名规范

页面结构命名

1. page：代表整个页面，用于最外层。
2. wrap：外套，将所有元素包在一起的一个外围包，用于最外层
3. wrapper：页面外围控制整体布局宽度，用于最外层
4. container：一个整体容器，用于最外层
5. head、header：页头区域，用于头部
6. nav：导航条
7. content：内容，网站中最重要的内容区域，用于网页中部主体
8. main：网站中的主要区域（表示最重要的一块位置），用于中部主体内容
9. column：栏目
10. sidebar：侧栏
11. foot、footer：页尾、页脚。网站一些附加信息放置区域，（或命名为copyright）用于底部

导航命名

1. nav、navbar、navigation、nav-wrapper：导航条或导航包，代表横向导航
2. topnav：顶部导航
3. mainbav：主导航
4. subnav：子导航
5. sidebar：边导航
6. leftsidebar 或 sidebar_a ：左导航
7. rightsidebar 或 sidebar_b：右导航
8. title：标题
9. summary：摘要/li>
10. menu：菜单。区域包含一般的链接和菜单
11. submenu：子菜单
12. drop：下拉
13. dorpmenu：下拉菜单
14. links：链接菜单

功能命名

1. logo：标记网站logo标志
2. banner：标语、广告条、顶部广告条
3. login：登陆，（例如登录表单：form-login）
4. loginbar：登录条
5. regsiter：注册
6. tool、toolbar：工具条
7. search：搜索
8. searchbar：搜索条
9. searchlnput：搜索输入框
10. shop：功能区，表示现在的
11. icon：小图标
12. label：商标
13. homepage：首页
14. subpage：二级页面子页面
15. hot：热门热点
16. list：文章列表，（例如新闻列表：list-news）
17. scroll:滚动
18. tab：标签
19. sitemap：网站地图
20. msg 或 message：提示信息
21. current：当前的
22. joinus：加入
23. status：状态
24. btn：按钮，（例如搜索按钮可写成：btn-search）
25. tips：小技巧
26. note：注释
27. guild：指南
28. arr、arrow：标记箭头
29. service：服务
30. breadcrumb：(即页面所处位置导航提示）
31. download：下载
32. vote：投票
33. siteinfo：网站信息
34. partner：合作伙伴
35. link、friendlink：友情链接
36. copyright：版权信息
37. siteinfoCredits：信誉
38. siteinfoLegal：法律信息

CSS样式命名

1. 对齐样式命名：left（左边内容）、center（中间内容）、right（右边内容）等；
2. 颜色英文命名：red（红色）、green（绿色）、yellow（黄色），又或者border_red（红色边框）等；
3. 颜色代码命名：f00（红色）、ff0（黄色）、f90（橙色）等；
4. 文字大小命名：font12px（字体12像素）、font16px（字体16像素）等；
5. 页面线条命名：line_x （横线）、line_y （纵线）或 line_red（红线）、line_black（黑线）
6. 图片图标命名：pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
7. 页面广告命名：ad_01、ad_02
8. 背景框架命名：nav_bg（代表导航条的背景图片位置）、tool_bg（代表工具栏的背景图片位置）

CSS样式表命名

1. index.css：单独为首页建立样式
2. head.css：头部样式，多个页面头部设计风格相同时使用。
3. base.css：共用样式。
4. style.css：独立页面所使用的样式文件。
5. global.css：页面样式基础，全局公用样式，页面中必须包含。
6. layout.css：布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中
7. module.css：模块，用于产品类页，也可与其它样式配合使用。
8. master.css：主要的样式表
9. columns.css：专栏样式
10. themes.css：主体样式
11. forms.css：表单样式
12. mend.css：补丁，基于以上样式进行的私有化修补。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有