CSS命名规范

Question

CSS命名规范，比如类名
一个容器有多排，不止3排，

问题1：类名是用串行还是小驼峰，firstRow还是first-row
问题2: 是first-row，还是row-first，first写在前面还是写在后面？

Answer 1

规范其实就是一群人的一个约定的规则,每个开发组可能都不一样

我整理的一点,仅供参考
CSS命名规范(规则)常用的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 
  标签：tags 
  文章列表：list 
  提示信息：msg 
  小技巧：tips 
  栏目标题：title 
  加入：joinus 
  指南：guide 
  服务：service 
  注册：regsiter 
  状态：status 
  投票：vote 
  合作伙伴：partner 

注释的写法: 
  /  Header  / 
内容区 
  /  End  Header  / 

Id的命名: 
  1)页面结构 
  容器:  container 
  页头：header 
  内容：content/container 
  页面主体：main 
  页尾：footer 
  导航：nav 
  侧栏：sidebar 
  栏目：column 
  页面外围控制整体佈局宽度：wrapper 
  左右中：left  right  center 

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

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

注意事项:: 
  1.一律小写; 
  2.尽量用英文; 
  3.不加中横和下划线; 
  4.尽量不缩写，除非一看就明白的单词。 

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

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

BEM了解一下，不用较劲脑子想类名了
https://www.zhihu.com/questio...

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

CSS命名不要纠结太多，对于问题1：你需要保证的是每一个地方都用相同的规则，比如说所有类名都用小驼峰或者都用横线，当然个人是比较推荐短横线
对于问题2：应该是用first-row，其实遇到这种问题直接翻译成英文就行了，这样维护代码的时候一目了然这个元素是什么
关于CSS命名也可以去了解一下BEM，也许有启发

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 4

类名用不用驼峰看项目同一规划，不是大问题。
本身的名称我倾向于描述内容，比如user-comment-list-item和manager-comment-list-item。
至于first-row就呵呵了，真的随意。因为它一定是非独立存在的，就像.active, .disabled, .required。而且第几个这种可以classname搭配选择器就行了，不一定需要起名字。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。