CSS学习笔记(十二) CSS命名规范

引言:最近想将这几个月做过的东西组件化,然后首先想到的是 编码规范化!本文只涉及 CSS 命名规范,搬来了Alloyteam 造好的轮子。可能并不完全适用,在以后开发过程中再根据需要进行修改。╮(╯_╰)╭

1.常用的css命名规范

  • 头:header
  • 内容:content/container
  • 尾:footer
  • 导航:nav
  • 侧边:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:friendlink
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guild
  • 服务:service
  • 注册:regsiter
  • 状态:status
  • 投票:vote
  • 合作伙伴:partner

2.注释的写法

/* Footer */

内容区

/* End Footer */

3.id的命名

3.1 页面结构

  • 容器: container
  • 页头:header
  • 内容:content/container
  • 页面主体:main
  • 页尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center

3.2 导航

  • 导航:nav
  • 主导航:mainnav
  • 子导航:subnav
  • 顶导航:topnav
  • 边导航:sidebar
  • 左导航:leftsidebar
  • 右导航:rightsidebar
  • 菜单:menu
  • 子菜单:submenu
  • 标题: title
  • 摘要: summary

3.3 功能

  • 标志:logo
  • 广告:banner
  • 登陆:login
  • 登录条:loginbar
  • 注册:regsiter
  • 搜索:search
  • 功能区:shop
  • 标题:title
  • 加入:joinus
  • 状态:status
  • 按钮:btn
  • 滚动:scroll
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 当前的: current
  • 小技巧:tips
  • 图标: icon
  • 注释:note
  • 指南:guild
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 投票:vote
  • 合作伙伴:partner
  • 友情链接:link
  • 版权:copyright

4.class的命名

4.1 颜色

使用颜色的名称或者十六进制。

举例:

.red{color:red;}
.f60{color:#f60;}
.ff8600{color:#ff8600;}

4.2 字体大小

直接使用 font+字体大小 作为名称。

举例:

.font12px{font-size:12px;}
.font9pt{font-size:9pt;}

4.3 对齐样式

使用对齐目标的英文名称。

举例:

.left{float:left;}
.bottom{float:bottom;}

4.4 标题栏样式

使用 类别+功能 的方式命名。

举例:

.barnews{}
.barproduct{}

5.注意事项

  1. 一律小写;
  2. 尽量用英文;
  3. 不加中杠和下划线;
  4. 尽量不缩写,除非一看就明白的单词。

6.常用css文件命名

  • 主要的 master.css
  • 模块 module.css
  • 基本共用 base.css
  • 布局,版面 layout.css
  • 主题 themes.css
  • 专栏 columns.css
  • 文字 font.css
  • 表单 forms.css
  • 补丁 mend.css
  • 打印 print.css

后记:搬到最后,看到注意事项里面的一条:不加中杠和下划线。Σ(っ °Д °;)っ有点接受不了。。。然后继续搜索,发现一个好东西—— BEM!然后,我放下最后一块砖头,滚去学习了,再见(。・_・)/~~~


参考资料


前端补完计划
Front-End Instrumentality Project

科科。

2.4k 声望
332 粉丝
0 条评论
推荐阅读
《GitHub 入门与实践》阅读笔记(第4章)
1. 基本操作 git init {代码...} 执行初始化操作会生成一个 .git 目录(该目录存储着管理当前目录内容所需的仓库数据); 文件的编辑等操作在工作树中进行,然后记录到仓库中,以此管理文件的历史快照; 如果想将文...

omgdog13阅读 1.8k

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco18阅读 2k评论 2

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan20阅读 1.5k评论 1

封面图
那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

Winn11阅读 1.1k评论 4

封面图
Three.js 进阶之旅:全景漫游-初阶移动相机版
3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多...

dragonir12阅读 1.4k

封面图
巧用 CSS 变量,实现动画函数复用,制作高级感拉满的网格动画
这里我们借助了上面 #12、结构性伪类 中的 :root{ } 伪类,在全局 :root{ } 伪类中定义了一个 CSS 变量,取名为 --bgColor 。

chokcoco11阅读 2.9k

封面图
突发奇想!借助CSS自定义彩色字体来实现多行文本展开收起
之前写过这样一篇文章:CSS 实现多行文本“展开收起”,介绍了一些纯 CSS 实现多行文本展开收起的小技巧,特别是右下角的“展开收起”按钮,用到了浮动布局,非常巧妙,有兴趣的可以回顾一下。

XboxYan9阅读 1.2k

封面图

科科。

2.4k 声望
332 粉丝
宣传栏