万网网站建设的子分类能显示多少个,融水县建设局网站,营销型网站的设计步骤,wordpress 不做SEO本篇文章是基于王叨叨大佬师父维护的文档梳理的#xff0c;有兴趣可以去看一下原文CSS编码规范。
其实不管是HTML也好#xff0c;还是CSS也好#xff0c;有些规范其实是共通的。
1. 命名
class的命名应该偏向语义化#xff0c;不是为了样式而去命名#xff0c;而是通过…本篇文章是基于王叨叨大佬师父维护的文档梳理的有兴趣可以去看一下原文CSS编码规范。
其实不管是HTML也好还是CSS也好有些规范其实是共通的。
1. 命名
class的命名应该偏向语义化不是为了样式而去命名而是通过class的命名能清楚了解页面结构并定位到该位置。
也能避免多人合作时命名冲突的问题。
【强制】 class命名遵循BEM命名思想。
解释
当项目中如果没有使用样式局部作用域框架就采用BEM命名思想BEM的就是块block、元素element、修饰符modifier。
BEM中有两种符号结构“–”和“__”
两个中横线“–”表示组件的状态或版本两个下划线“__”表示组件的里面后代组件
如下
.person {}
.person--female {}
.person__head {}
上面代码中.person相当于是一个组件结构.person–female相当于是.person的一个版本.person__head相当于是.person里面的一个模块。
【推荐】 在对应的地方使用对应的命名。
解释
以is命名表示动态的、具有交互性质的状态。例如.is-open、.is-active、.is-selected等。以ui或者mod命名表示可复用、移植的组件模块。例如.ui-slider、.mod-drop-menu等。以ext命名表示对组件基类的视觉形态的扩展。例如.ext-cover等
【推荐】 一般区块都可划分为头部、身体和尾部因此可以分别以hd、bd、ft来划分
2. 代码风格
【建议】使用2个空格做一个缩进层级不允许使用tab字符。
【强制】字母与符号之间必须有空格若是逗号、句号等符号紧跟字母这些符号前面不需要空格但后面需要。
解释
空格使用风格如下
main nav {padding: 10px;background: rgb(255, 0, 0);
}
【建议】 当一个样式几个选择器共用时逗号隔开的同时每个选择器声明必须独占一行。
/* Not so great */
.post, .page, .comment {line-height: 1.5;
}/* Better */
.post,
.page,
.comment {line-height: 1.5;
}
【强制】 属性定义另起一行且分号结尾。
3. 选择器
【强制】 如无必要不得为id、class选择器添加类型进行限制。
示例
/* bad */
div.main {color: #f00;
}/* good */
.main {color: #f00;
}
【建议】 选择器的嵌套层级应该不大于3级位置靠后的的限定条件应尽可能精确。
【建议】 同一个选择器内的属性在书写时应按功能进行分组。
属性书写优先顺序如下
第一、Positioning Model布局方式、位置。相关属性包括定位属性position、层级属性z-index、布局属性display、浮动属性float等。第二、Box model盒模型。相关属性包括宽width、高height、边框border、内外边距margin/padding、滑动框overflow等。第三、Typographic文本排版。相关属性包括font、line-height、text-align、word-wrap等。第四、 Visual视觉外观。相关属性包括background、color、list-style 、transform、animation等。第五、如果包含content属性应放在最前面。content属性就是在页面中某个位置插值的通常与伪元素一起使用。
【强制】 属性选择器中的值、文本内容必须使用双引号包起来不允许使用单引号。
【强制】 url()函数中的路径不加双引号
示例
/* bad */
div[titleperson] {color: #f00;font-family: Microsoft YaHei;background: url(bg.png);
}/* good */
div[titleperson] {color: #f00;font-family: Microsoft YaHei;background: url(bg.png);
}
【强制】 不要过度简写属性如果只需定义其中的某几个属性而不是全部尽量分开写。
解释
过度的简写属性会导致属性滥用。比如我只需要定义一个外边距的上部为10px就只需要定义margin上部分的属性即可。
/* bad */
div {margin: 10px;
}
/* good */
div {margin-top: 10px;
}
【强制】 当数值为0-1之间的小数时省略整数部分的0长度为0时必须省略单位。
示例
/* bad */
div {opacity: 0.8;margin: 0px auto;
}
/* good */
div {opacity: .8;margin-top: 0 auto;
}
【强制】 rgb颜色必须使用十六进制表示#xxxxxx不允许使用rgb()带有透明度的可以使用rgba()颜色值不允许使用英文名称。
/* bad */
div {border-color: rgb(255, 0, 0);color: green;
}
/* good */
div {border-color: #f00;color: #0f0;
}
【建议】十六进制中的颜色的英文字符要小写。
解释
尽量小写但若是别人大写了就大写同一个项目要保持一致。
【强制】 背景图片设置位置时必须同时给出水平和垂直方向的位置。
解释
只给出一个方向的值时另一个方向的值会被默认为center为避免理解有误尽量两个方向的值都给到。
【强制】 font-family属性值使用英文名称。
解释
西文字体在前中文字体在后。效果佳、质量高字体在前。最后必须指定一个通用字体族 (serif /sans-serif)。
【强制】 font-weight属性值必须是数值。
解释
css字重分100-900共九档由于浏览器的兼容性不同浏览器对 font-weight属性值相同的可能显示效果不同。但公认的情况是值为400的时候相当于正常的字体值为700的时候相当于粗体。
