星辰

# CSS书写规范

# 命名规范

1、CSS命名要注重语义化，使人一眼就能明白这段样式是做什么的。

  • 不要使用驼峰写法，不要使用大写字母。
  • 单词之间使用中划线 - 进行连接，只允许两个单词。
  • 命名跟随HTML标签进行层层嵌套，首位相连递进命名，不要使用多个单词相连。
  • 非必要不使用id命名，除特定的功能、组件要求等。
  • 除了常见的缩写单词，不要使用单词缩写。
  • 禁止使用单个字母和数组命名。
  • 非必要不要在HTML上使用style，除非遇到更改组件样式。
  • 除非是样式reset需要，禁止对纯元素选择器设置特定样式，避免样式污染。
  • 命名不能包含ad、guanggao、ads、gg是广告含义的关键词，避免元素被网页拓展、插件屏蔽 示例：
<div class="index">
  <div class="index-header">
    <div class="header-logo"></div>
    <div class="header-nav"></div>
  </div>
  <div class="index-main">
    <div class="main-menu"></div>
    <div class="main-wrap"></div>
  </div>
  <div class="index-footer"></div>
</div>

<div class="list">
  <div class="list-item">
    <div class="item-avatar"></div>
    <div class="item-title"></div>
  </div>
</div>

2、常用递进规则

// 页面模块
index --> | header --> | logo
                       | nav
          | main --> | menu
                     | wrap
          | footer
// 布局
layout --> grid --> | row --> col
                    | cell/item
// 区块
block --> card/grid/cell/item/part

// 列表
list --> item/cell --> | avatar
                       | detail
                       | operate
// 导航菜单
menu --> submenu/slidemenu --> cell/item
nav --> subnav/slidebar --> cell/item/tab

# 属性书写规则

  • 书写顺序 场合—>尺寸—>装饰—>颜色—>其他 。
  • 属性尽量要采用缩写模式。
  • 按照规范留有空格和换行，每个声明都要用分号结束。
  • 0后面最好不要加单位。
  • 大的模块和特殊样式要写有注释。 平时常见的使用属性请按照该顺序进行书写，如遇特殊属性或不常见属性可以放在最后不需要进行严格区分。

书写顺序：

** 场合（position，display，float等）**
// 定位
'position',
'top',
'right',
'bottom',
'left',
'z-index',

// 盒模型
'display',
'flex',
'box-sizing',

// 浮动
'float',

** 尺寸（width，height，padding，margin等） **
'width',
'height',
'padding',
'margin',
'overflow',

** 装饰（font，line-height，letter-spacing，color ，text-align等）**
// 字体
'font',
'color',
'line-height',
'text-align',
'text-decoration',
'text-shadow',

// 列表
'list-style',

// 鼠标
'pointer-events',
'cursor',
'visibility',
'zoom',
'table-layout',
'resize',
'user-select',

** 颜色（background，border等）**
// 背景
'background',
'background-color',
'background-image',
'filter',

// 边框
'border',
'border-radius',
'border-image',

// 轮廓
'outline',
'box-shadow',
'opacity',

** 其他（animation，transition，transform等）**
// transition
'transition',
'transform',
'animation',

// 媒体填充
'fill',
'stroke'

示例：

position: relative;
display: block;

width: 100px;
height: 100px;
padding: 10px 20px;
margin: 0 auto;

font-size: 18px;
color: #ccc;

background-color: #fff;
border: 1px solid #eee;

transform: rotate(180deg);

# 公共样式命名

公共样式命名，一定要起到特殊性，区分和正常的命名，不能随便起一个名称就放上去。为了区分公共样式命名和正常的命名，这里公共样式可以连续使用多个单词来描述样式是干什么，一定要简洁和通用，不能取太长的单词。

1、全局通用命名

边框、颜色、边距、状态值

.pad-10 {
  padding: 10px;
}
.pad-20 {
  padding: 20px;
}
.pad-l-10 {
  padding-left: 10px;
}
.pad-l-20 {
  padding-left: 20px;
}

# 自定义组件样式

在使用UI组件库或者其他插件时，需要手动更改组件的样式，不能直接写个组件内部的类名加上属性就完了，要有严格的规则进行区分，否则后面修改会严重影响其他内容的样式。

  • 禁止在全局样式中进行自定义某个组件样式。
  • 要在该组件的父元素上定义类名，在父元素下进行自定义，避免影响页面其他相同组件。
  • 因无法在页面上查找到该类名，每个自定义样式都需要进行注释进行解释说明。
  • 自定义当前页面所有的组件样式，放到style最后并注释。

# 文件命名

// 常见文件命名，其他自行补充
reset: reset.css
公共样式：common.css
主题: themes.css
文字: font.css
主要: master.css
布局: layout.css

# 附：常见命名

首页：index
容器: container
内容: content
外套: wrap
包装：wrapper
页头: header
广告: banner
页面主体: main
页脚: footer

标志: logo
导航: nav
面包屑: breadcrumb
主导航: mainnav
子导航: subnav
顶导航: topnav
侧栏: sidebar
菜单: menu
子菜单: submenu
搜索: search
按钮: btn

标题: title
摘要: summary
文章列表: list
详情: detail/particular
描述: describe/description

分页: page
子页面: subpage
主页面: homepage
标签页: tag

功能区: shop（如购物车，收银台）
工具条: tool
下拉菜单: dropmenu
面板: panel
折叠: fold
折叠面板: collapse
下拉菜单: drop/dropdown
图标: icon
栅格: grid
布局: layout
列表: list
卡片: card
面板分割: split
分割线: divider
单元格: cell
徽标: badge
锚点: anchor
步骤条: steps
加载进度条: loadingbar
开关: switch
表格: table
滑块: slide
选择器: picker
级联选择: cascader
穿梭框: transfer
评分: rate
上传: upload
表单: form

消息提示: notify
通知提醒: notice
对话框: modal
抽屉: drawer
弹出层: popup
文字提示: tooltip
气泡提示: poptip
进度条: progeress
头像: avatar
走马灯：carousel
时间轴: timeline
加载中: spin
提示信息: msg
小技巧: tips
标签页: tab
商标: label
注释: note
指南: guide
热点: hot
新闻: news
图片列表: piclist
新闻列表: newslist
商标: barnding
缩略图: screenshot
友情链接: friend-link
版权: copyright
论坛: forum

当前的: current
滚动: scroll
充值: pay
评论: review
加入: joinus
服务: service
下载: download
登陆: login
注册: register
状态: status
投票: vote
合作伙伴: partner

# 附：reset.css

移动端：

* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
img { border: 0 none; vertical-align: top; }
i, em { font-style: normal; }
ol, ul { list-style: none; }
input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: #666; }
body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; font-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

pc端：

html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }
ul, ol { list-style: none; }
img { border: 0 none; vertical-align: top; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, em, i { font-style: normal; font-weight: normal; }
ins { text-decoration: underline; }
del { text-decoration: line-through; }
mark { background: none; }
input::-ms-clear { display: none !important; }
body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; }
a { text-decoration: none; color: #333; }
a:hover { text-decoration: underline; }

← Git开发规范 →