CSS高效书写小贴士分享

原创 彭淇  2017-08-09 08:42:20  阅读 2221 次 评论 1 条

统一样式书写顺序

位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)

精简特殊值

颜色

十六进制表示法如果每两位的值相同,可以缩写一半,如:

color:#336699;
background:#AABBCC;

简化后

color:#369;
background:#ABC;

去除小数点前的0

小数点之前的0可去掉,如

color:rgba(255,255,224,0.6);
opacity:0.8;

简化后

color:rgba(255,255,224,.6);
opacity:.8;

用none代替0

需要去除某些属性时,请用none而不是0,因为0仍旧会解析出一个0宽度的属性,none则不会解析,大大提高性能。

border:none;
outline:none;
list-style:none;

复合属性缩写

盒尺寸:margin,padding

以margin为例,复合值顺序:上 右 下 左;

出现未定义时:右=上,下=上,左=右。

margin: 10px;                   /* 左=下=右=上=10px */
margin: 10px 20px;              /* 下=上=10px,左=右=20px */
margin: 10px 20px 30px;         /* 上=10px,左=右=20px,下=30px */
margin: 10px 20px 30px 40px;    /* 上=10px,右=20px,下=30px,左=40px */

字体:font

复合值顺序:字体样式 字体变形 字体粗细 字体大小/行高 字体名称;

语法:font:style variant weight size/height family;

展开属性:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:14px;
line-height:1.6em;
font-family:"Lucida Grande",sans-serif;

复合属性:

font:italic small-caps bold 14px/1.6em "Lucida Grande",sans-serif;

注意:缩写字体定义,至少要定义font-size和font-family两个值,且font具有继承性。

css2边框:border

复合值顺序:宽度 样式 颜色:

border: 1px solid #000;        /* 1px宽的实线黑色边框 */

注意:若边框颜色和字体颜色一致,可省略。

取消默认边框:border:none;

css3边框圆角:border-radius

复合值顺序:

正圆为左上半径 右上半径 右下半径 左下半径;

椭圆为左上X轴半径 右上X轴半径 右下X轴半径 左下X轴半径/左上Y轴半径 右上Y轴半径 右下Y轴半径 左下Y轴半径;

出现未定义时:右上=左上,右下=左上,左下=右上

正圆实例:

/* 左下半径=右下半径=右上半径=左上半径=10px */
border-radius: 10px;
/* 右下半径=左上半径=10px,左下半径=右上半径=20px */
border-radius: 10px 20px;
/* 左上半径=10px,左下半径=右上半径=20px,右下半径=30px */
border-radius: 10px 20px 30px;
/* 左上半径=10px,右上半径=20px,右下半径=30px,左下半径=40px */
border-radius: 10px 20px 30px 40px;

椭圆实例:

/* 左下X轴半径=右下X轴半径=右上X轴半径=左上X轴半径=10px */
/* 左下Y轴半径=右下Y轴半径=右上Y轴半径=左上Y轴半径=20px */
border-radius: 10px/20px;
/* 右下X轴半径=左上X轴半径=10px,左下X轴半径=右上X轴半径=10px */
/* 左下Y轴半径=右下Y轴半径=右上Y轴半径=左上Y轴半径=20px */
border-radius: 10px 20px/20px;
/* 左上X轴半径=10px,左下X轴半径=右上X轴半径=20px,右下X轴半径=30px */
/* 左下Y轴半径=右下Y轴半径=右上Y轴半径=左上Y轴半径=20px */
border-radius: 10px 20px 30px/20px;
/* 左上X轴半径=10px,右上X轴半径=20px,右下X轴半径=30px,左下X轴半径=40px */
/* 左下Y轴半径=右下Y轴半径=右上Y轴半径=左上Y轴半径=20px */
border-radius: 10px 20px 30px 40px/20px;
/* Y轴半径同理不重复,完整属性如: */
/* 左上X轴半径=10px,右上X轴半径=20px,右下X轴半径=30px,左下X轴半径=40px */
/* 左上Y轴半径=40px,右上Y轴半径=30px,右下Y轴半径=20px,左下Y轴半径=10px */
border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;

背景:background

复合值顺序:颜色 图片地址 重复方式 是否固定 位置;

语法:background:color image repeat attachment position;

展开属性:

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

复合属性:

background:#f00 url(background.gif) no-repeat fixed 0 0;

注意:可省略一项或多项值,省略后采用默认值:

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%

仅设置颜色背景时请采用background-color属性,设置图片背景时推荐包含颜色背景,在图片加载失败时使用颜色背景。

列表:list-style

复合顺序:标记类型 标记位置 图片标记;

语法:type position image。

展开属性:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

复合属性:

list-style:square inside url(image.gif);

取消默认列表标记:list-style:none;

注意:不推荐使用list-style-image,若需要图片标记,推荐使用background-image。

css3动画效果属性:animation

复合顺序:keyframe名 动画持续时间(s/ms) 速度曲线函数 动画延迟时间 重复次数 动画方向;

语法:animation: name duration timing-function delay iteration-count direction;

例子:

animation:myMove 1s ease 1s  infinite alternate;

注意:至少需要添加keyframe名和持续时间,否则由于持续时间默认为0,动画无法运行。

省略的属性将采用默认值:

duration:0;
timing-function:ease;
delay:0;
iteration-count:1;
direction:normal;

若animation-direction 值是 "alternate",则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)反向播放。只有在animation-iteration-count设置值超过1才有效果。

css3过渡效果属性:transition

复合顺序:作用的属性 过渡效果持续时间 时间曲线函数 延迟时间;

语法:transition: property duration timing-function delay;

例子:

transition:width 2s ease-in 1s;

注意:至少需要添加过渡效果持续时间,否则由于默认持续时间为0,没有效果。

省略的属性将采用默认值:

property:all;
duration:0;
timing-function:ease;
delay:0;

过渡效果出现在规定的属性出现变化的时候。


css3还有一些不常用的复合属性如:outline,text-decoration,border-image等可自行了解。

合适的选择器

浏览器渲染原理

渲染顺序为:

1、解析HTML以重建DOM树(Parsing HTML to construct the DOM tree ):渲染引擎开始解析HTML文档,转换树中的标签到DOM节点,它被称为“内容树”。

2、构建渲染树(Render tree construction):解析CSS(包括外部CSS文件和样式元素),根据CSS选择器计算出节点的样式,创建另一个树 —- 渲染树。

3、布局渲染树(Layout of the render tree): 从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标。

4、绘制渲染树(Painting the render tree) : 遍历渲染树,每个节点将使用UI后端层来绘制。


主要的流程就是:构建一个dom树,页面要显示的各元素都会创建到这个dom树当中,每当一个新元素加入到这个dom树当中,浏览器便会通过css引擎查遍css样式表,找到符合该元素的样式规则应用到这个元素上。

注意:css引擎查找样式表,对每条规则都按从右到左的顺序去匹配。 

加快渲染的选择器原则

1、避免使用通配规则:如*{}计算次数惊人!只对需要用到的元素进行选择。

2、尽量少的去对标签进行选择,而是用class:如#nav li{},可以为li加上nav_item的类名,如下选择.nav_item{}。

3、不要去用标签限定ID或者类选择符:如ul#nav,应该简化为#nav。

4、尽量少的去使用后代选择器,降低选择器的权重值:后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素。

5、考虑继承:了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则。

语义化选择器

为了管理和维护,选择器语义化是很重要的,所以不能都用ID,还需要语义化的设置:

1、ID名和类名要有意义:ID名和类名要有意义,可加上特殊的前缀进行分组,便于维护和管理;

2、一律采用小写英文,尽量不简写,除非是通用简写;

3、采用横杠分割单词:不要采用下划线,js有歧义,不推荐使用驼峰,可读性一般,简单的名称可不用分割;

4、使用复合类:尽量少使用后代选择器,将某一类属性抽象出来,类似OOCSS(面向对象CSS),然后将多个类复合为某个元素设置属性。

常用语义化名称列表

页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

导航

导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary

功能

标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:register
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标籤页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

图片

图片是网页的主角元素和优化空间最大的元素之一,优化方向主要有:

图片大小

网页上的小图在使用前压缩,不但要压缩像素,还要压缩大小,不要采用图片width和height进行限制压缩,将造成极大的浪费。

背景图片平铺图片大小:要合适

有时为了节省带宽,将背景图片截成1px*1px,结果呢?页面渲染更慢了,为什么?乘法的可怕之处就在这里。

平铺100px*100px的页面需要计算的次数100*100=10000,如果是整个页面的背景1920px*800px,计算次数为1920*800=1536000,所以平铺图片未必越小越好。

图片格式

非动态图直接采用PNG格式,比GIF小的多,压缩级别在8-12之间。

虽然IE6对PNG透明度支持不太好,但是IE6,呵呵。

雪碧图

将页面中的多个小图标合并成一张大图,减少HTTP请求,再利用background-position获取需要的小图。

Spirite技术出现很久应用也很广泛。

表现和内容分离

与内容无关的图片设置为背景,这些图片仅仅为了页面美观,不是内容,而是表现。


本文地址:https://www.pengqi.club/blog/8.html
版权声明:本文为原创文章,版权归 彭淇 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. 匿名
    匿名 【县长】  @回复

    [blockquote][F1] 好羞射,文章真的好赞啊,顶博主![/blockquote]