CSS 常用命名
Posted 彼岸时光
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)、命名可以使用单词缩写,但必须确保是有效的缩写,即别人能看懂,不能自定义缩写。
以上是关于CSS 常用命名的主要内容,如果未能解决你的问题,请参考以下文章