<commit_before>一年前在仅仅5人（包括2名老板在内）的创业团队里，本人身兼产品、设计、甚至不得以“快速学习”了前端，成为了半个前端工程师。可惜学得太快，代码毫无规范可言。现在再重新看一遍，顺便把笔记记录线上。

## Property 属性

## Selector 选择器

### Aha Moment!

```html
<div class="class-1 class-3">
  <div class="class-4">
    <div class="class-2">
    </div>
  </div>
</div>

.class-1 .class-2 {
  /*....*/
}

.class-1 > class-4{
  /*....*/
}

.class-1.class-3{
  /*....*/
}
```

[更详细学习Selectors](http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/)


### Priority 权重优先级


- 维度1：Stylesheet的位置
 + inline-style > stylesheet in head > external stylesheet
- 维度2：文档中的位置
 + 针对同一属性的重复定义，在选择符相同时，文档后面定义的覆盖前面定义的
- 维度3：针对同一属性的重复定义，当选择符不同时，用以下方法计算权重
 + inline-style, id, class, element(=> 0, 0, 0, 0)(高----->低)


## Layout 布局
### position

### float & clear

- 当元素被设置为float，本质上即离开了正常的文档流，抽出来浮动至edge，right，left（defau is none）；
- 只要本行还放得下，floated element就会浮动在本行，否则才换行；
- 所谓的edge，并不一定是窗口或父元素内的边缘，如下例最后一个element，以第1个element为 edge
```
-------- --------
|      | |      |
| left | | left |
|      | --------
|      | --------
|      | | left |
|      | |      |
---------|      |
         --------

```


### z-index

## 单位

## Performance 性能

## Specification 规范
### 基本规范
[Google 编码规范](https://google.github.io/styleguide/htmlcssguide.xml)
[BootStrap 编码规范](http://codeguide.bootcss.com/)

### 命名组织

- RSCSS(Reasonable System for CSS Stylesheet Structure): Component, Element, Variant
 + [RSCSS(Reasonable System for CSS Stylesheet Structure)](http://zhibimo.com/read/Ashu/front-end-style-guide/css/structure.html)
- BEM: Block, Element, Modifer
 + [BEM Document](https://en.bem.info/methodology/quick-start/)
- SMACSS


### 最佳实践<commit_msg>Update 2016-09-13-CSS学习笔记.md<commit_after>一年前在仅仅5人（包括2名老板在内）的创业团队里，本人身兼产品、设计、甚至不得以“快速学习”了前端，成为了半个前端工程师。可惜学得太快，代码毫无规范可言。现在再重新看一遍，顺便把笔记记录线上。

## Property 属性

## Selector 选择器

### Aha Moment!

```html
<div class="class-1 class-3">
  <div class="class-4">
    <div class="class-2">
    </div>
  </div>
</div>

.class-1 .class-2 {
  /*....*/
}

.class-1 > class-4{
  /*....*/
}

.class-1.class-3{
  /*....*/
}
```

[更详细学习Selectors](http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/)


### Priority 权重优先级


- 维度1：Stylesheet的位置
 + inline-style > stylesheet in head > external stylesheet
- 维度2：文档中的位置
 + 针对同一属性的重复定义，在选择符相同时，文档后面定义的覆盖前面定义的
- 维度3：针对同一属性的重复定义，当选择符不同时，用以下方法计算权重
 + inline-style, id, class, element(=> 0, 0, 0, 0)(高----->低)


## Layout 布局
### position

### float & clear

- 当元素被设置为float，本质上即离开了正常的文档流，抽出来浮动至edge，right，left（defau is none）；
- 只要本行还放得下，floated element就会浮动在本行，否则才换行；
- 所谓的edge，并不一定是窗口或父元素内的边缘，如下例最后一个element，以第1个element为 edge
```
-------- --------
|      | |      |
| left | | left |
|      | --------
|      | --------
|      | | left |
|      | |      |
---------|      |
         --------

```


### z-index

## 单位

## Performance 性能

## Specification 规范
### 基本规范
[Google 编码规范](https://google.github.io/styleguide/htmlcssguide.xml)
[BootStrap 编码规范](http://codeguide.bootcss.com/)

### 命名组织

- RSCSS(Reasonable System for CSS Stylesheet Structure): Component, Element, Variant
 + [RSCSS(Reasonable System for CSS Stylesheet Structure)](http://zhibimo.com/read/Ashu/front-end-style-guide/css/structure.html)
- BEM: Block, Element, Modifer
 + [BEM Document](https://en.bem.info/methodology/quick-start/)
- SMACSS

## 敏捷
### LESS


## 最佳实践


{'fraction_non_alphanumeric': 0.2084084084084084, 'fraction_numerical': 0.01921921921921922, 'mean_word_length': 3.0375757575757576, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 25, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3381260', 'n_tokens_mistral': 1730, 'n_tokens_neox': 1871, 'n_words': 190}