CSS 常用命名_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:24:23997浏览
在前端开发中，规范使用 DIV+CSS 命名，可以增强团队合作提高开发效率，有利于页面后期的维护和优化。
1、页面结构
wrap：外套、包裹，用于最外层。
wrapper：外套，用于页面外围控制整体布局宽度。
box：盒子，容器。
header：头部，用于页头部分。
nav：导航，主导航。
main：主要区域，内容主体。
content/container：内容，内容容器。
sidebar：侧边栏。
footer：底部，用于页脚部分。
2、功能区块
left center right：左中右。
main-left：左侧主要布局。
main-right：右侧主要布局。
logo：网站 LOGO 标志。
search：搜索输入框。
loginbar：登录条。
regsiter：注册模块。
banner：广告，用于横幅广告条。
menu：菜单。
submenu：子菜单，二级菜单。
top：顶部。
topnav：顶导航。
mainnav：主导航。
subnav：子导航，二级导航。
leftsideBar：左导航。
rightsideBar：右导航。
topbar：顶部工具/菜单。
bottom：底部。
bottombar：底部工具栏。
tool：工具条。
shop：功能区，如购物车、收银台。
3、其他常用命名
title：栏目标题。
summary：摘要。
hot：热门热点信息，推荐。
msg：提示信息。
news：新闻。
list：列表，文章列表。
piclist：图片列表。
newslist：新闻列表。
search-output：搜索输出。
search-results：搜索结果。
drop/dropdown：下拉。
dropmenu/dorpdown-content：下拉菜单。
scroll：滚动。
homepage：首页。
subpage：子页面，二级页面。
tag：标签。
tab：标签页。
tips：小技巧。
ranking：排行。
vote：投票。
bth：按钮。
icon：图标。
arr/arrow：箭头。
status：状态。
note：注释。
skin：皮肤。
current：当前的。
active：活跃的，有效的。
download：下载。
friendLink：友情链接。
copyright：版权信息。
partner：合作伙伴。
joinus：加入我们。
sitemap：网站地图。
siteinfo：网站信息。
siteinfoLegar：法律声明。
announcement：公告。
guild：指南。
service：服务。
promotion：推广。
blog：博客。
forum：论坛。
4、产品相关命名
keyword：关键词。
products：产品。
products-prices：产品价格。
products-description：产品描述。
products-review：产品评论。
editor-review：编辑评论。
news-products：最新产品。
publisher：生产商。
screenshot：缩略图。
faqs：常见问题。
barnding：商标。
pay：充值。
reputation：信誉。
5、常用的文件命名
全局样式：global.css
布局结构：layout.css
基本共用：base.css
综合样式：style.css
主要的：master.css
模块：module.css
表单：forms.css
主题/网页换肤：themes.css
字体：font.css
打印：print.css
补丁：mend.css
私有样式/独立页面，根据实际情况，可以自定义命名 CSS 文件。
以上这些常用的文件命名，无需全部使用，根据实际情况，每个页面引用不超过 3 个 CSS 文件。
6、 ID 和 Class 命名规范
(1)、主要的、重要的、特殊的、最外层的盒子使用 ID 属性命名，其他的都使用 class 属性命名。
(2)、命名规则须以内容优先，表现为辅。首先根据所要呈现的内容、功能来命名，如果内容实在无法找到合适的命名，可以再根据表现命名。
(3)、大多数情况下，命名都使用英文单词，可以增加代码的可读性，有利于页面后期的维护和优化，但特殊情况下，实在找不到合适的单词时，可以使用拼音命名，但必须简明，结构清晰。
(4)、ID 和 Class 命名尽量全部都使用小写，多个单词可以使用连字符（-）链接，命名可以使用数字，但不能以数字开头。
(5)、命名可以使用单词缩写，但必须确保是有效的缩写，即别人能看懂，不能自定义缩写。