一般团队都有对CSS样式的规范,因为只有写的规范些,维护层本低,易懂。我们开发并不一次性的,往往都是要迭代的,如果这次随便写,下次迭代的时候将付出高昂的代价。而团队的规范一般都大同小异,往往都包含一下内容:

1、class命名及使用

(1)、命名尽量简洁有意义,比如大盒子一般命名为‘container’,而这种就命名为‘steps’,然后类名个人喜欢用‘-’,而不是驼峰或者下划线比如:app-main

(2)、使用:类名一般都是用来写样式的,js操作dom多用ID选择器

2、少用id选择器,

因为它的权重过高,一般不用id选择器写样式,因为可能会覆盖其它页面的样式

3、定位

(1)、尽量少用position: absolute

在定位里position: absolute是最次的选择,因为它会导致元素脱离标准流

(2)、父元素最好不要给高度,让子元素自动撑开

因为如果先给父元素固定了高度,后面的子元素如果有一个高度大于父元素就会跑出父元素,使父元素不再控制的住它,如:

(3)、多用padding、margin、flex布局

多使用这三个布局,因为它们遵循标准流。

(4)、善用margin、padding

一般兄弟元素之间用margin,父子之间用padding

4、样式书写


如这样:

.app-skill {
-webkit-box-orient: vertical; .skill-config-step {
margin-left: 40px; .label {
margin-bottom: 10px;
font-size: 14px;
color: @main-label-color;
}
.config-list {
display: flex;
justify-content: space-between;
width: 1030px; .config-item {
width: 510px;
height: 75px;
line-height: 75px;
text-align: center;
color: #00A1FF;
border: 1px solid @main-divider-color;
border-radius: 4px;
}
}
}
}

(1)、使用sass或者less的话,样式内容和下个一选择器之间要空行

(2)、书写样式时最好先写布局样式再写宽高、边距,最后就是其他样式

(3)、不要嵌套太深,要充分发挥每个div的作用,不要增加个div只为了一两句样式。

比如:

这个就嵌套太深了,尤其类名不用写这么多,不然以后别人要覆盖你的样式要么再加类名,要么就是加‘!important’了,十分不友好。

(暂时就只想到这么多,以后再补充啦)

CSS样式规范的更多相关文章

  1. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  2. CSS 样式书写规范

    可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...

  3. CSS样式表的写作规范

    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...

  4. css样式书写规范

    在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position  display  float  left  top  right  bottom ...

  5. css书写规范及特殊样式

    1.CSS书写顺序: (1)位置:position.top.right.z-index.display.float (2)大小:width.height.padding.margin (3)文字系列: ...

  6. css命名规范—CSS样式命名整理

    CSS样式命名整理 页面结构 容器: container/wrap整体宽度:wrapper页头:header内容:content页面主体:main页尾:footer导航:nav侧栏:sidebar栏目 ...

  7. 基于腾讯手Q样式规范Frozen UI

    Frozen UI是一个开源的简单易用,轻量快捷的移动端UI框架.基于手Q样式规范,选取最常用的组件,做成公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中. css组件包括 ...

  8. CSS命名规范

    DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...

  9. html和css书写规范

    HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...

随机推荐

  1. Spring 4 MVC+Apache Tiles 3 Example

    In this post we will integrate Apache Tiles 3 with Spring MVC 4, using annotation-based configuratio ...

  2. Swift过程控制和功能

    流量控制(Control Flow) For周期 for骑自行车和C语言,OC用法很相似,平时for()和 for in两种. 遍历可以使用下划线"_"略对值的訪问等. Switc ...

  3. Matlab Tricks(十五) —— 圆的正确画法

    使用参数方程, phi = 0:0.01:2*pi; x = cos(phi); y = sin(phi); axis equal plot(x, y) 根据参数方程,显然,圆心在 (0, 0),半径 ...

  4. redis支持哪些数据类型

    虽然redis的key和value之支持string和byte[],但是仍可以以string的形式保存其他格式,甚至是图片. 1)String: 用set(key,value),get(key) 2) ...

  5. 【转】ARRAYLIST VECTOR LINKEDLIST 区别与用法

    转自:http://www.cnblogs.com/mgod/archive/2007/08/05/844011.html ArrayList 和Vector是采用数组方式存储数据,此数组元素数大于实 ...

  6. Method and system for public-key-based secure authentication to distributed legacy applications

    A method, a system, an apparatus, and a computer program product are presented for an authentication ...

  7. HTML 基础知识(特殊字符的转义)

    1. body.head(meta) <body></body>标签的常见属性: bgcolor:整个页面的背景: text:设置文本颜色 link:设置连接颜色(),vlin ...

  8. iOS8的APP过渡过程

    1. 2. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluX3hpYW53ZWk=/font/5a6L5L2T/fontsize/400/fill/ ...

  9. Linux性能测试 ps命令

    名称:ps 使用权限:所有使用者 使用方式:ps [options] [--help] 说明:显示瞬间行程 (process) 的动态 参数: ps 的参数非常多, 在此仅列出几个常用的参数并大略介绍 ...

  10. 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

    1.index.wxml <!--index.wxml--> <button style="margin:30rpx;" bindtap="choose ...