css代码优化

REM实战

2015/11/09 · CSS ·
rem

原文出处: 百码山庄   

前两天有个朋友问起关于rem的一些问题,让我有些在意。因为随着CSS3的逐渐成熟,在优雅降级/渐进增强原则的保障下,很多CSS新特性已经不在是试用特性,而是在Web设计中得到广泛推行和应用!而CSS3新增的单位rem也在其列,当朋友问起时,我才意识到自己对这个单位也并不是很了解,趁着周末有些闲暇时光,不妨给自己的大脑充充电。

 

好东西也有烦恼

至此,rem的优势不用再多说了,但是这么好的东西,我们在实际使用中却并非尽如人意:

图片 1

这是在caniuse上截下来的rem的兼容性情况,看到左上角那块耀眼的红色了么?在国内IE覆盖还非常广泛的情况下,这块红色带给开发者的痛是痛彻心扉的,但是作为开发者,作为用户体验的服务方,我们很多情况下没理由去放弃他们,那么怎么解决rem的兼容性问题呢?

其实,也不难!CSS中不可被识别的属性或值会被浏览器自动忽略,所以,当我们在使用rem的时候,只要再增加一个px单位的尺寸,那么就可以解决IE8及以下版本浏览器的兼容性问题:

CSS

html {font-size: 10px;} .article-title {font-size: 18px;font-size:
1.8rem;font-weight: normal;} .article-body {font-size: 14px;font-size:
1.4rem;margin: 10px 0;} .article-foot {font-size: 12px;font-size:
1.2rem;} @media all and(max-width: 480px) { html {font-size: 5px} }

1
2
3
4
5
6
7
html {font-size: 10px;}
.article-title {font-size: 18px;font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 14px;font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 12px;font-size: 1.2rem;}
@media all and(max-width: 480px) {
    html {font-size: 5px}
}

 

尽可能的精确

很多前端开发人员写选择器链的时候不使用
直接子选择器(注:直接子选择器和后代选择器的区别)。
有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
然而,在任何情况下,这是一个非常不好的做法。
如果你不写很通用的,需要匹配到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>
    1. <p>This is a news article content</p>
    1. <div class=”teaser”>
  7. <div class=”title”>Buy this</div>
  8. <div class=”teaser-content”>Yey!</div>
  9. </div>
  10. </div>
  11. </article>

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

不推荐

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

推荐

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

总结

rem是一个非常有用的单位,在网页设计中常常可以带来事半功倍的效果,但是并不意味着rem可以替代所有的单位,有时候结合使用,相互配合,反而会达到意想不到的效果。然而,新东西的出现虽然总能让人耳目一新,但是却也常常会伴随着很多让人苦恼的坑,还需要我们慢慢去雕琢,慢慢去完善。

1 赞 3 收藏
评论

图片 2

嵌套顺序和父级选择器(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;
    1. color: grey;
    1. // 2. Pseudo selectors with parent selector
  5. &:hover {
  6. color: black;
  7. }
    1. // 3. Pseudo elements with parent selector
  8. &:before {
  9. content: “”;
  10. display: block;
  11. border-top: 1px solid grey;
  12. }
    1. &:after {
  13. content: “”;
  14. display: block;
  15. border-top: 1px solid grey;
  16. }
    1. // 4. State classes with parent selector
  17. &.active {
    1. color: red;
    1. // 4.2. Pseuso selector in state class selector
  18. &:hover {
  19. color: darkred;
  20. }
  21. }
    1. // 5. Contextual media queries
  22. @media screen and (max-width: 640px) {
  23. display: block;
  24. font-size: 2em;
  25. }
    1. // 6. Sub selectors
  26. > .content > .title {
  27. font-size: 1.2em;
    1. // 6.5. Contextual media queries in sub selector
  28. @media screen and (max-width: 640px) {
  29. letter-spacing: 0.2em;
  30. text-transform: uppercase;
  31. }
  32. }
  33. }

 

 

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

rem的优势

我们从上面的代码中可以发现,在使用rem的时候,我们给标题、内容、尾部设置字体的时候使用的是一个小数,而最终我们在浏览器中看到的却是我们需要的18px、14px和12px,结合定义部分提到的rem是相对于根(html)元素计算的,那么就好理解了,以标题为例:
10px * 1.8 = 18px 
。所以,rem的优势便不言而喻了,可以通过修改html元素的font-size直接控制整个网站的字体乃至其他尺寸属性的值的大小(诸如:margin,padding等)。

那么,有人可能会问:我的网页放在那里显示得好好的,我没事改什么字体大小,调什么间距?即便久了我想换换风格,那也可能改改颜色,换换布局,跟这尺寸单位压根儿没多大关系吧?

其实并不是这样的,我来给大家说两个情况。

第一,我们做网页,要考虑到访问我们网页的各个群体。要考虑视力好的,也要考虑视力差的;要考虑喜欢看大字多翻页的,也要考虑看小字多显示内容的。所以当有一天我们的网页需要增加一个点击按钮切换大、正常、小甚至更多字号的时候,你就会意识到rem是多么的让你感动了。还是以上面的场景为例,我们假设通过在html标签上增加class来切换字体。

先看px的:

CSS

.article-title {font-size: 18px;font-weight: normal;} .article-body
{font-size: 14px;margin: 10px 0;} .article-foot {font-size: 12px;} /*
大字号 */ html.big .article-title {font-size: 27px;} html.big
.article-body {font-size: 21px;} html.big .article-foot {font-size:
18px;} /* 小字号 */ html.small .article-title {font-size: 14.4px;}
…此处省略几行

1
2
3
4
5
6
7
8
9
10
.article-title {font-size: 18px;font-weight: normal;}
.article-body {font-size: 14px;margin: 10px 0;}
.article-foot {font-size: 12px;}
/* 大字号 */
html.big .article-title {font-size: 27px;}
html.big .article-body {font-size: 21px;}
html.big .article-foot {font-size: 18px;}
/* 小字号 */
html.small .article-title {font-size: 14.4px;}
…此处省略几行

再看看使用rem的:

CSS

html {font-size: 10px;} .article-title {font-size: 1.8rem;font-weight:
normal;} .article-body {font-size: 1.4rem;margin: 10px 0;} .article-foot
{font-size: 1.2rem;} /* 大字号 */ html.big {font-size: 15px;} /*
小字号 */ html.small {font-size: 8px;}

1
2
3
4
5
6
7
8
html {font-size: 10px;}
.article-title {font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 1.2rem;}
/* 大字号 */
html.big {font-size: 15px;}
/* 小字号 */
html.small {font-size: 8px;}

 

其优势,就不用我再多说了吧?

第二,在移动智能设备剧增,响应式网页设计如此火热的时代,我们在设计网页的时候,怎能不考虑移动设备,怎能不考虑移动设备高清屏?!通常移动设备的显示区域比起传统PC电脑已经少了很多很多,如何能在更小的区域显示更多的内容,一直是设备产商和开发者们努力的方向。高清屏的出现很大程度上解决了这个问题,有了高清屏就意味着在传统PC上的字号即便缩小一半,放到高清屏上仍然能够保证清晰可识别,不影响阅读,也不会导致信息丢失。所以,现在网页设计的时候通常会考虑在PC和Mobile中使用不同的字号等样式,那么问题来了,还是像第一个问题一样,在媒体查询中一个一个字号去覆盖吗?这显然是不科学的做法,虽然能达到我们想要的效果,但是成本是相当高的,而且费力不讨好。还是以上面的场景为例。

还是先看px的:

CSS

.article-title {font-size: 18px;font-weight: normal;} .article-body
{font-size: 14px;margin: 10px 0;} .article-foot {font-size: 12px;}
@media all and(max-width: 480px) { .article-title {font-size: 9px;}
.article-body {font-size: 7px;} .article-foot {font-size: 6px;} }

1
2
3
4
5
6
7
8
.article-title {font-size: 18px;font-weight: normal;}
.article-body {font-size: 14px;margin: 10px 0;}
.article-foot {font-size: 12px;}
@media all and(max-width: 480px) {
    .article-title {font-size: 9px;}
    .article-body {font-size: 7px;}
    .article-foot {font-size: 6px;}
}

再看rem版本的:

CSS

html {font-size: 10px;} .article-title {font-size: 1.8rem;font-weight:
normal;} .article-body {font-size: 1.4rem;margin: 10px 0;} .article-foot
{font-size: 1.2rem;} @media all and(max-width: 480px) { html {font-size:
5px} }

1
2
3
4
5
6
7
html {font-size: 10px;}
.article-title {font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 1.2rem;}
@media all and(max-width: 480px) {
    html {font-size: 5px}
}

 

好了,不举其他的了,相信肯定还有更多的应用场景,但是这两个需求已经有足够的理由让我们去学习和尝试使用rem了。

代码演示如下:

px VS rem

首先是使用px实现:

CSS

.article-title {font-size: 18px;font-weight: normal;} .article-body
{font-size: 14px;margin: 10px 0;} .article-foot {font-size: 12px;}

1
2
3
.article-title {font-size: 18px;font-weight: normal;}
.article-body {font-size: 14px;margin: 10px 0;}
.article-foot {font-size: 12px;}

然后,我们看看rem版本:

CSS

html {font-size: 10px;} .article-title {font-size: 1.8rem;font-weight:
normal;} .article-body {font-size: 1.4rem;margin: 10px 0;} .article-foot
{font-size: 1.2rem;}

1
2
3
4
html {font-size: 10px;}
.article-title {font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 1.2rem;}

为了验证rem单位最终在浏览器上显示的字体大小确实是预设的18px,14px和12px,我使用Chrome调试工具在Elements面板的Computed面板查看了结果:

图片 3

好了,说明rem最终实现的效果确实可以达到和直接使用px一样的结果。但是单从上面的代码来看,我们发现使用rem其实比使用px需要更多的代码,而且也并没有发现其他什么优势,那么CSS3为什么会增加这个单位呢?

 

定义

Equal to the computed value of font-size on the root element.
(W3C)

直译是“与根元素的字体大小相等”,当然也有一种更直接的理解 root em 。我们知道在HTML中根元素其实也就是 <html> 元素,所以rem单位其实是相对于 <html> 元素的字体大小而言的。

 

场景

为了方便说明rem单位的功效,我们先来构造一个很常用的页面结构,然后分别使用px和rem在对比实现。通常我们在制作博文阅读页面的时候都会先将博文的标题(h2.article-title)显示,然后后面紧跟丰富的博文内容(div.article-body),最后可能还会在博文的尾部(div.article-foot)显示作者或发布时间等等。而为了让文章的结构更为清晰,我们一般会将文章的标题放大突出显示,而结尾可能也会做缩小弱化处理,大致结构如下:

<div class=”article”> <h2
class=”article-title”>这是文章的标题</h2> <div
class=”article-body”>
我通常把文章内容放置在这里。<br>这样看起来比较舒服。 </div>
<div class=”article-foot”>
发布人:MrZheng 发布时间:2015/11/08 </div> </div>

1
2
3
4
5
6
7
8
9
<div class="article">
    <h2 class="article-title">这是文章的标题</h2>
    <div class="article-body">
        我通常把文章内容放置在这里。<br>这样看起来比较舒服。
    </div>
    <div class="article-foot">
        发布人:MrZheng&nbsp;发布时间:2015/11/08
    </div>
</div>

我们可能希望在页面上显示的效果是这样的:

图片 4

我们这里不去关心布局,只看字号:标题18px,内容14px,尾部12px。接下来我们来看看如何分别使用px和rem来实现预览样式。

 

缩写属性

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;

选择器和声明分离

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

不推荐

  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. }

Hacks

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

十六进制表示法

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

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

不推荐

  1. color: #FF33AA;

推荐

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

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. }

 

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

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

选择器嵌套 (SCSS)

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

不推荐

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

不推荐

  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;
    1. > .news-article {
  5. > .title {
  6. font-size: 1.2em;
  7. }
  8. }
  9. }

推荐

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

 

ID 和 Class(类) 名的分隔符

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

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

不推荐

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

推荐

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

声明结束

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

不推荐

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

推荐

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

上下文媒体查询(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)
    1. .content-page {
  4. font-size: 1.2rem;
    1. > .main {
      1. > .latest-news {
  5. padding: 1rem;
    1. > .news-article {
  6. padding: 1rem;
    1. > .title {
  7. font-size: 2rem;
  8. }
  9. }
  10. }
    1. > .content {
  11. margin-top: 2rem;
  12. padding: 1rem;
  13. }
  14. }
    1. > .page-footer {
  15. margin-top: 2rem;
  16. font-size: 1rem;
  17. }
  18. }
    1. @media screen and (min-width: 641px) {
  19. .content-page {
  20. font-size: 1rem;
    1. > .main > .latest-news > .news-article > .title {
  21. font-size: 3rem;
  22. }
    1. > .page-footer {
  23. font-size: 0.8rem;
  24. }
  25. }
  26. }

推荐

  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.
    1. .content-page {
  3. font-size: 1.2rem;
    1. @media screen and (min-width: 641px) {
  4. font-size: 1rem;
  5. }
    1. > .main {
      1. > .latest-news {
  6. padding: 1rem;
    1. > .news-article {
  7. padding: 1rem;
    1. > .title {
  8. font-size: 2rem;
    1. @media screen and (min-width: 641px) {
  9. font-size: 3rem;
  10. }
  11. }
  12. }
  13. }
    1. > .content {
  14. margin-top: 2rem;
  15. padding: 1rem;
  16. }
  17. }
    1. > .page-footer {
  18. margin-top: 2rem;
  19. font-size: 1rem;
    1. @media screen and (min-width: 641px) {
  20. font-size: 0.8rem;
  21. }
  22. }
  23. }

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注