表达它

再骑自行车是Buzzword的，并在web开发中，这意味着没有什么不同。 它节省能源，努力！

编写CSS和从设计创建HTML多年，我都遵循一些最佳实践，我们俗称为“重新发明轮子”的长期保存的时间和精力追求 一次又一次，我告诉自己，我必须创建一些模板，一些标准的可重复使用的CSS，我会用我今后的工作中的开箱。 虽然不是完全，但我还是设法实现一些目标。

在推进，再利用CSS的，我看比我自己，在为数不多的CSS框架，通常是提供给我们，并决定把他们使用，因为这些尝试和测试，并创建由许多经验丰富的开发。 更重要的是“避免重新发明”。

虽然退伍军​​人的常识，我已经尝试钢笔的一些关键概念/最佳做法/已进入了这些框架的建立，使尽可能循环再用CSS的想法。 希望这将有助于一些CSS开发只是最近登上了CSS的行列！

键重新CSS的循环：

使用命名约定

这是最重要的因素，在可重复使用的CSS / HTML。 给予一致的名称，页面元素，使很少或修改页面组件和他们的风格与再利用。 按照这种说法，即使HTML5的，比其前任的重大变化而变化，是引进一些结构性的标签，即。 <article>，的<section>，的<Header>，<aside>，<nav> 的HTML5将带来什么？ ]。 甚至与HTML 4（或更低），它是最好的，就像在下面简单的例子consistanly命名您的网页的标准部分...

请记住，你的项目大多数网页，最终具有相同的核心结构元素。 确定这些共同的核心页面元素....

  <div id="container">
    <div id="header"> ... </ DIV>
    <div id="nav"> ... </ DIV>
    <div id="sidebar"> ... </ DIV>
    <div id="footer"> ... </ DIV>
   </ DIV> 

重置默认样式（CSS的重置）：无论您使用的框架或自己写的，你必须提供的CSS重置[ 什么是CSS重置？ ]，因为它们减少或有时消除各种浏览器之间发生的视觉不一致。 在简单的话，CSS复位机制设置为零或空值的HTML元素的样式，因此重写他们可能带来的任何浏览器的默认值。 这提供了一个干净的石板，设置这些元素的任何默认的User-Agent无效[ CSS2.1的用户代理样式表默认的属性]。 所有的CSS框架的复位机制。 如果你正在写你自己的CSS重置的忠告是，如果你碰巧忘记重置键属性，它可能会导致跨浏览器问题，是非常难以调试。 记住，保持复位样式的副本，他们拖放到你创建的每一个新项目。

 身体，DIV，DL，DT，DD，UL，OL，李，
  H1，H2，H3，H4，H5，H6，
 前，表格，字段集，输入，选择，textarea的，
  P，BLOCKQUOTE，表，TH，TD
  {
   边框：0px;
   保证金：0;
   填充：0;
  } 

设置默认值（基准样式）元素：

当您设置（零或空）某些HTML元素的某些属性的默认值，它是要运用这些元素在每一个实例的一些风格。 这些默认设置可能会有所不同，按设计或根据你遵循的最佳做法。

最CSS框架，介绍了一些新的默认设置，除了重置浏览器默认风格。
这些默认值是无效的默认用户代理（离剥离的CSS复位），这些都将是跨浏览器保持一致。

记住，基准样式用于设置将会被用来设计样式。 例如。

  HTML字体大小：77％;字体家庭：宋体，无衬线;}
强，H1，H2，H3，H4，H5，H6 {字体重量：大胆;}， 

常见的HTML组件和公共类的抽象风格：

几页组成的大多数项目将整个网站使用常见的HTML元素，例如一些排序形式，警报和错误，自定义弹出窗口，灯箱等，由于这些组件再次使用，整个项目，这将是有益的提供设置预定义的样式与这些组件相关的类，你可以自己节省了很多时间。

除了常见的HTML组件的定义可重复使用的样式定义，我们可以排版，颜色，甚至布局类的抽象风格有关。 我倾向于使用...像Clearfix，Font08，FontGrey，AlignL，DisplayB等常见的类

 表单输入{边框：0px;背景：＃FFFFFF;填充：0px 10px; _padding：0px 0px;高度：26px;颜色：＃000000;线高度：30像素字体大小：1.1em;}
表单的TEXTAREA {边框：0px;背景：＃FFFFFF颜色：＃000000;字体大小：.9 EM;线高度：1.5em;溢出：可见;}
 ，fbold {字体重量：大胆;颜色：＃CCCCCC;}
 fgrey {颜色：＃666666;}
 flightgrey {颜色：＃BBBBBB;}
 clearfix {明确：既;}
分频器{边界：1px固体＃647B06;边境底：1px固体＃9CC00A;高度：0px;}
 。displayb。displayn {显示：块;} {显示：无;}
 alignr {文本对齐：右}。alignc {文本对齐：中心}
 {浮动：权利;}。floatr。floatl {浮动：左;} 

修复常见的浏览器怪癖

各种浏览器实现的CSS代码和CSS规范的支持，提供不同的级别。 这样做的结果.... “浏览器怪癖”，我们开发人员留下来处理。 尤其是，IE6的困扰的最后期限，以满足大多数CSS编码。 好消息是经验已经聚集了可能出现的可重复使用的修复这些问题（通常被称为CSS的黑客 ）。

请记住，保持这些黑客/修复方便

  / *以下变焦：1规则是专门为IE6 + IE7的。  * /
    * HTML。clearfix
    *：第一胎+ HTML clearfix {
          变焦：1;
      } 

不断完善你的CSS

• 循环再用的习惯，不会来找你的一天。 它有发达。 因此，打算再骑自行车。 牢记这一点，你可以抽象的默认样式，排版的定义，布局，HTML元素的样式等尝试超前思考。
• 还看你过去的项目，这将有助于确定风格，你倾向于经常使用跨项目对接洽谈。 它抽象。
• 删除任何未使用的样式。 这种做法将继续从你的CSS框架，一种常见的症状称为“腹胀” -
• 删除重复性风格。
• 建立了一套有足够的灵活性，移植整个项目的样式。

在看看CSS框架

最后。 如果你有启发，并打算使用一个或多个CSS框架，继承人是几个流行的快速列表....

• 960网格系统 ：960网格系统是通过提供常用的尺寸，宽度960像素的基础上，为了简化Web开发工作流程。 有三种型号：12，16和24列，它可以单独或串联使用。 思想无关，你不能为自己创造一个轻松足够，该框架提供了在打印PDF格式，可以使用，勾画页designs.Bet网格模板，它将使一个专业的印象，如果你携带时几张你去到一个客户端的UI需求收集。 它也像烟花，闪光时，InDesign，Illustrator中时，Photoshop，Visio中，提供了一个“十起动器”，开始您的设计工作等提供了基本的网格模板，流行的设计软件。
• 蓝图 ：蓝图提供了明显分类的CSS文件重置，网格，表格，打印，排版，插件按钮，标签和精灵等，它还提供了一个单独的包括对IE的支持。
• SenCSs ：不同于上述两种，SenCSs（读感），不会有布局的CSS定义。 它包括字体，填充，边距，表格，列表，标题，引用文字，表格和更多。
• 的BlueTrip ：它原来的声名鹊起，它是其他人的框架，从那里得到它的名字......像蓝印花布 ， 旅游 OLI提供最好的功能组合。 其功能集，包括24列格，排版样式，ORM样式，打印，按钮等。
• YUI的网格 ：给您带来的Yahooo开发网络，支持流体宽度750px，950px，974px（100％）的布局以及预设固定宽度的布局，并能够轻松地自定义任意数量。 正如你可以看到，它在技术上只是布局组件。 锐也提供了其他页面元素的HTML / CSS套
• YAML的（另一个多列布局）
• emastic

请记住，使用CSS框架并不意味着你是懒惰的创建自己的......这意味着，你很聪明，学习别人的经验和失误，节省时间和提高生产率！！

用我有限的技能与工具，如Photoshop和Illustrator集，我可以坦率地承认，我是个更好的开发人员比我一个设计师。 但我的背景与核心（服务器端）的Java / PHP / COBOL的发展，一直是我的UI开发能力非常积极的影响。 我的意思是，同时创造了我的设计，即每当我做设计，我认为设计如何可以最好转换成HTML的CSS，而这样做的HTML CSS，我给后端技术有关的思想和合理确定可以轻松实现的HTML成XSL循环或PHP的片段等。

多年来，我一直扔在设计UI设计师，谁可能不有一个线索，HTML或CSS是什么头。 这些年来我一直在想，我会要求太多，如果我只是希望设计师，谁是试图shov他的“不可能的代码”设计我的喉咙，只是一点点理解他的设计将被转换成。 这将有助于对不对？

然后，我遇到了这个职位今天的网页设计师不能代码 ...感谢主！ 我只是许多有同样的感觉的人之一......上述artitle是位长篇大论...... 但值得一读，它的每一句话。

感谢埃利奥特杰伊股票......我就放心了！

下面是一些摘录从Elliots文章 。

哇，这一天！ 它始于一个小鸣叫，似乎席卷了整个网页设计社区讨论结束。 它似乎有一些非常强大的网页设计师是否应该能够代码的问题上所持的观点。
...
所以，在我们得到这个，让我快速回顾一下，我今天上午在Twitter说：

老实说，我感到震惊，在2010年，我还是跨越未来“网页设计师”，谁也不能编写自己的设计。 没有任何借口。

...我应该已经多了几分具体在我的鸣叫。 我谈论没有连最基本的HTML和CSS技巧实际现场变成一个平面设计的设计师。 没有的人不是故意选择的代码，那些不能。 和我也谈到这里只有前端代码，当然这很荒谬，认为设计师也应该是惊人的后端程序员...

我们得到的“网页设计”在Illustrator中，300dpi的发送，不可能代码，没有一致性/可用性。
~~艾米马洪

它已经晚了，我有这某种程度上包装。 我知道会有许多人同意我的看法，我的意思是不是得罪或扰乱任何人不能代码，但我希望，我所说的一些反映一些点，总是拿出钻研时本次辩论。

在一天结束时，我没有失去过谁可以编写，谁不能睡觉。 我只是真正惊讶地发现，这么多的设计师缺乏前端的技能，因为我认为这是过去的事情了。

也可以参考的意见，有大约320评论，我写了......他们都是值得一读。
请在这里读Elliots满后.. 人可以没有代码的网页设计师

昨天，在谷歌浏览器的CSS重置遇到的问题，我......我想挖成用户代理样式表领域的深一点......
发现CSS2.1的用户代理样式表（对于那些不知道什么是“用户代理样式表”按照默认值表什么是用户代理样式表（规范） 。

对于CSS 2.1的用户代理样式表默认的完整列表， 请点击这里

昨天，像所有其他的“土拨鼠日”，我是工作在一些CSS /无表格布局。 所有在IE 7，FF 3和Chrome，直到突然，我看到一些联合国忽略利润率仅在谷歌Chrome。 虽然很奇怪，武侠，这是一些新的bug /问题我来到accross，终于有一些我的平凡工作中的香料。 悲伤（但很好）有固定探头几分钟内...

基本上，它看起来像谷歌Chrome忽略我的CSS复位（利用margin：0px）。 它实际上是由于用户代理样式表（-webkit的填充启动：40px）。 因此，解决办法是复位设置填充样式：0，行为不端的元素。
发生的任何元素，以防止这个问题的一个好方法是使用如下一个全球性的CSS休息

* {保证金：0;填充：0;}

什么是用户代理样式表（规格）？
以下摘录取自http://meiert.com/en/blog/20070922/user-agent-style-sheets/ ，后续环节，读取用户代理样式表的更多信息

的CSS介绍说，每个用户代理（UA，往往是一个'网页浏览器“或”Web客户端“）将有一个默认的样式表，提出在一个合理的文件的想法 - 但可以说是平凡 - 方式。 CSS 2的表示，符合用户代理必须申请1默认样式表的行为好像他们做的和，1用户代理的默认样式表应该呈现方式，满足文档语言的一般介绍期望文档语言的元素;的CSS三是可能是相同的想法。

由于CSS规范离开它是否使用默认显示一个“真实”的样式表或不实现，它不令人吃惊的是，你不觉得在每一个浏览器的安装文件夹的默认样式表。 微软的Internet Explorer以及歌剧不同，例如（据我所知），Gecko的浏览器如Firefox和Netscape Navigator的（看“html.css”），但也Konqueror的，而简单地理解他们的默认样式。

我既不是很新的用户界面（UI）的开发，也不是我一个老兵，我总是把它，我融入UI开发人员文件多于一个设计师没有遗憾，。 哦，好吧！ 我写什么呢？ ......有一段时间（必须年没有），然后每一个现在，当我进入UI设计（专业设计师了假日）位，我始终无法停止思考，我的设计是否应正确complient或不（真诚的，不是我能achive 100％的标准，如果我想太多）。 然后我告诉自己，什么垃圾！ 的设计应该简单，美观大方，主要是看起来可用，它不应该让游客逃跑......或反弹（技术）。 一个很好的无表格使用CSS布局的游客，谁是无视所有的智能超文本和级联风格表您的网页的皮肤下...时时刻刻有什么好处！
它应该看起来不错，易于使用......然后所有标准的东西。

这个由贾森炸博客条目37信号 （对于那些谁不知道37个信号是谁创造了一些非常强大的Web应用程序一样的Basecamp，营火等成盎司），在2004年写类似的东西，相信我，近5年来，我stumbbled accross并没有太大的改变，因为...我很高兴，读他的文章，我完全同意，他说，也是事实，她是不能确定什么是对的只是他的直觉告诉，所以是我

贾森油炸：“太多谈论CSS和XHTML标准和辅助，并没有足够的人谈论。 CSS和标准兼容的代码只是工具 - 你必须知道如何建立这些工具。 太好了，我很高兴你的UI不使用表。 还等什么？ 如果仍然没有让人们实现自己的目标，谁在乎。 Web标准是伟大的，但人自己的标准，包括把事情做好（ 还是太硬，做网上）。

UI设计师老根本性错误“人类对对方遗忘” - 除了这一次他们的代码看起来更好。 人类 - 没有代码验证器 - 使用接口“。

贾森炸结帐的全部文章

DISCALIMER：这并不意味着我们不应该打扰标准。 标准是好事，并坚持他们尽可能。 我们只需要明白，良好的用户界面设计并不总是意味着100％的标准Complience或反之亦然....

从我对我的教训，我跟一些UI设计和发展的黄金规则...继承人的十大...不是说你也跟着他们......

1，以用户的关怀。 用户可以拨打或破坏您的网站。 DONOT使用户样子总idoit的，根本无法使用您的网站。 这是坏！

2，保持简单和易于使用的主要guidlines。 东西太多了，在屏幕上，用户会感到困惑，或从原来的任务分心的概率越高。

3，在限制......沉迷DONOT到可用性，无障碍和标准太多。 有效地使用标准，使他们理解的团队。 这将确保正确的产品一致性

4。原型的要求。 由于使用的接口丰富，这些天，原型始终是更好不仅仅是简单的线框，后者是无效体面的相互作用，它会失败，正在开发的最终产品，提供客户清晰的画面。 一如既往，这是比较容易转换成最终交付的原型。 还可以！ 与原型可以解决任何交互问题，早在开发周期。

5。在您的设计和互动的一致性是非常重要的。 Donot用户混淆了难以预料的相互作用和小玩意。

6，了解你的“设计任务书”。 跳投的页面设计beign的首要行动的重点。 此外，在页面上seconday行动，并优先考虑他们。

7。网站的用户提供适当的反馈。 大部分围绕Ajax设计的网站，有关更改页面的用户提供视觉线索。 用户给予承认他执行任何任务的完成。 Donot使用户等待和猜测，如。 进展的指标提供文件uplaods的。

8。适当使用控制。 如使用选择下拉列表小名单，donot让用户选择使用选择框的200个城市之一。 了解一个按钮和一个环节之间的差异。 链接和按钮有不同的目的，donot使用其他之一。 提供正确的控制，使页面更容易同进行交互 避免使用菜单，更多的是两个层面深。 不要推倒重来。 使用标准的控制，自​​定义他们，只有非常必要的。 定义为您的网站的第一手所需的任何自定义的控制，使他们能够创建和独立测试，准备使用accross站点。

9。Donot遍历太多的设计。 记住！ 整个产品包含更多设计单独 建立适当的时间表，到您的设计迭代的项目进度，并坚持下去。 迭代有助于我们找出什么可行，什么不，挑选出故障点。 作为一个良好的接口需要时间，在begining迭代开发周期的时间，使设计迭代亘古不变的直接等同返工。 太多的返工可以jeopradize的最后期限。

10。坐下来，有时觉得像一个用户。

你见过animoto.com？ 好吧！ 这不是一个广告，我真的很喜欢它！ 它亲吻驴子的UI确实

几个星期前，我碰到这个网站。 看到的第一页，DINT麻烦得多。 对于我来说，这只是另一些丰富的Flash内容的网站，允许用户上传图片，选择一些曲目，并转换成一个漂亮的图片幻灯片。 下载的FLV，并把它放在任何你选择的网站（YouTube上的Metacafe，Facebook和喜欢）......期间。

昨天，当我看到内部流动的网页，用户通过这个幻灯片的创建了.... 我去了哦，哇！ 当我意识到有不使用闪光灯位。 这确实是丰富的用户界面。 所有UI开发人员必须渴望创造或至少是一个团队已经完成了这个接口的一部分...... 绝对精彩！ 和鼓舞人心的！

看看... http://animoto.com/ ...，注册和玩...只有你能欣赏的天才。

当我看到名单上的这篇文章除了“ 仿的绝对定位
“ 由埃里克·索尔 ，我没有什么比留下深刻印象。 我也郁闷m​​ajorly，因为，老实说，我很纳闷，为什么不能我来了，这个令人难以置信的东西。

通常，当我们创建的CSS布局，我们使用“位置”或“浮”，或一个非常糟糕的组合。 埃里克·索尔和他的团队定义了一个完美的CSS布局技术，人造列技术，模拟了一列的存在后，他们命名为“ 仿绝对定位 ”的新型技术。

你知道这个问题，我们的CSS开发与的瓦解布局（意想不到​​的含量变化，导致整列包装，当我们使用浮动布局）......好吧！ 似乎历史！！
此布局技术是还很年轻，要丢弃在那里所有的CSS大师，才能成为联合国的书面标准。 我很高兴现在使用它！ 我已经将我刚才的问题/浮动联合国必然布局已经转换成FAP的布局中间......很高兴地说“ 我们已经使用了该博客网站以及仿绝对定位 ”...去尝试它，现在！

荣誉埃里克！！

在页面上的DOM元素，慢呈现，慢的是在JavaScript的DOM访问。 一个DOM元素的高，可能是由于不良的布局设计。 例如，嵌套表可能已被用于布局的目的。 使用任何HTML标签的地方是情理之中的语义。 例如DONOT使用布局表，但DONOT毫不犹豫地使用他们，你必须显示表格数据，因此将使用减少DOM元素，相比之下，使用DIV的只是创建一个类似的结构......

来测试你的HTML页面中的DOM元素的数量，只是在Firebug的控制台键入以下内容： document.getElementsByTagName('*').length

有没有多少DOM元素太多的设置标准。 检查其他有良好markup.Eg的类似网页。 雅虎主页是一个非常繁忙的页面，并仍在700个元素（HTML标签）。

Ajax请求使用GET

人们已经发现，使用XMLHttpRequest时，发表在浏览器中实现的一个两步的过程：发送的头，然后再发送数据。 所以最好使用GET，只需要一个TCP包发送（除非你有大量的饼干）。 在IE的最大URL长度是2K，因此，如果您发送超过2K的数据，你可能无法使用GET。
一个有趣的侧面影响，实际上不张贴任何数据的行为，如GET​​ POST。 得到的是信息检索的含义，所以它才有意义（语义）当你只要求数据发送到服务器端存储的数据，而不是使用。

避免同步Ajax调用

“阿贾克斯”的要求时，你可以选择异步或同步模式。 异步模式运行在后台的要求，而其他浏览器的活动可以继续处理。 同步模式将等待请求返回，然后再继续。
应避免与同步模式提出的要求。 这些要求将导致浏览器，直至锁定为用户要求退货。 服务器忙的情况下，反应需要一段时间，用户的浏览器（也许操作系统）将不允许做别的。 在一个反应​​是没有正确接收的情况下，浏览器可能会继续阻塞，直到请求超时。
如果您认为您的情况需要同步模式，它是最有可能的时间来重新考虑你的设计。 实际上很少（如果有的话）的情况下需要同步模式的Ajax请求。

优化图片

优化只是意味着保持保持图像质量的图像到所需的水平，小规模的。 有负载的程序，一旦可以进行优化之前，他们装上服务器交付的图像。 通常，我们使用这些图像创作（Photoshop中，烟花等）的工具，工具，使用户能够优化网络使用的图像。
•GIF的检查，看看他们使用的调色板的大小对应于图像中的颜色数量。 当图像使用4色和256色调色板，然后图像可以进一步优化

•转换GIF的PNG的在可能的情况下，看看是否有节能。 往往不是，是。 不要犹豫，使用PNG的，因为它们是最常用的浏览器完全支持。 动画功能的PNG可以做一个GIF，包括透明度的期望。

•对于使用CSS sprites的图像，安排在水平垂直通常在一个较小的文件大小的结果，而不是精灵的图像。 此外，结合精灵类似颜色的图像。 这有助于你理想下保持低色数256色，所以适合在1 PNG8。

•如果您正在使用的favicon.ico，最好在1K，保持它的小。

正确使用缩放/调整大小的图像。

总是尝试使用调整大小的图像，即不使用一个更大的图像比你需要的，只是因为你可以在HTML中的宽度和高度设置。 如果你需要在页面上显示的是100px X 100px的图像，然后不下来200x200px图像使用一个规模。

使用逐行图像

网页浏览器已经逐步呈现图像。 做得更好“隔行扫描”选项，或您的JPEG图像与“进步”的选项，只需保存你的GIF或PNG图像。

使用渐进式图像是否是一个祝福或一个障碍是网络用户之间进行的辩论。 也是一个渐进的形象，重约20％，比非渐进对口。 所以，如果你认为你的布局使用的图像，不会妨碍用户体验，它是渐进的，觉得自由地这样做。