前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS英文命名规范整理及参考

CSS英文命名规范整理及参考

作者头像
用户1272076
发布2019-10-14 14:49:48
1.4K0
发布2019-10-14 14:49:48
举报
文章被收录于专栏:张培跃

我们在对网页进行布局时,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法。 规范使用CSS命名规则,可以改善优化功效,特别是在团队合作的时候可以有效提高开发效率。

一、命名规则说明
  • 所有的命名最好都小写
  • 属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
  • 每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
  • 空元素要有结束的tag或于开始的tag后加上"/"
  • 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
  • h1到h5的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
  • 给每一个表格和表单加上一个唯一的、结构标记id
  • 给图片加上alt标签
  • 尽量使用英文命名原则
  • 尽量不缩写,除非一看就明白的单词
二、页面布局(layout)命名参考
代码语言:javascript
复制
// 网页公共命名
wrapper  页面外围控制整体布局宽度
container或content  容器,用于最外层
layout  布局
head, header  页头部分
foot, footer  页脚部分
nav  主导航
subnav  二级导航
menu  菜单
submenu  子菜单
sideBar  侧栏
sidebar_a, sidebar_b  左边栏或右边栏
main  页面主体
tag  标签
msg message  提示信息
tips  小技巧
vote  投票
friendlink  友情连接
title  标题
summary  摘要
loginbar  登录条
searchInput  搜索输入框
hot  热门热点
search  搜索
search_output  搜索输出和搜索结果相似
searchBar  搜索条
search_results  搜索结果
copyright  版权信息
branding  商标
logo  网站LOGO标志
siteinfo  网站信息
siteinfoLegal  法律声明
siteinfoCredits  信誉
joinus  加入我们
partner  合作伙伴
service  服务
regsiter  注册
arr/arrow  箭头
guild  指南
sitemap  网站地图
list  列表
homepage  首页
subpage  二级页面子页面
tool, toolbar  工具条
drop  下拉
dorpmenu  下拉菜单
status  状态
scroll  滚动
tab  标签页
left right center  居左、中、右
news  新闻
download  下载
banner  广告条(顶部广告条)

// 电子商务相关
products  产品
products_prices  产品价格
products_description  产品描述
products_review  产品评论
editor_review  编辑评论
news_release  最新产品
publisher  生产商
screenshot  缩略图
faqs  常见问题
keyword  关键词
blog  博客
forum  论坛

// CSS文件命名
master.css,style.css  主要的
module.css  模块
base.css  基本共用
layout.css  布局,版面
themes.css  主题
columns.css  专栏
font.css  文字、字体
forms.css  表单
mend.css  补丁
print.css  打印
三、注释的写法
代码语言:javascript
复制
/*Footer */
内容区
/* End Footer */
四、类class的书写规范示例
代码语言:javascript
复制
// 1 、颜色:使用颜色的名称或者16进制代码,如
.red { color:red;}
.f60 { color:#f60;}
.ff8600 { color:#ff8600;}

// 2、字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size:12px;}
.font9pt {font-size:9pt;}

// 3、对齐样式,使用对齐目标的英文名称,如
.left { float:left;}
.bottom { float:bottom;}

// 4、标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
五、小结
  • 通常我们最常用主要命名有: wrap(外套、最外层) header(页眉、头部) nav(导航条) menu(菜单) title(栏目标题、一般配合h1\h2\h3\h4标签使用) content (内容区) footer(页脚、底部) logo(标志、可以配合h1标签使用) banner(广告条,一般在顶部) copyRight(版权) 其它可根据自己需要选择性使用。
  • 建议:无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓。但我们最好遵循主要的重要的特殊的最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名的规则。

—————END—————

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-10-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 张培跃 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、命名规则说明
  • 二、页面布局(layout)命名参考
  • 三、注释的写法
  • 四、类class的书写规范示例
  • 五、小结
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档