如何高效的编写CSS和优化CSS

如何高效的编写CSS和优化CSS

我觉得编写CSS就如同写代码。你同样需要组织模式,定义不同板块和关系。所以我认为CSS管理非常重要。应用程序的每一部分应该有对应的模式,并很好的独 立。不同的内容存储在不同的文件夹可以有效的管理,但同样也存在问题。使用@import状态这种方法不好用,因为每用一个@import都意味着一个新 的请求发送到服务器。如果你有20个不同的.css文件,就相当于浏览器要发送20个请求。浏览器在渲染/下载所有内容之前不会显示页面。如果你 的.css文件丢失了或者太大,浏览器加载页面的时间就会大大延长。

CSS预处理器 

首先我们来简单介绍下什么是 CSS 预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处。目前使用最为普遍的三款 CSS 预处理器框架,分别是 SassLess Stylus

如果我们需要在CSS中相同的 parent 引用多个元素,这将是非常乏味的,你需要一遍又一遍地写 parent。我们接下来看下平常为什么写的CSS代码:

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

如果用 CSS 预处理器,就可以少些很多单词,而且父子节点关系一目了然。我们这里提到的三个 CSS 框架都是允许嵌套语法:

section {
  margin: 10px;
  nav {
    height: 25px;
    a {
      color: #0982C1; 
      section nav a:hover {
          text-decoration: underline;
      }
    }
  }
}


上面这段代码实际上最终生成的代码结果是:

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}


更多的相关介绍,请到 Sass Less Stylus 查看。

CSS选择器

        通常情况下,大多数开发人员没有考虑过CSS效率问题。CSS的效率反映在页面渲染上,如果模式低效,应用程序在浏览器上运行就会很慢。身为一名出色的前端开发工程师我想你可能会对自己写的CSS很有自信。


        但是其实你真的了解CSS吗?CSS的选择器是从左到右还选择的吗?如果你觉得是,那你就错了,其实我以前也是一直都觉得CSS选择器是从左到右的,后面才发现自己错了,CSS选择器其实是从右到左查询的,好了我们来看下下面的代码:

body ul li a {  
    color: #F000;  
    text-decoration: none;  
}

        应该有很多人在工作中会频繁的用到上面的写法,其实上面的写法一点效率都没有,这是因为该引擎首先识别所有的标签,评估每个母元素,最终收集到所需模式。你要知道,为了提高效率,选择器有个 先后排序:ID、类、标签及其一般。这意味着一个带有id的元素集比只带有标签选择器的元素更快的被渲染。当然,在所有DOM树元素都加上id是没有意义 的,但你应该特定检查代码,把可能加id的地方都加上。比如你可以按照以下方式做: 

#navigation {  
    background: #ff0232;  
}


还有以下几点需要重点记住:

    1、使用class替换层级关系

.list_box ul li a{
    display:block
}

 优化后的写法

.bl{
    display:block;
}


 2、尽可能减少CSS层级关系

#content p .list{
    width:100px;
    height:100px;
}

 优化后的写法

.list{
    width:100px;
    height:100px;
}


3、不要在class或者ID选择器前面添加tag选择器

span.role{
    color:#000;
}
div#col{
    width:30%;
}

 优化后的写法

.role{
    color:#000;
}
#col{
    width:30%;
}



 严格控制CSS文件大小 

正如我们上面所说的,CSS代码越少越好,因为浏览器在加载完CSS前是不不渲染页面,下面我展示几个小技巧给大家,请看下这段代码:

.nav {  
    color:#ccc;
    font-weight:bold;
}  
.footer {  
    color:#ccc;
    font-weight:bold; 
}

优化后的代码

.nav, .footer {  
    color:#ccc;
    font-weight:bold;  
}


缩写代码例子

.content{
    background-color: #999999;  
    background-image: url(../images/bg.png);  
    background-position: top right;  
}

优化后的代码

.content {  
    background: #999 url(../images/bg.png) top right;  
}



参考文章:

mozilla firefox:https://developer.mozilla.org/en/Writing_Efficient_CSS



如何高效的优化自己的CSS和编写CSS,我相信大家都有各自的心得,上面是我平时总结的经验,如果有什么写的不对的,希望能留言指出,谢谢!

转载请注明来自 520UED http://www.520ued.com/article/5387fffcb992a7c43f5c2034

comments powered by Disqus