CSS架构:最新最佳实践(摘录)

文章目录

使用Normalize.css重置默认样式

大多数人推荐使用normalize.css重置默认样式,而不是使用由Eric Meyer写的非常流行的CSS Reset或者自己写的Reset。Normalize.css给所有浏览器的元素设置了一个共同的样式,而不是重置了这些元素的基本样式。可以参考github上normlize.css项目,它具有以下优点,不仅仅是CSS样式重置:

使用clear fix清除浮动

.cf:before,.cf:after{content:"";display:table}
.cf:after{clear:both}
.cf{*zoom:1}

空div

说道不正确的使用空div,你应该停止使用作为页面的分隔符的、带有clear和边框的空<div>。

<div class="divider"></div>
...
div.divider {
  border-top: 1px solid #ABAA9A;
  clear: both;
}

是的,你知道这段代码作为清晰的可视化的页面分隔符确实不错,但是它缺少语义。 OOCSS创始人、CSS大师Nicole Sullivan建议使用<hr>元素分割页面不同的部分,并且给<hr>元素加上一些必要的样式。

所以你应该使用下面的代码,而不是前面提到的:

<hr class="divider">
...
.divider {
  border-top: 1px solid #ABAA9A;
  clear: both;
}

图片替代文字

使用图片代替文字的CSS技术在前端开发有着悠久辉煌的历史。在2012年3月,Jeffrey Zeldman引进了一个新的技巧,称为 Kellum方法。不是使用-9999px hack使文本超出屏幕达到隐藏文本的目的,他的技术在隐藏文本的同时保留了文本在屏幕范围之内。

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

这种方法提高了性能,特别在平板电脑和更小的屏幕设备上更显著。

使用图标元素

在你的页面里,你可能会使用<span></span>作为一种放置图标的方式,就像这样:

<li>
  <span></span>
  <span id="favorite-insert-point"></span>
</li>

如果是这样,看看这样是不是好点:图标应该使用一个图标(icon)元素,可以使用<i>标签。随着在Twitter Bootstrap中使用,这个方法已经越来越流行了。

<p><i class="icon icon-comment"></i>23 comments</p>
...
.icon { background-image: url( sprites.png ); }
.icon-comments { background-position: 0 -30px; }

使用<i>标签比使用标准的<span>标签更有语义,并且可以容易的找到页面中图标的位置。

使用css3

网站经常在一些元素上使用图片,但这并不是必须的,这样使页面图片变得臃肿。使用CSS3可以极大的有助于消除这些图片,同时为网站转向响应式设计做好准备。对大多数网站来说,任何圆角、阴影、文字阴影、渐变和box-sizing的实例都是CSS3的一个福音。

但是,CSS3有两个消极点:首先,CSS3规范的很多部分没有确定,因此现代浏览器对CSS3的属性需要加上浏览器前缀。其次,CSS3不被流行的旧浏览器支持,这样的话就需要可靠的机制或者辅助脚本。

CSS3兼容性

很不幸,旧版本的IE和CSS3存在最大兼容性问题。当前,CSS3只有部分属性被IE9支持(最明显的就是CSS3选择器,可以查看HTML5和CSS3支持,获取最新的支持列表),IE6到IE8完全不支持。如果你打算使用任何CSS3属性,对使用IE9,IE8或者更低版本的用户来说,我推荐安装合适的可靠的处理机制。

很幸运,有一些脚本可以使用,达到效果。以下这些脚本有助于CSS3在IE里得到支持。

这些脚本不好的一面就是会增加页面的大小和加载事件,但是这个代价是值得的。

CSS3工具

CSS3概述和哪些属性可以放心的使用可能是另一篇文章要谈论的。使用CSS3最重要的步骤之一是要紧跟最新规范和浏览器实现规范的变化。跟踪这些变化可能有点痛苦,所以我建议使用http://css3please.com/http://html5please.com网站了解最新的语法变化和浏览器支持情况。对大多数的属性,CSS3, Please!是个超级棒的网站资源。对于渐变,Ultimate CSS Gradient Generator是一个非常不错的工具,它可以生成合适的、具有良好支持的渐变代码。

如果你自己特别懒,不想记住怎么写浏览器前缀,Prefixr会帮你在代码里添加的。你也可以使用由Lea Verou写的prefix-free,在服务器上上传了这个脚本后,就会在你的代码里添加所有的前缀。

制定网格

如果你的网站目前还没有建立一个网格系统,从此你必须敦促自己建立一个。如果你的代码有大量width、margin、padding的实例,并且相同大小的元素间不在相同的尺寸内,那么你的网站早就需要一个网格系统了。

你可以使用你自己的元素尺寸建立一个网格系统,或者你也可以使用一个CSS网格框架(很多CSS网格框架,使用任何一种都行,甚至可以使用一个响应式的框架)。

使用Box-sizing

如果你自己制作属于自己的网格系统,一个非常有用的CSS属性是box-sizing。Box-sizing可以改变浏览器计算一个盒元素尺寸的方式,这是专门用来处理尺寸大小的,特别是布局和网格。

Box-sizing是参照众所周知的“IE盒模型“来计算元素盒子的尺寸的,IE盒模型认为盒子的尺寸包括padding值。那就意味着当元素同 时定义了width和padding时,盒子的宽度应该等于width值,而不是width加padding的值。如下图所示:

CSS架构:最新最佳实践

上图是W3C盒模型和IE盒模型对比

使用box-sizing:border-box(根据W3C盒模型,默认的是box-sizing:content-box)使计算布局更容易,从中可以得到真正的恩惠。Box-sizing属性也需要加上前缀。

制作流体网格和图片

建立网格的最后一个方面(如果你提前想到了未来友好的设计)就是将固定的像素网格转换成百分比(或者em)。决定百分比大小的最好方式是采用Ethan Marcotte的响应式网站设计黄金法则:target=content/context。很感激,有计算器可以帮计算RWD网格的尺寸。我推荐一个工具RWD Calculator

对友好设计同样重要的是使图像自适应容器的大小。实现的主要方法是下面一行简单的代码:

img {
max-width: 100%;
height: auto;
}

这样,图像在流式容器里就不会超出或缩小。

别忘了HTML5

最后,总得来说HTML5对所有网站升级是绝对重要的。问题的关键不再是一个网站决定实现HTML5,而是何时能实现。我觉的HTML5有几个方面 对任何使用的人都有用,在一定程度上奠定了响应式设计的基础,但是,最容易开始的地方就是使用HTML5 文档声明。作为指明文档规范的指令,HTML5 doctype可以快速改变页面模板和实现文档重构。

<!DOCTYPE html>

在你的文档里不需要改变什么,因为Doctype是向后兼容的,如果使用了任何HTML5标签,他们也会起作用的。

说道标签,使用HTML5的另一个方面就是使用一些新的标签,在为创建代码模块设置一个良好基础的时候有助于页面语义化。但是在使用CSS3时,落 后浏览器的兼容性就需要认真的考虑。为了支持新标签识别,可以在旧浏览器里的页面上加上脚本,这样能够使旧浏览器正确的呈现元素。

最常用的脚本就是HTML5 Shiv,可以使HTML5元素在IE6~IE8被识别。唯一的缺点就是页面要多加载一个脚本文件。但是,说真的,为了迫不及待的使用HTML5,这点牺牲也是值的

 

原文链接:CSS架构:最新最佳实践(摘录) 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/348.html)

发表评论

请登录后发表评论: