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 常用命名的更多相关文章
- 第64天:CSS常用命名规范,有用!
CSS常用命名,必须记住 一.常用命名 标题:title 摘要:summary 箭头:arrow 商标:label 网站标志:logo 转角/圆角:corner 横幅广告:banner 子菜单:sub ...
- web前端开发企业级CSS常用命名,书写规范总结
1.常用命名 标题: title 摘要: summary 箭头: arrow 商标: label 网站标志: logo 转角/圆角: corner 横幅广告: banner 子菜单: subMenu ...
- css常用命名规则
(一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrappe ...
- css常用命名
常用的CSS命名 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中 ...
- 你如果知道这些css常用命名,绝对事半功倍!--摘抄
对于布局,即用.g-作为前缀,通常有以下推荐的写法 对于模块,即.m-作为前缀.元件,.u-作为前缀,通常有下面推荐的写法. 对于功能,即以.f-为前缀,通常推荐如下: 对于颜色,即以.s-为前缀,通 ...
- 搜狐前端css常用命名
- CSS的class、id、css文件名的常用命名规则
CSS的class.id.css文件名的常用命名规则 (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- HTML常用命名和CSS reset代码【收集总结】
CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...
- div+css样式表的id,class的常用命名规则
div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...
随机推荐
- linux命令之nohup
功能: 使进程在退出登录后仍旧继续执行,nohup就是不挂起的意思(no hang up). 格式:$nohup command 和 $nohup command & 两种,二者之间的区别就是 ...
- Jquery UI 组合树 - ComboTree 集成Wabacus4.1 代码剖析
Jquery UI 1.3 (组合树 - ComboTree ) 集成Wabacus4.1 集成Spring 代码剖析 使用时,请下载需要Jquery ui包进行配置 combotree.js 的代码 ...
- [GIF] Colors in GIF Loop Coder
In this lesson we cover the different methods for defining and animating colors in GIF Loop Coder. f ...
- Android内存、性能是程序永恒的话题
内存.性能是程序永恒的话题,实际开发中关于卡顿.OOM也经常是打不完的两只老虎,关于卡顿.OOM的定位方法和工具比较多,这篇文章也不打算赘述了,本章主要是来整理一下JVM的内存模型以及Java对象的生 ...
- Jquery关闭离开页面时提醒
[导读] 离开页面提示多般是放到了发新闻或写日志的页面,我们在百度空间或QQ空间在我们未保存信息时如果离开页面都有提示了,下面我来介绍利用jquery的beforeunload来实现此方法. jque ...
- css实现基础几何图形
我们知道,css3通过border-radius.animation.transform等“新”特性可以绘制很多精致的图形.比如腾讯企鹅Logo.超能陆战队中的大白机器人.太阳系.小黄人.叮当猫.安卓 ...
- ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果?
ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app="& ...
- String filePath = request.getSession().getServletContext().getRealPath("/");这句话返回的路径是什么,解释下getRealPath("/")函数中的"/"表示什么意思
request.getSession().getServletContext() 获取的是Servlet容器对象,相当于tomcat容器了.getRealPath("/") 获取实 ...
- php注册登录时生成的验证码
http://blog.sina.com.cn/s/blog_8173443e01012l82.html 记得我学php时第一件事就是研究登陆注册.当然,登陆少不了验证码.两年过去了,昨天突然想用个验 ...
- hadoop_集群安装_1
这篇文章中主要介绍的是,如何基于VM安装Linux,以及如何在安装好Linux之后,基于操作系统安装VMTools. 在安装之前,应该先规划好 每个node*的IP地址,以及 hostname: no ...