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

Posted 2021-04-09 张培跃

我们在对网页进行布局时，比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地方该如何命名，怎样命名才是好的方法。

规范使用CSS命名规则，可以改善优化功效，特别是在团队合作的时候可以有效提高开发效率。

一、命名规则说明

• 所有的命名最好都小写

• 属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"

• 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

• 空元素要有结束的tag或于开始的tag后加上"/"

• 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

• h1到h5的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

• 给每一个表格和表单加上一个唯一的、结构标记id

• 给图片加上alt标签

• 尽量使用英文命名原则

• 尽量不缩写，除非一看就明白的单词

二、页面布局（layout）命名参考

// 网页公共命名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 打印

三、注释的写法

/*Footer */内容区/* End Footer */

四、类class的书写规范示例

// 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—————

张培跃，收看更多精彩内容