学习提高你CSS技术

首先让我提醒你，css是极其简单的一门语言，简单到可以用三个词概括：选择器，属性以及属性的值。这也是一些人不喜欢css的原因：他们觉得写css像孩子玩乐高玩具一样简单。

是这样的。。如果你给一个9岁的孩子介绍css的基本原理，他就会搭建一个网站。不过这个网站不会很复杂，也就是一些包含头部，链接，内容图片的页面而已。

事实上，css是一门简单的语言，并不意味着每个人的水平一样。有些人写起css来就跟个大猩猩在玩棍子，有些人可以掌握css,而有些人可以使用魔法般的使用css。

不管怎样，我还是要给你分享一些我这几个月来理解的东西，这并不是一些代码片段或者是css小技巧，而更像是一些通用的规则或者是最佳实践之类的东西，如下：

不要让你的代码脱离你的掌控，尽量简洁 掌握基础，学习CSS技巧 保持代码的可复用性 面向对象的css Css3 了解他能做的以及你可以使用的部分 渐进增强与优雅降级 Css预处理工具 与时俱进 取长补短 熟能生巧

你想说什么呢？你准备好了？那我们继续往下吧。 1.不要让你的代码脱离你的掌控，尽量简洁

别让你的代码脱离你的掌控

这是编程的一种通用建议，不仅仅适合css. 当你开始写代码的时候，先思考，思考以下几个问题：

我怎样实现？ 有其他方法实现么？ 怎样优化（简洁，可维护，等等）？

急于编码会浪费时间，你有可能花了一个小时也没实现，不得不从头再来，这不应该发生。

如果你花了好几个小时写一个css幻灯片，最终没办法用了个js幻灯片插件或者别的，这是很蛋疼的，并不是说你没成功，而是无谓的浪费了很多时间。如果项目有deadline的话，你就要悲剧了。

保持他的简单性

Css很简单，但如果你想，同样可以变得很复杂。在很多场景里，最简单的即是最好的。当你要实现什么效果的时候，问问自己：还有更简单的方法实现么？ 答案经常是肯定的。

举个例子，简单水平导航栏，你可以有多种方法实现：

列表元素浮动； 改变列表元素display属性为inline； 改变列表元素display属性为inline-block。

最简单的-设置display:inline，不需要清除浮动，不需要清除inline-block造成的空白，只需要一些padding即可，结束。 2. 掌握基础，学习CSS技巧

不仅是掌握css,掌握任何东西都要从基础做起。一个对最基本的东西都理解不透彻的人是不可能成为大师的。

CSS基础

什么是css基础呢？你可能会听到不同的声音，这也是一种无法用言语表达的东西。但我认为，css的基础是以下两部分：

盒模型：每个元素在css中都是一个盒子模型(块级或者内联)，包含宽高及各种padding margin border.这是最重要的,详细可以阅读这里。 权重:了解哪个属性权重最高，在调试css中非常重要。更多相关信息可以阅读Assigning property values, Cascading, and Inheritance一文。

CSS技巧

当你了解了以上原理，才算踏上了康庄大道。那么现在你可能会处理一些特殊情况，下面展示了一些：

忘了在父元素设置position

.child { position: absolute; top: 0; left: 0; }

/* 这是忘了的*/ /* .parent { position: relative; // Or anything else than static } */

这时候你会想：坑爹啊，怎么东西跑到页面左上角了？？？你忘了给父元素设置 position:absolute或relative了。。

添加下下层技巧

.parent { z-index: 1; opacity: 0.5; transform: rotate(5deg); }

.child { z-index: -1; }

每个搞前端的都被层叠上下文折磨过。这个例子告诉我们，你不能对一个已经触发层叠上下文的元素（可能是z-index,transform或者是透明度）的子元素来应用z-index属性。 这没有变通方案，一旦你遇到过，绝对会记忆犹新。。

忘了清除浮动的技巧

你的布局乱套了，容器乱飞。你泪流满面：这是肿摸了。。请检查下浮动，可能忘了清除浮动了。

记住，一个容器如果仅仅包含浮动元素，他会塌陷，除非你清除浮动或者设置height或者overflow属性。

这种例子比比皆是，如果继续写那就没完没了了，这不是我这篇文章的目的。

我只是想指出 每天，人们都会不断的发现，css有很多的特性跟特殊情况。 你可能这一次踩个坑，下次就知道怎么对付了。 3. 保持代码的可复用性

Dry代表 不要重复自己。这并不是css特有的，这适合任何语言。

它的核心思想是，能重用的代码就不要写第n遍。在别的语言意味着封装成function,在css里，常常代表你需要利用一个可复用的类来代替重复应用的一个属性。这将在后面的面向对象css中进一步讲解。其实对于重构来说这是很简单的，我来解释一下：

当你在你的样式表里发现一段代码多次使用的时候，你需要重构一下，最终变成只出现一次（可复用）。例子：

.navigation li { color: #333; }

.navigation li a { color: #333; }

/* Refactoring */

.navigation li, .navigation li a { color: #333; }

明白么？你肯定会纳闷，这俩有啥区别啊？有两点需要考虑： 性能跟可维护性。

关于性能： 更少的行数意味着浏览器解析css会更快。按照下面这样写，浏览器会同时给两个选择器应用颜色，而不会解析两次。

关于可维护性，如果你需要修改类似的颜色，这样只需要修改一行，这里可能仅仅是两行，如果50行，100行呢。

扩展阅读

DRY CSS, don’t repeat your CSS DRY CSS: a don’t-repeat-yourself methodology for creating efficient, unified and scalable style sheets

4. 面向对象的css

这是什么东东？

Oocss意思是面向对象的css，经常在其他面向对象的语言中出现这个名词。意思是利用一个“对象”，通常为一个类的实例（包含一些属性和方法）。你可能会问：这跟css有啥关系啊。

首先我要说明，oocss更像一个概念，css是不能真的“面向对象编程”的，因为没有命名空间，函数，方法，类，条件语句等。因此你要是谈oocss可能会被人嘲讽。

事实上我也是这么认为的，但我们可以利用这样的思想来促进css的书写，让网站性能提升，提高可维护性。

我们应该怎么做？

很简单，使用类名，各种类名。可以把你的网站想象成一个带有很多“方法”跟“组件”的地方，尝试找出这些重复的部分，把他们作为“对象”(类名)，从而重用。

为了让你的对象划分的更精确，有两点需要注意：

分离结构与表现 分离容器与内容

单独的结构和样式

分离结构与表现是很重要的，这样你就可以单独操作负责显示的部分，让这部分在网站中多次出现，并且作用于不同的元素上。看看下面的代码，它可以作用到一个盒子，一个图片，或者一个按钮上：

#my-button, .my-box .my-box img { border: 1px solid #444; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.1); }

另外我们可以用一个叫做.skin的类名代替，然后应用到所要使用的元素上

.skin { border: 1px solid #444; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.1); }

这样使用，会让css样式表更加容易让人理解，更容易维护，解析更快。

单独的容器（结构）和内容

我认为这是oocss最重要的一点：每种组件拥有独立的代码，而不是在你某次写页面时配合页面的特定部分来定义。在你的站点中，类似的组件应该重用，就像下面代码一样：

#main h2 { color: #343434; font-size: 25px; line-height: 20px; border-bottom: 1px solid rgba(0,0,0,0.2); box-shadow: 0 1px rgba(255,255,255,0.4); }

这时候不管是我从页面底部再次使用h2，或者我用同样的思想使用h3，都可以类似上面所写的，创建一个类，并给类设置样式，而不是给元素单独设置样式。

关于从不使用ID的一说？

当Nicole Sullivan提出oocss的概念时，最热烈的讨论是“绝对不使用id选择器么？” Nicholas C. Zakas 与 Nicole Sullivan在他们的csslint(css质量检查工具)中特别反对对id选择器的使用。

为了理解nicole的观点，我们必须认识到id选择器因为高权重会在使用中出现一些问题。如下代码（代码来自于这里）：

<!-- HTML --> <div id="header"> <p> <a href="#">Foo</a> <a href="#">Bar</a> </p> <div> <a href="#">Follow me on twitter</a> </div> </div> <div> <a href="#">Follow me on twitter</a> </div>

/* CSS */ #header a { color: #f90;  } .tweet     a { color: #000; }

如果让第一个twitter的链接变黑，你有两种选择：给一个id,或者利用！important选择器来机枪打蚊子。如果header是一个类名，就不会有这种问题了。

这也是Nicole Sullivan为什么讲“no ID”的原因。

我引用 harry roberts对此话题的一个讨论来作为这节结束

[...] I have decided that a blanket ban is sensible. Save yourself many potential headaches and never use IDs in your CSS files.

当然原则上id是可以使用的，而且很易生效

我对OOCSS的理解

事实上我并不熟悉oocss。因为我并不在一个拥有很多前端的的大型网站工作。Oocss对大型网站架构很有用，但不适合单页面作战。

然而虽然我并未应用oocss，但我关注前端工作中的组件重用，样式表的可维护性以及性能。这也是oocss所注重的，所以在某些方面，我的工作跟oocss并没有太大区别。

网站栏目：学习提高你CSS技术
本文来源：https://www.cdcxhl.com/news7/315907.html

成都网站建设公司_创新互联，为您提供移动网站建设、企业建站、自适应网站、、网站排名、外贸建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联