https://github.com/onface/trees
CSS命名约定,基于树结构。
https://github.com/onface/trees
Last synced: 10 days ago
JSON representation
CSS命名约定,基于树结构。
- Host: GitHub
- URL: https://github.com/onface/trees
- Owner: onface
- Created: 2017-01-28T07:22:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-22T07:10:16.000Z (over 7 years ago)
- Last Synced: 2025-02-17T09:43:03.845Z (3 months ago)
- Homepage:
- Size: 8.79 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Trees
## 使用 normalize.css 而不是 reset.css
使用 [normalize.css 5.0](http://necolas.github.io/normalize.css/) (Chrome, Firefox, Opera, Safari 6+, IE 8+)
> 若要兼容IE6则使用 [normalize.css 1.0 ](https://github.com/necolas/normalize.css/tree/v1) (IE6+)
此规范的核心理念是通过 `{grandpaElement}-{FatherElement}-{SonElement}` 的方式书写 class ，以**降低选择器权重**和**明确样式命中元素**。
并提供 `.m-box--on` 状态机制来管理同一个模块的多种展现形式。
## 模块 `/m/`
模块代码以 `.m-` 作为 class 前缀。（若担心 `m` 出现冲突可换成其他单词）
````html
基础
title
text
高亮
title
text
````
````css
/* 模块代码均以 .m- 作为前缀 */
.m-box {
border: 1px solid #CCC;
background-color: #EEE;
}
/* .m-{模块名}-{子元素} */
.m-box-hd {
line-height: 30px;
border-bottom:1px solid #CCC;
}
/* .m-{模块名}-{子元素}-{子元素} */
.m-box-hd-title {
font-size: 28px;
}
/* .m-{模块名}-{子元素} */
.m-box-bd {
font-size: 12px;
background-color: white;
}
/* .m-{模块名}--{状态} */
.m-box--on {
border-color:orange;
background-color: #FFF1D9;
}
.m-box--on .m-box-hd {
border-bottom-color: orange;
}
/*
使用书写顺序覆盖 .m-box 的样式,
不要通过增加选择器权重的方式覆盖样式
bad: html .m-box--on {}
*/
````
**trees(树状结构)对应DOM结构**
```
box on
|-- hd
| `-- title
`-- bd
```
### 多级状态
```html
A
B
C
```
```css
.m-some-item-light {
font-weight:bold;
}
.m-some--night .m-some-item--light {
text-shadow:0,0,10px,white;
}
```
### 子模块
**非常相似的** 的 **简单** 模块可使用多个子模块开发
多个子模块组合在一起就是家族模块 `family modules`，下例就是 `text` 家族的模块分别有 `text-a` `text-b`。
家族模块可以放在一个文件夹下管理 `/m/text/a.css` `/m/text/b.css`
```html
审核中
任务正在审核
```
```css
/* /m/text/a.less */
.m-text-a {}
.m-text-a-title {font-size:2em;}
.m-text-a-text {color:gray;}
```
```html
备案
请填写您的企业信息提交备案
备案未通过
无法查询到你的营业执照
```
```css
/* /m/text/b.less */
.m-text-b {}
.m-text-b-title {text-align: center;}
.m-text-b-text {font-size:12px;}
.m-text-b--error .m-text-b-title{
color:red;
}
```
## 不允许出现以下代码
### 不允许 class 中只有状态 `class="m-some-item--on"`
```html
A
B
```
```html
A
B
```
### 不允许出现 element 选择器
**Bad**
```css
p {/* ... */}
.m-demo strong {/* ... */}
```
**good**
```css
.m-section {/* ... */}
.m-demo-import {/* ... */}
```
## table
简化 table class 的命名
```
.m-table-thead-tr-th .m-table-th
.m-table-tbody-tr .m-table-tr
.m-table-tbody-tr-td .m-table-td
.m-table-tbody-tr-td-table .m-table-2
.m-table-thead-tr-td-table .m-table-thead-2
```
````html
Name
Age
Nimo
24
Nico
Some
...
````
## 继承
例如 form 模块中提交按钮需要使用 m-btn 的样式则通过 less/sass 继承的方式实现
```html
Submit
```
```less
.m-form-submit {
.m-btn();
.m-btn--primary();
box-shadow: 0px 0px 10px skyblue;
}
```
## 组合
一个 html tag 的 class 不允许出现2个不同模块，但可以嵌套 （**模块中禁止**，**页面中避免**）
**bad**
```html
```
**good**
```html
```
因为如何一个 html tag 有2个不同模块的 class 应该使用上节的继承来做。
## 页面
与**模块**命名规则一致，但不需要 `.m-` 前缀，若项目是SPA类型则以页面 `url` 作为前缀
| 页面地址 | class |
|--------|----------------|
| `/user/login` `/user#/login` | `.user_login-box` `.user_login-box-title` |
> 在SPA场景可以使用 `_` 作为 `url` 中 `/` 的替代符号，建议使用 [CSS Modules](http://www.ruanyifeng.com/blog/2016/06/css_modules.html)。
## 命名格式
**驼峰命名：**
class 允许出现驼峰命名 `box-mainPhoto` `.m-box-mainPhoto` `.m-box-mainPhoto--lastChild`。
**下划线：** 如果你使用了 css-module 则可以使用 `_` 代替 `-` 。 `.m-box-title` `=>` `.m_box_title`
## free
`.m-head-F-inner`
`F = free`
允许出现以下情况：
```html
```
```css
.m-head {}
.m-head-F-inner {
width:1200px;
margin-left:auto;
margin-right: auto;
}
```
当模块已经开发完成并上线后，需要在现有的 HTML 的结构上再加上一层也可以使用 `m-模块名-F-名称` 的命名方式。
自由模块可以出现在模块的任意位置，甚至包裹住模块，或者与模块同级。但是不兼容滥用自由模块。自由模块是为了在开发效率和维护性中找到一个平衡点而存在的。