css代码优化篇

心情比较不咋地,不想说什么了

代码演示如下:

不推荐

  1. .fw-800 {
  2. font-weight: 800;
  3. }
  4. .red {
  5. color: red;
  6. }

推荐

  1. .heavy {
  2. font-weight: 800;
  3. }
  4. .important {
  5. color: red;
  6. }

 

合理的避免使用ID

一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
使用ID唯一有效的是确定网页或整个站点中的位置。
尽管如此,你应该始终考虑使用class,而不是id,除非只使用一次。

不推荐

  1. #content .title {
  2. font-size: 2em;
  3. }

推荐

  1. .content .title {
  2. font-size: 2em;
  3. }

另一个反对使用ID的观点是含有ID选择器权重很高。
一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器,这使得它很奇怪。

  1. // 这个选择器权重高于下面的选择器
  2. #content .title {
  3. color: red;
  4. }
  5. // than this selector!
  6. html body div.content.news-content .title.content-title.important {
  7. color: blue;
  8. }

 

CSS选择器中避免标签名

当构建选择器时应该使用清晰, 准确和有语义的class(类)名。不要使用标签选择器。 如果你只关心你的class(类)名
,而不是你的代码元素,这样会更容易维护。

从分离的角度考虑,在表现层中不应该分配html标记/语义。
它可能是一个有序列表需要被改成一个无序列表,或者一个div将被转换成article。
如果你只使用具有实际意义的class(类)名,
并且不使用元素选择器,那么你只需要改变你的html标记,而不用改动你的CSS。

不推荐

  1. div.content > header.content-header > h2.title {
  2. font-size: 2em;
  3. }

推荐

  1. .content > .content-header > .title {
  2. font-size: 2em;
  3. }

 

尽可能的精确

很多前端开发人员写选择器链的时候不使用 直接子选择器(注:直接子选择器和后代选择器的区别)。
有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
然而,在任何情况下,这是一个非常不好的做法。
如果你不写很通用的,需要匹配到DOM末端的选择器, 你应该总是考虑直接子选择器。

考虑下面的DOM:

  1. <article class="content news-content">
  2. <span class="title">News event</span>
  3. <div class="content-body">
  4. <div class="title content-title">
  5. Check this out
  6. </div>
  7. <p>This is a news article content</p>
  8. <div class="teaser">
  9. <div class="title">Buy this</div>
  10. <div class="teaser-content">Yey!</div>
  11. </div>
  12. </div>
  13. </article>

下面的CSS将应用于有title类的全部三个元素。
然后,要解决content类下的title类 和 teaser类下的title类下不同的样式,这将需要更精确的选择器再次重写他们的样式。

不推荐

  1. .content .title {
  2. font-size: 2rem;
  3. }

推荐

  1. .content > .title {
  2. font-size: 2rem;
  3. }
  4. .content > .content-body > .title {
  5. font-size: 1.5rem;
  6. }
  7. .content > .content-body > .teaser > .title {
  8. font-size: 1.2rem;
  9. }

 

缩写属性

CSS提供了各种缩写属性(如 font 字体)应该尽可能使用,即使在只设置一个值的情况下。

使用缩写属性对于代码效率和可读性是有很有用的。

不推荐

  1. border-top-style: none;
  2. font-family: palatino, georgia, serif;
  3. font-size: 100%;
  4. line-height: 1.6;
  5. padding-bottom: 2em;
  6. padding-left: 1em;
  7. padding-right: 1em;
  8. padding-top: 0;

推荐

  1. border-top: 0;
  2. font: 100%/1.6 palatino, georgia, serif;
  3. padding: 0 1em 2em;

 

0 和 单位

省略“0”值后面的单位。不要在0值后面使用单位,除非有值。

不推荐

  1. padding-bottom: 0px;
  2. margin: 0em;

推荐

  1. padding-bottom: 0;
  2. margin: 0;

 

十六进制表示法

在可能的情况下,使用3个字符的十六进制表示法。
颜色值允许这样表示,
3个字符的十六进制表示法更简短。

始终使用小写的十六进制数字。

不推荐

  1. color: #FF33AA;

推荐

  1. color: #f3a; //注意小写

 

ID 和 Class(类) 名的分隔符

使用连字符(中划线)分隔ID和Class(类)名中的单词。为了增强课理解性,在选择器中不要使用除了连字符(中划线)以为的任何字符(包括没有)来连接单词和缩写。

另外,作为该标准,预设属性选择器能识别连字符(中划线)作为单词[attribute|=value]的分隔符,
所以最好的坚持使用连字符作为分隔符。

不推荐

  1. .demoimage {}      //驼峰式命名或者连词符
  2. .error_status {}   //不要使用下划线

推荐

  1. #video-id {}
  2. .ads-sample {}

 

Hacks

避免用户代理检测以及CSS“hacks” – 首先尝试不同的方法。通过用户代理检测或特殊的CSS滤镜,变通的方法和 hacks 很容易解决样式差异。为了达到并保持一个有效的和可管理的代码库,这两种方法都应该被认为是最后的手段。换句话说,从长远来看,用户代理检测和hacks
会伤害项目,作为项目往往应该采取阻力最小的途径。也就是说,轻易允许使用用户代理检测和hacks 以后将过于频繁。

 

声明顺序

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。

作为最佳实践,我们应该遵循以下顺序(应该按照下表的顺序):

  1. 结构性属性:

    1. display
    2. position, left, top, right etc.
    3. overflow, float, clear etc.
    4. margin, padding
  2. 表现性属性:
    1. background, border etc.
    2. font, text

不推荐

  1. .box {
  2. font-family: ‘Arial‘, sans-serif;
  3. border: 3px solid #ddd;
  4. left: 30%;
  5. position: absolute;
  6. text-transform: uppercase;
  7. right: 30%;
  8. isplay: block;
  9. font-size: 1.5rem;
  10. overflow: hidden;
  11. padding: 1em;
  12. margin: 1em;
  13. }

推荐

  1. .box {
  2. display: block;
  3. position: absolute;
  4. left: 30%;
  5. right: 30%;
  6. overflow: hidden;
  7. margin: 1em;
  8. padding: 1em;
  9. border: 3px solid #ddd;
  10. font-family: ‘Arial‘, sans-serif;
  11. font-size: 1.5rem;
  12. text-transform: uppercase;
  13. }

 

声明结束

为了保证一致性和可扩展性,每个声明应该用分号结束,每个声明换行。

不推荐

  1. .test {
  2. display: block; height: 100px
  3. }

推荐

  1. .test {
  2. display: block;
  3. height: 100px;
  4. }

 

属性名结束

属性名的冒号后使用一个空格。出于一致性的原因,
属性和值(但属性和冒号之间没有空格)的之间始终使用一个空格。

不推荐

  1. h3 {
  2. font-weight:bold;
  3. }

推荐

  1. h3 {
  2. font-weight: bold;
  3. }

 

选择器和声明分离

每个选择器和属性声明总是使用新的一行。

不推荐

  1. a:focus, a:active {
  2. position: relative; top: 1px;
  3. }

推荐

  1. h1,
  2. h2,
  3. h3 {
  4. font-weight: normal;
  5. line-height: 1.2;
  6. }

 

规则分隔

规则之间始终有一个空行(双换行符)分隔。

推荐

  1. html {
  2. background: #fff;
  3. }
  4. body {
  5. margin: auto;
  6. width: 50%;
  7. }

 

CSS引号

属性选择器或属性值用双引号(””),而不是单引号(”)括起来。
URI值(url())不要使用引号。

不推荐

  1. @import url(‘//cdn.com/foundation.css‘);
  2. html {
  3. font-family: ‘open sans‘, arial, sans-serif;
  4. }
  5. body:after {
  6. content: ‘pause‘;
  7. }

推荐

  1. @import url(//cdn.com/foundation.css);
  2. html {
  3. font-family: "open sans", arial, sans-serif;
  4. }
  5. body:after {
  6. content: "pause";
  7. }

 

选择器嵌套 (SCSS)

在Sass中你可以嵌套选择器,这可以使代码变得更清洁和可读。嵌套所有的选择器,但尽量避免嵌套没有任何内容的选择器。
如果你需要指定一些子元素的样式属性,而父元素将不什么样式属性,
可以使用常规的CSS选择器链。
这将防止您的脚本看起来过于复杂。

不推荐

  1. // Not a good example by not making use of nesting at all
  2. .content {
  3. display: block;
  4. }
  5. .content > .news-article > .title {
  6. font-size: 1.2em;
  7. }

不推荐

  1. // Using nesting is better but not in all cases
  2. // Avoid nesting when there is no attributes and use selector chains instead
  3. .content {
  4. display: block;
  5. > .news-article {
  6. > .title {
  7. font-size: 1.2em;
  8. }
  9. }
  10. }

推荐

  1. // This example takes the best approach while nesting but use selector chains where possible
  2. .content {
  3. display: block;
  4. > .news-article > .title {
  5. font-size: 1.2em;
  6. }
  7. }

 

嵌套中引入 空行 (SCSS)

嵌套选择器和CSS属性之间空一行。

不推荐

  1. .content {
  2. display: block;
  3. > .news-article {
  4. > .title {
  5. font-size: 1.2em;
  6. }
  7. > .article-footnote {
  8. font-size: 0.8em;
  9. }
  10. }
  11. }

推荐

  1. .content {
  2. display: block;
  3. > .news-article {
  4. > .title {
  5. font-size: 1.2em;
  6. }
  7. > .article-footnote {
  8. font-size: 0.8em;
  9. }
  10. }
  11. }

 

上下文媒体查询(SCSS)

在Sass中,当你嵌套你的选择器时也可以使用上下文媒体查询。
在Sass中,你可以在任何给定的嵌套层次中使用媒体查询。
由此生成的CSS将被转换,这样的媒体查询将包裹选择器的形式呈现。

这技术非常方便,
有助于保持媒体查询属于的上下文。

第一种方法这可以让你先写你的手机样式,然后在任何你需要的地方
用上下文媒体查询以提供桌面样式。

不推荐

  1. // This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
  2. // on the bottom in a media query. This is error prone and makes maintenance harder as it‘s not so easy to relate
  3. // the content in the media query to the content in the upper part (mobile style)
  4. .content-page {
  5. font-size: 1.2rem;
  6. > .main {
  7. > .latest-news {
  8. padding: 1rem;
  9. > .news-article {
  10. padding: 1rem;
  11. > .title {
  12. font-size: 2rem;
  13. }
  14. }
  15. }
  16. > .content {
  17. margin-top: 2rem;
  18. padding: 1rem;
  19. }
  20. }
  21. > .page-footer {
  22. margin-top: 2rem;
  23. font-size: 1rem;
  24. }
  25. }
  26. @media screen and (min-width: 641px) {
  27. .content-page {
  28. font-size: 1rem;
  29. > .main > .latest-news > .news-article > .title {
  30. font-size: 3rem;
  31. }
  32. > .page-footer {
  33. font-size: 0.8rem;
  34. }
  35. }
  36. }

推荐

  1. // This is the same example as above but here we use contextual media queries in order to put the different styles
  2. // for different media into the right context.
  3. .content-page {
  4. font-size: 1.2rem;
  5. @media screen and (min-width: 641px) {
  6. font-size: 1rem;
  7. }
  8. > .main {
  9. > .latest-news {
  10. padding: 1rem;
  11. > .news-article {
  12. padding: 1rem;
  13. > .title {
  14. font-size: 2rem;
  15. @media screen and (min-width: 641px) {
  16. font-size: 3rem;
  17. }
  18. }
  19. }
  20. }
  21. > .content {
  22. margin-top: 2rem;
  23. padding: 1rem;
  24. }
  25. }
  26. > .page-footer {
  27. margin-top: 2rem;
  28. font-size: 1rem;
  29. @media screen and (min-width: 641px) {
  30. font-size: 0.8rem;
  31. }
  32. }
  33. }

 

嵌套顺序和父级选择器(SCSS)

当使用Sass的嵌套功能的时候,
重要的是有一个明确的嵌套顺序,
以下内容是一个SCSS块应具有的顺序。

  1. 当前选择器的样式属性
  2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
  3. 伪类元素 (:before and :after)
  4. 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
  5. 用Sass的上下文媒体查询
  6. 子选择器作为最后的部分

The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

  1. .product-teaser {
  2. // 1. Style attributes
  3. display: inline-block;
  4. padding: 1rem;
  5. color: grey;
  6. // 2. Pseudo selectors with parent selector
  7. &:hover {
  8. color: black;
  9. }
  10. // 3. Pseudo elements with parent selector
  11. &:before {
  12. content: "";
  13. display: block;
  14. border-top: 1px solid grey;
  15. }
  16. &:after {
  17. content: "";
  18. display: block;
  19. border-top: 1px solid grey;
  20. }
  21. // 4. State classes with parent selector
  22. &.active {
  23. color: red;
  24. // 4.2. Pseuso selector in state class selector
  25. &:hover {
  26. color: darkred;
  27. }
  28. }
  29. // 5. Contextual media queries
  30. @media screen and (max-width: 640px) {
  31. display: block;
  32. font-size: 2em;
  33. }
  34. // 6. Sub selectors
  35. > .content > .title {
  36. font-size: 1.2em;
  37. // 6.5. Contextual media queries in sub selector
  38. @media screen and (max-width: 640px) {
  39. letter-spacing: 0.2em;
  40. text-transform: uppercase;
  41. }
  42. }
  43. }

Media媒体查询用法

1.什么是媒体查询  为什么要使用媒体查询 用它能做什么

根据客户端的戒指和屏幕大侠,提供不同的样式表或者只展示样式表中一部分 为了更好的展示页面效果针对不同设备

加载不同的样式表文件无需修改或者重新书写css源代码文件就可以展示出无bug的页面元素

  1. 媒体查询的介质类型和使用方法

1)、all - 全部媒体类型

Print - 提供给打印机的样式,最常用的类型

Screen - 彩色屏幕

Speech - 语音朗读

2)、内联的使用方法

媒体查询具有返回值 其值是Boolean类型 条件为真值可以进行操作 其值为假值时文件被下载但是不被操作

<style>

@media(max-width:600px){

.className{

ElementsAttr:value;

}

}

</style>

2)、外链引入link标签使用媒体查询

<link rel=’stylesheet’ media=’(max-width:value)’ href=’stylesheetFile.css’>

3)、设置meta标签使用媒体查询(css2写法)

<meta name=’viewport’content=”width=device-width,initial-scale=1,maximun-scale=1,minimum-scale=1,user-scalable=no”>

  1. Media  具有逻辑操作符功能

逻辑操作符  not、and、only可以用来构建复杂的媒体查询

and

操作符用来把多个媒体属性组合起来,合并到同一条媒体查询中。只有每个属性都为真值时才可以触发媒体查询,可用逗号分隔

eg1: @media tv and (min-width:700px){

媒体查询尽在电视媒体上,可视区域不小于700像素 时  才有效

}

eg2: @media(min-width:700px),handheld and (orientation:landscape){

媒体查询尽在电视媒体上,可视区域不小于700像素并且是横屏时才有效

}

not

关键字用来排除符合表达式的设备

Only

防止老舅的浏览器不支持带媒体属性的查询而应用到给定的样式

eg: <link rel=”stylesheet” media=”only screen and (color)” href=”stylesheetFile.css”/>

/**/

CSS样式表继承属性

Azimuth

Border-collapse

Border-spacing

Caption-side

Color

Cursor

Direction

elevation

时间: 2024-10-10 12:53:25

css代码优化篇的相关文章

CSS布局篇——固宽、变宽、固宽+变宽

学了前端挺久了,最近写一个项目测试系统,布局时发现自己对变宽+固宽的布局还没有完全掌握,所以在这里总结一下,以后需要的时候回头看看. 1.最简单的当然是一列或多列固宽 例如两列固宽: 1.设置一个外围div--container,是两列显示的总大小,可以是固定800px等值. 2.在container内分别设置两个div--side.content 根据需要设置像素,比如一个是300px,另一个是500px: 分别设置float:left; 2.两列变宽,同1,只不过将像素改为百分比,例如是一个

CSS代码优化(转载)

要点1:css代码优化作用与意义 1.减少占用网页字节.在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度:2.便于维护.简化和标准化css代码让css代码减少,便于日后维护:3.让自己写的css代码更加专业. 要点2:css优化方法-需要优化css代码的地方 1.缩写css代码.2.排列css代码.3.同属性提取共用css选择器.4.分离网页颜色和背景设置样式(较大站点需要注意).5.条理化css代码. 实例讲解以上几点div css优化方法 一.缩写css代码常用需要缩写 cs

「HTML+CSS」css升华篇

经验之谈: inline\inline-block\block元素 inline\inline-block文本类元素 凡是带有inline的元素都有文本类特点 诸如:->->->文本类元素有回车,空格 再如:-> -> 再如: 淘宝顶栏布局: inline-block 文本类元素,和里面的元素进行低对其 vertical 「HTML+CSS」css升华篇 原文地址:https://www.cnblogs.com/apelles/p/11634846.html

css基础篇(三)——布局(上)float和position

1.定位(position) position的值有:relative/absolute/fixed/static/inherit; static:为position属性的默认值,static元素会遵循正常的文档流,且会忽略top,bottom,left,right等属性; inherit:如同其他css的inherit值,即继承父元素的position值(ie不支持) 下面重点介绍前三个值: 1.1 相对定位(relative) 场景描述(如上图):第二个div的位置相对自己向下向右移动30p

新旅程CSS 基础篇分享一

在上一篇HTML完结篇中,已经给大家对CSS做了一个了解.本片博主将不再赘述,直接进入知识点,归纳总结: 一.CSS 三种书写的方式 嵌入式.外链式.行内式 嵌入式就是将CSS写入在<style></style> 外链式将外面的CSS文件通过HTML中的标记链接过来 <link  rel="stylesheet"  type="text/css"  href="外部CSS文件的地址" /> 行内式:就是将CSS

CSS总结篇—可爱的浮动

浮动       浮动是浏览器定位的一种方式,也是现在最常用的一种布局方式.通过两次的静态页面练习,加上查阅一些资料,对浮动进行了整理.总结了10种清除浮动的方式以及各自的优缺点.加深了对浮动的理解和认识. 一.浮动的特性 1.包裹性(BFC-块级元素上下文)2.破坏行(让父元素高度塌陷) 二.浮动产生的原因     一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了.                      

css基础篇(一)——浏览器加载和渲染网页

1.介绍 虽然这篇是css笔记,但是做为web开发,天天和浏览器打交道,有必要先理理我目前了解的浏览器加载和渲染页面的过程. 2.页面加载和渲染流程 如图:(该篇重点是css,所以该图重点说明css渲染) 1.重建DOM树:渲染引擎开始解析html文档,转换树中的标签到DOM节点 2.构建渲染树:解析css,根据css选择器找到节点的样式,创建另外一个树———渲染树 3.布局渲染树:从根节点开始,计算出每一个元素的大小和位置 4.绘制渲染树:遍历渲染树将每个节点都绘制出来 整个流程简易描述:用户

前端性能优化(css动画篇)

正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到了很多,在这里记录一下,其中的知识都是来源于这俩篇文章,我只是截取了其中比较关注的内容出来,原文地址High Performance Animations及Accelerated Rendering in Chrome 原理 现代浏览器在使用CSS3动画时,以下四种情形绘制的效率较高,分别是:* 改

CSS基础篇之背景、过渡动画

background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin:border-box|padding-box|content-box: border-box 这是用border-box时图片位于边框左上角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g