From 5a2973cfd6bb9f40d494ede34072c1abb33dbdc2 Mon Sep 17 00:00:00 2001 From: RosieRee Date: Sat, 2 Jun 2018 16:41:24 +0800 Subject: [PATCH] Update css-style-guide.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 根据我们项目更新了样式规范 --- css-style-guide.md | 479 +++++++++++++++++++++++++-------------------- 1 file changed, 264 insertions(+), 215 deletions(-) diff --git a/css-style-guide.md b/css-style-guide.md index 393a108..3085a6d 100644 --- a/css-style-guide.md +++ b/css-style-guide.md @@ -10,7 +10,7 @@ 　　[2.1 文件](#user-content-21-%E6%96%87%E4%BB%B6) -　　[2.2 缩进](#user-content-22-%E7%BC%A9%E8%BF%9B) +　　[2.2 模块](#user-content-22-%E7%BC%A9%E8%BF%9B) 　　[2.3 空格](#user-content-23-%E7%A9%BA%E6%A0%BC) @@ -64,14 +64,6 @@ [7 响应式](#user-content-7-%E5%93%8D%E5%BA%94%E5%BC%8F) -[8 兼容性](#user-content-8-%E5%85%BC%E5%AE%B9%E6%80%A7) - -　　[8.1 属性前缀](#user-content-81-%E5%B1%9E%E6%80%A7%E5%89%8D%E7%BC%80) - -　　[8.2 Hack](#user-content-82-hack) - -　　[8.3 Expression](#user-content-83-expression) - @@ -98,19 +90,54 @@ CSS 作为网页样式的描述语言，在百度一直有着广泛的应用。 UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。 -### 2.2 缩进 +### 2.2 模块 -#### [强制] 使用 `4` 个空格做为一个缩进层级，不允许使用 `2` 个空格 或 `tab` 字符。 +#### [强制] 使用 /* */ 注释，如果是公用模块，模块与模块之间用明显分割线划分，并注明哪个模块 + 注意：公用样式必须用用大写和下划线组合，显式表明公用模块样式，不能随意改（例如 utilies.scss 立马的样式） 示例： ```css -.selector { - margin: 0; - padding: 0; +/* good */ + +/* 公用样式 */ +.HIDE { + display: none; +} + +.BUTTON-WHITE { + color: #FFC000; + background-color: #FFF; + border: 1px solid #FFC000; + + &:hover { + color: #FFF; + border: 1px solid #FED762; + } +} + +/* --------------------------------------------------------- */ +/* 动画样式 */ +/* --------------------------------------------------------- */ +/** component 淡入淡出 */ +.component-fade-enter-active { + animation: fadein .35s ease-in-out; +} + +.component-fade-leave-active { + animation: fadeout .35s ease-in-out; } + + +/* bad */ + +// 公用样式 +.hide { + display: none; +} + ``` ### 2.3 空格 @@ -121,8 +148,14 @@ UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文 示例： ```css + +/* good */ .selector { } + +/* back */ +.selector{ +} ``` #### [强制] `属性名` 与之后的 `:` 之间不允许包含空格， `:` 与 `属性值` 之间必须包含空格。 @@ -158,21 +191,21 @@ font-family: Arial, sans-serif; ```css /* 不同属性值按逻辑分组 */ background: - transparent url(aVeryVeryVeryLongUrlIsPlacedHere) - no-repeat 0 0; + transparent url(aVeryVeryVeryLongUrlIsPlacedHere) + no-repeat 0 0; /* 可重复多次的属性，每次重复一行 */ background-image: - url(aVeryVeryVeryLongUrlIsPlacedHere) - url(anotherVeryVeryVeryLongUrlIsPlacedHere); + url(aVeryVeryVeryLongUrlIsPlacedHere) + url(anotherVeryVeryVeryLongUrlIsPlacedHere); /* 类似函数的属性值可以根据函数调用的缩进进行 */ background-image: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0.04, rgb(88,94,124)), - color-stop(0.52, rgb(115,123,162)) + linear, + left bottom, + left top, + color-stop(0.04, rgb(88,94,124)), + color-stop(0.52, rgb(115,123,162)) ); ``` @@ -188,12 +221,12 @@ background-image: -webkit-gradient( .post, .page, .comment { - line-height: 1.5; + line-height: 1.5; } /* bad */ .post, .page, .comment { - line-height: 1.5; + line-height: 1.5; } ``` @@ -204,28 +237,28 @@ background-image: -webkit-gradient( ```css /* good */ main > nav { - padding: 10px; + padding: 10px; } label + input { - margin-left: 5px; + margin-left: 5px; } input:checked ~ button { - background-color: #69C; + background-color: #69C; } /* bad */ main>nav { - padding: 10px; + padding: 10px; } label+input { - margin-left: 5px; + margin-left: 5px; } input:checked~button { - background-color: #69C; + background-color: #69C; } ``` @@ -241,12 +274,12 @@ input:checked~button { ```css /* good */ article[character="juliet"] { - voice-family: "Vivien Leigh", victoria, female; + voice-family: "Vivien Leigh", victoria, female; } /* bad */ article[character='juliet'] { - voice-family: "Vivien Leigh", victoria, female; + voice-family: "Vivien Leigh", victoria, female; } ``` @@ -260,8 +293,8 @@ article[character='juliet'] { ```css /* good */ .selector { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } /* bad */ @@ -275,20 +308,17 @@ article[character='juliet'] { ```css /* good */ .selector { - margin: 0; + margin: 0; } /* bad */ .selector { - margin: 0 + margin: 0 } ``` - - - ## 3 通用 @@ -297,7 +327,7 @@ article[character='juliet'] { ### 3.1 选择器 -#### [强制] 如无必要，不得为 `id`、`class` 选择器添加类型选择器进行限定。 +#### [强制] 如无必要，不得为 `id`、`class` 选择器添加类型选择器进行限定。不能为 id 进行样式匹配。 解释： @@ -308,16 +338,20 @@ article[character='juliet'] { ```css +
+ /* good */ -#error, -.danger-message { - font-color: #c00; +.message { + font-color: #c00; } /* bad */ -dialog#error, -p.danger-message { - font-color: #c00; +#error { + font-color: #c00; +} + +div.message { + font-color: #c00; } ``` @@ -327,12 +361,13 @@ p.danger-message { ```css /* good */ -#username input {} +.username .info-input {} .comment .avatar {} /* bad */ -.page .header .login #username input {} +.username .info-input div {} .comment div * {} +.page .header .login #username input {} ``` @@ -341,21 +376,36 @@ p.danger-message { -#### [建议] 在可以使用缩写的情况下，尽量使用属性缩写。 +#### [建议] 尽量不使用属性缩写。 + +示例： + +```css +/* good */ +.post { + font-family: arial, sans-serif; + font-size: 12px; + line-height: 1.5; +} + +/* bad */ +.post { + font: 12px/1.5 arial, sans-serif; +} +``` +#### [建议] 0.01, 0,2 等最好写成 .01, .2。 示例： ```css /* good */ .post { - font: 12px/1.5 arial, sans-serif; + color: rgba(23, 23, 23, .3); } /* bad */ .post { - font-family: arial, sans-serif; - font-size: 12px; - line-height: 1.5; + color: rgba(23, 23, 23, 0.3); } ``` @@ -371,27 +421,27 @@ p.danger-message { ```css /* centering
horizontally and highlight featured ones */ article { - margin: 5px; - border: 1px solid #999; + margin: 5px; + border: 1px solid #999; } /* good */ .page { - margin-right: auto; - margin-left: auto; + margin-right: auto; + margin-left: auto; } .featured { - border-color: #69c; + border-color: #69c; } /* bad */ .page { - margin: 5px auto; /* introducing redundancy */ + margin: 5px auto; /* introducing redundancy */ } .featured { - border: 1px solid #69c; /* introducing redundancy */ + border: 1px solid #69c; /* introducing redundancy */ } ``` @@ -399,7 +449,7 @@ article { ### 3.3 属性书写顺序 -#### [建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 **Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果）** 的顺序书写，以提高代码的可读性。 +#### [建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 ** 继承 -> Formatting Model（布局方式、位置） -> Box Model（尺寸） > Typographic（文本相关） -> Visual（视觉效果）** 的顺序书写，以提高代码的可读性。 解释： @@ -408,34 +458,61 @@ article { - Typographic 相关属性包括：`font` / `line-height` / `text-align` / `word-wrap` 等 - Visual 相关属性包括：`background` / `color` / `transition` / `list-style` 等 -另外，如果包含 `content` 属性，应放在最前面。 +另外，继承后面必须有一行空行，其他空行不强制，如果包含 `content` 属性，应放在最前面。 示例： ```css -.sidebar { - /* formatting model: positioning schemes / offsets / z-indexes / display / ... */ - position: absolute; - top: 50px; - left: 0; - overflow-x: hidden; - - /* box model: sizes / margins / paddings / borders / ... */ - width: 200px; - padding: 5px; - border: 1px solid #ddd; - - /* typographic: font / aligns / text styles / ... */ - font-size: 14px; - line-height: 20px; - - /* visual: colors / shadows / gradients / ... */ - background: #f5f5f5; - color: #333; - -webkit-transition: color 1s; - -moz-transition: color 1s; - transition: color 1s; +/* good */ +.COMMON-STYLE { + color: #FFC000; +} + +.demo { + @extend .COMMON-STYLE; + + width: 20px; + height: 20px; +} + +.selector { + @extend .COMMON-STYLE; + + /* formatting model: positioning schemes / offsets / z-indexes / display / ... */ + z-index: 9; + position: absolution; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: inline-block; + vertical-align: middle; + overflow-x: hidden; + + /* box model: sizes / margins / borders / paddings /... */ + box-sizing: border-box; + margin: 20px; + border: 1px solid #ccc; + padding: 10px; + width: 100px; + height: 100px; + + /* typographic: font / aligns / text styles / ... */ + line-height: 100px; + font-size: 20px; + font-weight: 700; + text-align: center; + word-wrap: no-wrap; + + color: #FFC000; + background-color: #fff; + background-image: url('test.png'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + cursor: pointer; + transition: color .35s ease-in-out; } ``` @@ -455,8 +532,18 @@ article { * overflow 非 visible 如希望使用更小副作用的清除浮动方法，参见 [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/) 一文。 - -另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。 +公用 clearfix 样式 +.CLEARFIX { + zoom: 1; +} +.CLEARFIX:after { + content: ""; + display: block; + height: 0; + clear: both; + visibility: hidden; + overflow: hidden; +} ### 3.5 !important @@ -522,24 +609,24 @@ article { ```css /* good */ html[lang|="zh"] q:before { - font-family: "Microsoft YaHei", sans-serif; - content: "“"; + font-family: "Microsoft YaHei", sans-serif; + content: "“"; } html[lang|="zh"] q:after { - font-family: "Microsoft YaHei", sans-serif; - content: "”"; + font-family: "Microsoft YaHei", sans-serif; + content: "”"; } /* bad */ html[lang|=zh] q:before { - font-family: 'Microsoft YaHei', sans-serif; - content: '“'; + font-family: 'Microsoft YaHei', sans-serif; + content: '“'; } html[lang|=zh] q:after { - font-family: "Microsoft YaHei", sans-serif; - content: "”"; + font-family: "Microsoft YaHei", sans-serif; + content: "”"; } ``` @@ -553,12 +640,12 @@ html[lang|=zh] q:after { ```css /* good */ panel { - opacity: .8; + opacity: .8; } /* bad */ panel { - opacity: 0.8; + opacity: 0.8; } ``` @@ -571,7 +658,7 @@ panel { ```css body { - background: url(bg.png); + background: url(bg.png); } ``` @@ -583,7 +670,7 @@ body { ```css body { - background: url(//baidu.com/img/bg.png) no-repeat 0 0; + background: url(//baidu.com/img/bg.png) no-repeat 0 0; } ``` @@ -598,12 +685,12 @@ body { ```css /* good */ body { - padding: 0 5px; + padding: 0 5px; } /* bad */ body { - padding: 0px 5px; + padding: 0px 5px; } ``` @@ -623,14 +710,14 @@ body { ```css /* good */ .success { - box-shadow: 0 0 2px rgba(0, 128, 0, .3); - border-color: #008000; + box-shadow: 0 0 2px rgba(0, 128, 0, .3); + border-color: #008000; } /* bad */ .success { - box-shadow: 0 0 2px rgba(0,128,0,.3); - border-color: rgb(0, 128, 0); + box-shadow: 0 0 2px rgba(0,128,0,.3); + border-color: rgb(0, 128, 0); } ``` @@ -641,12 +728,12 @@ body { ```css /* good */ .success { - background-color: #aca; + background-color: #aca; } /* bad */ .success { - background-color: #aaccaa; + background-color: #aaccaa; } ``` @@ -657,16 +744,16 @@ body { ```css /* good */ .success { - color: #90ee90; + color: #90ee90; } /* bad */ .success { - color: lightgreen; + color: lightgreen; } ``` -#### [建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。 +#### [建议] 颜色值中的英文字符采用大写。如不用小写也需要保证同一项目内保持大小写一致。 示例： @@ -674,23 +761,65 @@ body { ```css /* good */ .success { - background-color: #aca; - color: #90ee90; + background-color: #aca; + color: #90ee90; } /* good */ .success { - background-color: #ACA; - color: #90EE90; + background-color: #ACA; + color: #90EE90; } /* bad */ .success { - background-color: #ACA; - color: #90ee90; + background-color: #ACA; + color: #90ee90; } ``` +#### [建议] 如果颜色值在项目中多次出现，可提取出变量引用。 + +示例： + +```css/** global color */ +$black: #000; +$white: #FFF; +$dark-grey: #333; +$default-grey: #666; +$light-grey: #999; +$lighter-grey: #aaa; + +$facebook-color: #3B5998; +$twitter-color: #2297E9; +$google-plus-color: #D44635; +$vk-color: #2E74AE; + +/** custom them */ +$them-grey-bg: #F2F2F2; +$them-yellow: #FFC000; +$border-color: #E2E2E2; +$them-yellow-light: #FFCC00; +$them-yellow-lighter: #FFE643; + +$text-default-color: #999; +$text-hover-color: #FFC000; +$text-press-color: #DF9D04; +$button-default-color: #FFC000; +$button-hover-color: #FED762; +$button-press-color: #DF9D04; +$login-icon-color: #979797; + +/** global font size */ +$smallest-font: 14px; +$smaller-font: 16px; +$small-font: 24px; +$default-font: 28px; +$large-font: 34px; +$larger-font: 36px; +$title-font: 32px; +``` + ### 4.6 2D 位置 @@ -707,12 +836,12 @@ body { ```css /* good */ body { - background-position: center top; /* 50% 0% */ + background-position: center top; /* 50% 0% */ } /* bad */ body { - background-position: top; /* 50% 0% */ + background-position: top; /* 50% 0% */ } ``` @@ -748,7 +877,7 @@ body { ```css h1 { - font-family: "Microsoft YaHei"; + font-family: "Microsoft YaHei"; } ``` @@ -764,12 +893,12 @@ h1 { ```css /* Display according to platform */ .article { - font-family: Arial, sans-serif; + font-family: Arial, sans-serif; } /* Specific for most platforms */ h1 { - font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; + font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; } ``` @@ -780,20 +909,20 @@ h1 { ```css /* good */ body { - font-family: Arial, sans-serif; + font-family: Arial, sans-serif; } h1 { - font-family: Arial, "Microsoft YaHei", sans-serif; + font-family: Arial, "Microsoft YaHei", sans-serif; } /* bad */ body { - font-family: arial, sans-serif; + font-family: arial, sans-serif; } h1 { - font-family: Arial, "Microsoft YaHei", sans-serif; + font-family: Arial, "Microsoft YaHei", sans-serif; } ``` @@ -835,12 +964,12 @@ CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览 ```css /* good */ h1 { - font-weight: 700; + font-weight: 700; } /* bad */ h1 { - font-weight: bold; + font-weight: bold; } ``` @@ -860,7 +989,7 @@ h1 { ```css .container { - line-height: 1.5; + line-height: 1.5; } ``` @@ -877,12 +1006,12 @@ h1 { ```css /* good */ .box { - transition: color 1s, border-color 1s; + transition: color 1s, border-color 1s; } /* bad */ .box { - transition: all 1s; + transition: all 1s; } ``` @@ -904,19 +1033,19 @@ h1 { ```css /* good */ .box { - transition: transform 1s; + transition: transform 1s; } .box:hover { - transform: translate(20px); /* move right for 20px */ + transform: translate(20px); /* move right for 20px */ } /* bad */ .box { - left: 0; - transition: left 1s; + left: 0; + transition: left 1s; } .box:hover { - left: 20px; /* move right for 20px */ + left: 20px; /* move right for 20px */ } ``` @@ -979,86 +1108,6 @@ h1 { -## 8 兼容性 - - -### 8.1 属性前缀 - - -#### [强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。 - -解释： - -标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。 - - -示例： - -```css -.box { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -``` - - -### 8.2 Hack - - -#### [建议] 需要添加 `hack` 时应尽可能考虑是否可以采用其他方式解决。 - -解释： - -如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。 - -#### [建议] 尽量使用 `选择器 hack` 处理兼容性，而非 `属性 hack`。 - -解释： - -尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。 - - -示例： - -```css -/* IE 7 */ -*:first-child + html #header { - margin-top: 3px; - padding: 5px; -} - -/* IE 6 */ -* html #header { - margin-top: 5px; - padding: 4px; -} -``` - - -#### [建议] 尽量使用简单的 `属性 hack`。 - -示例： - -```css -.box { - _display: inline; /* fix double margin */ - float: left; - margin-left: 20px; -} - -.container { - overflow: hidden; - *zoom: 1; /* triggering hasLayout */ -} -``` - -### 8.3 Expression - - -#### [强制] 禁止使用 `Expression`。 - -