翻译自:How to Develop with CSS

很多web开发人员都知道CSS,但是他们很可能认为使用CSS的应用代码就是这样的:

<p>
<span style="font-weight:bold;font-family:Arial">Welcome!</span>
</p>

或者是这样的:

<table class="middle grey"><tr>
<td class="darkTopHeader">Item #</td>
<td class="darkTopHeader">Qty</td>
<td class="darkTopHeader">Cost</td>
</tr><tr>
<td class="rowHeaderDrk">1341</td>
<td class="cellFieldDrk">3</td>
<td class="cellFieldDrk">$15</td>
</tr><tr>
<td class="rowHeaderLt">1913</td>
<td class="cellFieldLt">2</td>
<td class="cellFieldLt">$17</td>
</tr><tr>
<td class="rowHeaderDrk">1231</td>
<td class="cellFieldDrk">1</td>
<td class="cellFieldDrk">$5</td>
</tr></table>

然而,上面的代码不过是“技术上”的CSS,如果仅是这么使用CSS,那么就失去了相当多的用好的机会。(如果上面的代码对你而言是ok的,那么请继续阅读下去,看看怎么能让你写代码更容易,写出的代码更优秀)

这篇文章是关于什么的

本文不依赖于高级的CSS3选择器(selector,或者不标准或者在写作本文时还不被所有浏览器很好地支持)。本文也不讨论高级CSS2选择器,那些已经标准化了但是有时也不被主流浏览器支持的selector。

本文不是关于如何格式化你的CSS或者HTML的参考手册,也不试图告诉你怎样用CSS实现切边布局。(关于布局的例子请参考Glish或者css/edge

本文假定你了解基本的CSS1(什么是选择器,什么是复合选择与后代选择,值如何传递,等等),并提供一系列的指导帮你更恰当地使用CSS进行开发。

内容

1. 让你的站点更容易开发
        1.1 格式与内容分离
        1.2 使用语义(semantic)选择器

2. 尽可能减少HTML标签
       2.1 语义(semantic)HTML
       2.2 上下文选择器

3. 尽可能减少CSS
        3.1 合理利用格式继承
        3.2 合并逻辑相关的格式
        3.3 页面间格式重用

4. 锦囊
        4.1 用em或者%指定font-size
        4.2 用em指定距离
        4.3 不要再使用切片的GIF图
        4.4 把CSS放在单独的文件中
        4.5 IDs必须唯一
        4.6 <br>标签不是你的朋友
        4.7 不要用table进行布局

让你的站点更容易开发

格式与内容分离

CSS的一大好处就是,它能让你编辑一小处就可以改变web页面多处内容的显示方式,或者不用更改每个页面就可以改变全站的格式。把格式代码放在HTML页面里的方式是在绝大多数情况下应当避免的,因为他们总是会覆盖样式表中定义的格式,这样你就需要去直接修改HTML页面的代码来达到目的。

<p style="margin-top:1em">
CSS applied through the style tag
should be strongly avoided
</p>
<style type="text/css">
p.introParagraph { margin-top:1em }
</style>
...
<p class="introParagraph">
When it must be applied directly, style should
be specified through class or id attributes
</p>

如果你不是特意要通过style=”…”指定布局,请考虑是不是有一种更好的方式可以把style抽象成一个selector。

(内嵌的style在测试布局的时候是非常有用的……比如把style=”border:1px solid red”放在一个特定元素上以在页面上高亮显示它所在的位置)

使用语义(semantic)选择器

“语义”的大致的意思是“传达的含义和信息”。

在上面的例子中,初学者可能会取像spaceAbove这样的class名字。这样的对内嵌style的替换方式,实际上起不到内容和显示分离的效果。

试想,如果有开发人员已经这么做了。但是他之后觉得段落的第一行不应该往下,而应该缩进并用斜体表示,所以把CSS改成这样:

<style type="text/css">
p.spaceAbove { margin-left:2em; font-style:italic }
</style>
...
<p class="spaceAbove">
This paragraph doesn't actually have any
space above it at all...but it is italic
and indented!
</p>

这就会导致class名字令人费解——名字是这样,实际是另外的情况——并且无法提供文档应该用那个class的信息。

不要基于你假定的显示方式来命名一个class。总是用class名来指代内容(译者注:比如 class的名字取为buttonSubmit,来表示Submit按钮的style)。

尽可能减少HTML标签

代码越多,要维护的代码也就越多。下面介绍的方式会帮你减少添加style所需的工作。

未完待续。For more please go to : http://phrogz.net/CSS/HowToDevelopWithCSS.html

如何用CSS进行开发的更多相关文章

  1. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

  2. 如何用CSS实现在新窗口打开链接?

    *如何用CSS实现在新窗口打开链接? <style type="text/css"> <!-- .target2 a:active {test:expressio ...

  3. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. 一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标

    一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标 ,如下图 可以使用  background background:url(images/xx.png) 40px 10px n ...

  5. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  6. 如何用css实现一个三角形?

    昨天被人问到说如何用css实现一个三角形?em....  当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:

  7. HTML+CSS网站开发兵书

    <HTML+CSS网站开发兵书> 基本信息 作者: 高洪涛 丛书名: 程序员藏经阁 出版社:电子工业出版社 ISBN:9787121212369 上架时间:2013-8-26 出版日期:2 ...

  8. css重修之书(一):如何用css制作比1px更细的边框

    如何用css制作比1px更细的边框 在项目的开发过程中,我们常常会使用到border:1px solid xxx,来对元素添加边框: 可是1px的border看起来还是粗了一些粗,不美观,那么有什么方 ...

  9. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

随机推荐

  1. MyBatis绑定错误[Invalid bound statement (not found)]

    如果出现: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 一般的原因是Mapper i ...

  2. c#无限级分类

    data: [ { text: '节点1', icon: myaccount, children: [ { text: '节点1.1', icon: archives }, { text: '节点1. ...

  3. Mysql游标的简明写法

    -- cursor 游标/*declare 声明; declare 游标名 cursor for select_statement;open 找开; open 游标名fetch 取值; fetch 游 ...

  4. mac 下使用wireshark监听网络上的数据

    分三个步骤:    1.wireshark安装        wireshark运行需要mac上安装X11,mac 10.8的系统上默认是没有X11的.先去http://xquartz.macosfo ...

  5. [JS]学习Javascript闭包(Closure)

    转自:阮一峰 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于Javascript初学者应该是很有用的. 一.变量的 ...

  6. PLSQL_基础系列11_递归和层次查询CONNECT BY(案例)

    2015-05-31 Created By BaoXinjian

  7. 【转】C++ 单例模式

    http://blog.csdn.net/hackbuteer1/article/details/7460019 单例的一般实现比较简单,下面是代码和UML图.由于构造函数是私有的,因此无法通过构造函 ...

  8. keil逻辑分析仪的使用:

    http://blog.sina.com.cn/s/blog_4e0175750101kt13.html

  9. 如何动态添加和删除一个div

    代码实例如下: <!DOCTYPE html><html><head><meta charset="utf-8"><meta ...

  10. jQuery如何动态添加具有删除按钮的行

    代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...