CSS 常用命名 - 彼岸时光

　　在前端开发中，规范使用 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)、命名可以使用单词缩写，但必须确保是有效的缩写，即别人能看懂，不能自定义缩写。