CSS架构,第1部分:代码清理的原理和新的最佳实践

分享于 

26分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

在大型( 还有小调) 网站的CSS通常都是代码膨胀和冗余,在其他选择器适当适当的选择和不必要的选项的情况下,代码行的代码膨胀和冗余的代码行是不必要的,。

为了大大提高组织的所有样式表的可维护性,我们都可以institute几个基本的。扎实的CSS写作实践。 然而,最终,我们真正要拍摄的是构建一个特定的站点样式表,以显著提高的可伸缩性。

我们的方法是两个折叠。 首先,我们必须为编写简洁高效的CSS提供几个基本实践。 其次,我们需要了解和研究日益流行的可以伸缩CSS架构的核心方法,以将我们的站点样式表放到另一个。

我将探讨这篇文章中的两个主题,但在进行代码可以扩展之前,先做一些CSS清理。

一些有用的技巧

从其他开发人员那里学习工作流技巧通常非常有用。 这是我的一些个人收藏。

目标样式

最好是在页面上定位样式的方法。 在使用mozilla工具outline或者 Chrome 开发者工具的工具时,如果你不使用工具,可以帮助你查看和处理你需要更快速的元素的元素:

.searchform >. searchsubmit {
width: 14%;
height: 25px;
background: transparent url(images/icon_magnify.png) 00 no-repeat;
outline: 1px solid red
}

使用这个属性和值的基本原理是:outline 不添加到元素的维度,如边框所做的。 甚至红色( 或者其他颜色名称)的使用也很重要。 编码时,只使用十六进制,rgb(a) 或者 hsl(a) 颜色代码。 然后,你知道当你看到一个颜色 NAME 时,它仅仅是为了故障排除而存在的。 请注意,IE8和更低版本不支持分级显示。

添加测试样式

测试和故障排除的另一个好做法是,对新的试件样式进行缩进。

.searchform >. searchsubmit {
width: 14%;
height: 25px;
background: transparent url(images/icon_magnify.png) 00 no-repeat;
 margin: -2px 000;
}

使用缩进,你知道该样式是暂时的,并且很容易扫描和查找。 当你确定样式应该保留时,将它的缩进为它的余的永久样式。

禁用样式

有了添加新样式的好方法,下面是一种快速禁用它们的方法: "X"通过将x-放置在样式选择器或者样式规则之前:

.social a {
-moz-transition: opacity 0.3s ease 0s;
x-display: block;
height: 35px;
opacity: 0.4;
}

这里方法比注释样式要快。 它也很容易扫描和找到,如果你稍后决定要保留它,你就有这样的风格。

CSS清理和优化指南

现在我们已经得到了这些技巧,让我们关注一些编写清洁。优化代码或者清理它的他CSS的方法。 我们将从宏到微型级别,首先探索如何提高HTML的可以读性和语义。

宏优化

它很容易聚焦于样式声明,但在创建选择器之前,必须使HTML和样式表自己读好。

提供样式表信息并指示结构

我是一个非常大的样式表,我很喜欢使用 table的内容。 对于给定样式表的开发人员,知道哪些部分或者哪些名称需要查找一组样式是非常有用的。

我建议在基本级别中插入开发人员( 姓名等等)的信息和样式表中最后一次更新的日期。 这样,如果有任何问题出现在文档中,当前的开发人员就会知道。

/* stylesheet information for XyZ Corp
File created date: 09.15.2010
Last modified date: 06.04.2012
By: [name]
*/

另外,我建议进行初步的内容 table,以便它的他开发人员知道文档的结构和样式的不同部分。

/* Table of Contents
- Link Styles
- Other sitewide styles
- Actions
- Layout
- LOGO
- TOP NAV
- NAVBAR
- SUBNAV
*/...
(later in the document...)/* =Layout */ (etc.)

注意,在样式表的节名称之前包括等号( = ) 是 deliberate- ,它作为标志,并通过更容易地搜索文档来查找。

注释和嵌套

注释和嵌套标记帮助你跟踪包含其他元素的元素的开始和结束,这使你能够更快地识别 Fragment。

注释divs和其他主要布局元素,这些元素以 <!-- #id or. class name --> 使用标记 <!--/end #id or. class name --> 或者 <!--/#id or. class name -->

嵌套看似不必要,但是它可以帮助你轻松地发现视觉层次,并清楚地指示视觉级别,这可能会使验证变得容易,但可能会导致验证失败。

你可以在下面的示例中看到差异:

<body><divid="pagewrap"><divid="header"><h1>Website Title</h1><ulid="navigation"><li><ahref="#">Home</a></li><li><ahref="#">About</a></li><li><ahref="#">Contact</a></li></ul><divid="contentwrap"><divid="maincontent"><h2>Main Content Title</h2><p>Main content, which is so much more important than the secondary content that it makes one teary with emotion.</p></div><divid="secondarycontent"><h3>Sidebar Title</h3><p>Sidebar content, which is not as important as the primary content (which is why it is in the sidebar)</p></div><divid="footer"><p>standard copyright and footer information</p></div></body>
<body><divid="pagewrap"><divid="header"><h1>Website Title</h1><ulid="navigation"><li><ahref="#">Home</a></li><li><ahref="#">About</a></li><li><ahref="#">Contact</a></li></ul></div><!-- end #header --><divid="contentwrap"><divid="maincontent"><h2>Main Content Title</h2><p>Main content, which is so much more important than the secondary content that it makes one teary with emotion.</p></div><!-- end #maincontent --><divid="secondarycontent"><h3>Sidebar Title</h3><p>Sidebar content, which is not as important as the primary content (which is why it is in the sidebar)</p></div><!-- end #secondarycontent --></div><!-- end #contentwrap --><divid="footer"><p>standard copyright and footer information</p></div><!-- end #footer --></div><!-- end #pagewrap --></body>

在"创建有效语义标记中,你可以找到更多的信息和技巧来组织样式表。"

微优化

微优化减少文件大小,加快页面加载时间,并鼓励最佳实践。 下面是一些在微型计算机上提高CSS效果的方法。

按字母顺序排序

按字母顺序放置CSS声明是设置干净代码和减少问题的好方法。 为什么因为你的风格声明会更容易被目标和定位。

一个示例示例二
.login {
margin-top: 5px;
line-height: 1.5em;
padding-left: 5px;float: right;
list-style-type: none;
width: 80px;
font-weight: bold;
border-left: 1px solid #69824d;
}
.login {
border-left: 1px solid #69824d;float: right;
font-weight: bold;
line-height: 1.5em;
list-style-type: none;
margin-top: 5px;
padding-left: 5px;
width: 80px;
}
提高速度

选择器的长链使浏览器强制通过页面的DOM进行不必要的搜索,从而生成一个 MATCH。 消除元素限定符和放弃后代选择器有利于更直接的选择,有助于加快速度。

Preoptimization:

div#wrapper div#maincontent div#sidebar {
background: #fff url(bg.png) repeat-x 00;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding:. 1em;
}

Postoptimization:

#sidebar {
background: #fff url(bg.png) repeat-x 00;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding:. 1em;
}

在"改进页面加载时间的"优化。阅读更多关于这里主题的内容。"

接吻:保持简单和简短

在样式声明和选择器方面,LESS 更多。 对于样式声明,请遵循以下规则:

  • 尽可能使用 shorthand 属性( 并在使用 shorthand 时记住这些项: shorthand 属性语法;属性值顺序( 如果有) ;默认值和所需属性值。
  • 压缩值和单位
  • 尽可能避免重复的属性

首先:

#sidebar {background-color: #fff;background-image: (bg.png);background-position: 0 0;background-repeat: repeat-x;border-width: 1px;border-style: solid;border-color: #ffff00;font-family: Georgia, serif;font-size: 1.33em;line-height: 1.33em;font-weight: normal;margin: 10px 20px 10px 20px;padding:. 1em;}

之后:

#sidebar {
background: #fff url(bg.png) repeat-x00;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding:. 1em;
}
压缩代码

最后,删除多行和缩进还有助于保持站点的高效和快速。 建议在开发CSS时使用多行。嵌套和缩进,但一旦网站准备就绪,将CSS缩减为最佳路径。 condense CSS压缩and和 CSS驱动两个不错的工具 that CSS压缩 CSS。

工具可以帮助你呃。hand手

在编码时记住这些规则有助于防止你在以后使gaffes成为你的时间和失败。 但是不要认为你必须自己做,因为有些好的工具可以帮助清理代码。 我认为 CleanCSS代码美化器是值得检查的。 当你学习集成我描述的一些方法时,使用这些工具来进一步清理你的代码。

使用最新最佳实践改进代码

正如你所知道的,前端开发的世界已经发展了很多年了,因为新的思想已经设计了新的方法。 下面是一些最新的前端编码最佳实践,它将帮助你的样式表和HTML大量使用。

用 Normalize.css 重置

CSS重置帮助建立一个基线,其中所有样式都设置了。 重置有效地替代浏览器的'特定元素的默认样式( 可能会有很大差异) )。 的CSS在过去几年的流行,很多网站仍然没有使用它们,但是这些站点的CSS可以伸缩性在很大程度上受到了很大的影响。

,使用 (,因为它太远了。) Reset,而不是使用非常流行的CSS重置( Eric ),许多人推荐使用 normalize.css ( )。 normalize.css"规范化"将代码转换为公共基线,而不是重置所有浏览器中元素的基本样式。 参考Github上的 normalize.css 项目,这是它的优势,它是一个CSS复位的优势:

  • 许多CSS重置不同,保留有用的默认值
  • 对多种HTML元素的样式进行规范化
  • 纠正 Bug 和常见浏览器不一致
  • 通过细微的改进提高可用性
  • 解释哪些代码使用了详细的注释

使用 normalize.css 替代标准的重置将使你在正确的编码脚上,并节省大量的时间来重建基线样式。

清除清理浮动的问题

如果你仍然在使用这里方法来清除文档中的浮动,那么我们真的不需要进行讨论:

<div class="clear"></div>...
.clear { clear: both; }

在本文的第1 章中,我们推荐了其他清理方法,这是在CSS布局首次开始实现时的第一个浮点清理方法,该方法在。

使用最常用的up-to-date/tried-and-true技术,在 HTML5 Boilerplate 中使用最 up-to-date。前端编码最佳实践。 微Clearfix支持 Firefox 3.5和更高版本,Safari 4和更高版本,Chrome,Opera 9以及更高版本,以及 IE 和更高版本。 下面是一个示例:

/* For modern browsers */.cf:before,
.cf:after {
 content:"";
 display:table;
}
.cf:after {
 clear:both;
}/* For IE 6/7 (triggers hasLayout) */.cf {
 *zoom:1;
}

clearfix. cf 类应该添加到包含浮点数的所有元素中。 在这种情况下,旧的空分单元单元应用清晰( <div class="clear"></div> ) 可以从你的播放列表中永久退出。

overflow 如何:隐藏?

清除浮动的另一种流行技术是使用 overflow: 隐藏,虽然微型Clearfix更强烈推荐,因为 overflow 有时会出现问题: IE 7和更早版本中的隐藏方法。

虽然使用 overflow:hidden 几乎是每个人的浮点清除技术一段时间,但它引发了如下问题:

  • 在浏览器窗口小于容器窗口时,将内容和子元素隐藏在没有滚动条的滚动条上。
  • 边缘。边框。轮廓和绝对定位的png干扰。
  • 应用CSS3特性,如 box-shadow,text-shadow,变换和变换。

在真实世界中,和CSS3的合作者Louis建议使用 overflow:hidden导致复杂布局的问题,并建议避免在复杂的布局环境中使用。

如果被绑定并确定为岩石溢出:隐藏,然后使用以下版本的hasLayout在 IE 和块级元素中:

.container {
 overflow: hidden; /* Clearfix! */ zoom: 1; /* Triggers"hasLayout" in IE */ display: block; /* Element must be a block to wrap around contents. Unnecessary if only
/* using on elements that are block-level by default. */}

除法器

说不正确的空 div。 要将 empty cleared <div> 为页面分隔符,你必须将它的设置为 rockin cleared

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

是,我知道这里代码作为清除可视页面分隔符的工作很出色,但它不是语义。 CSS忍者和面向对象 CSS creatrix的 Nicole建议使用 <> 元素来划分页面的部分并添加必要的样式给它。

因此,你可以使用下面的代码代替前面的代码:

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

图像替换

前端开发拥有一个长而卓越的CSS技术,用于替换带有图像的文本。 在 2012年03月 中,Jeffrey Zeldman在 block 上引入了一个新的孩子,认为是Kellum方法。 而不是使用 -9999 hack ( 在这个过程中创造一个巨大的隐形盒子) 隐藏文本,而是将文本隐藏在屏幕读取器中。

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

性能得到改善,尤其是平板电脑和小型屏蔽设备。

使用 icon 元素

你可能使用 <span> </span> 作为在页面中放置图标的方式,如下所示:

<liclass="favorite"><spanclass="icon favorite"></span><spanid="favorite-insert-point"class="favorite"></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可以极大地帮助消除那些图像,同时让站点准备转移到响应式设计实践。 对于大多数站点,CSS3是任何圆角( border-radius )。阴影( box-shadow )。文本降阴影( text-shadow )。渐变和 box-sizing的实例的福音。

然而,CSS3有两个缺点: 首先,purequery规范的许多部分仍然处于流量状态,所以即使是现代浏览器也需要供应商前缀。 其次,流行的老浏览器不支持 CSS3,因此需要回退或者 helper 脚本。

CSS3兼容性

不幸的是,早期版本的IE 与CSS3的兼容性问题。 目前,只有 IE 9 ( 最显著的是,CSS3选择器;参见和CSS3支持 ) 支持,并且完全不支持 IE 6到 8. 如果打算使用任何CSS3属性,我建议使用 IE 9.8或者更早版本为观众安装适当的回退。

幸运的是有一些脚本可以帮助。 在 IE 中支持CSS3的支持如下:

这些脚本的缺点是增加页面重量和加载时间,但这是值得的。

用于CSS3的命令行工具

现在可以单独使用CSS3概述,以及哪些属性可以安全使用,这可能是另一篇文章的主题。 关于jdo的一个最重要的步骤是要保持对规范和浏览器采用它们的更改。 记录所有这些可能有点痛苦,所以我建议使用 http://css3please.com/http://html5please.com 来保持最新的语法更改和支持。

许多伟大的CSS3生成器可用。 对于几乎所有的属性, CSS3,请 ! 是一个神奇的资源。 对于渐变,终极CSS渐变生成器是一个很好的工具,它使用适当的语法和回退生成渐变代码。

If feeling lazy lazy lazy lazy lazy lazy不需要记住如何写出所有的供应商前缀,Prefixr 将为你的代码添加这些前缀。 在你将所有前缀添加到服务器后,你也可以通过 Lea 将这个伟大的脚本添加到你的CSS上。

网格网格

如果你的站点当前没有建立的网格,则必须进行"因此,你是"并进行。 如果当前代码具有大量宽度。margin 和 padding的大量实例,那么它们的尺寸不一致。

你可以使用元素的维度构建自己的组件,也可以使用预制的CSS网格框架( )。

使用 box-sizing

如果你制作自己的网格,那么使用 box-sizing的一个非常有用的CSS属性是。 box-sizing 可以改变浏览器计算立方体大小的方式,它是为处理尺寸图而发送的,特别是布局和网格的。

box-sizing 根据被称为"IE 盒模型"-that的元素来计算立方体的尺寸,在盒子的尺寸中考虑了 padding。 这意味着当元素和 padding的宽度同时声明时,该框将等于宽度,而不是宽度和宽度。 图 1 说明这个想法。

图 1与 IE 框模型的比较

使用 box-sizing: 边框框( 与 box-sizing 相对应: 内容框是基于W3C框架模型的默认值,这对于进行布局的计算非常容易。 属性 box-sizing 确实需要供应商前缀。

使网格和图像成为流体

计划网格( 如果你认为未来是友好的未来。)的最后方面是将 switch 从固定像素网格转换为百分比( 或者 ems )。 确定大小百分比的最佳方法是使用Marcotte响应网页设计黄金公式的Ethan : 谢天谢地,target=content Thankfully Thankfully有计算器可以帮助确定网格中的x 轴编号。 我推荐 RWD计算器。

另一个关键的是将来的友好的图像,适应和移动它们容器的大小。 建立这段代码的主要方法是简单的代码行:

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

图像将在流体容器内收缩或者生长。

不要忘记 HTML5

最后,HTML5绝对是所有网站的关键前进。 它不再是一个特定站点是否决定实现它的问题,而是一个问题,当一个问题发生时。 在HTML5的几个方面,我认为对于任何人来说,在某一点上都可以使用,这是非常有用的,但是最简单的地方是使用HTML5的doctype。 to是一个快速变更,你可以立即作为前往HTML5标签和文档重构的前提人员。

<!DOCTYPEhtml>

因为doctype是向后兼容的,所以你的文档中没有其他内容需要更改,但是如果引入了任何HTML5标记,它们将工作。

说明标签,HTML5的另一个方面是使用一些新标签,帮助页面语义创建代码模块。 然而,与CSS3一样,向后浏览器兼容性是一个严重的考虑因素。 为了支持识别新标签,必须在页面上使用脚本,使旧的浏览器能够正确地呈现HTML5元素。

最常见的脚本是 ,它允许通过 IE 6识别HTML5元素。 唯一的缺点是,还有另一个脚本可以添加到页面加载中。 但实际上,不需要等待使用 HTML5,所以

好,干净,准备进行一些重大的改造

这 也 不是 太糟 吧? 通过给出适当的结构来清理宏级别上的代码,然后放大以组织代码。 用更高效的最佳实践进一步替换过时的解决方案也有帮助。

现在我们已经完成了初步的清理,我们准备下载一些重要的CSS重构。 通过设置一些越来越流行的可以扩展CSS架构的方法,可以将站点的样式表设置为可以维护性和效率。 在本系列的下一篇文章中,你将获得前四种方法的概述。

这篇文章是来自 IE 团队的HTML5技术系列的一部分。 使用 3个月的免费 BrowserStack 跨浏览器 测试 @ http://modern.IE 测试本文中的概念。

是网站设计专家,是一个行业老手,拥有超过 14年的经验。 她现在做她最喜欢的事情: 作为一名演讲者+ 作者+ 网页设计顾问+ 创意倡导者。 most Twitter @denisejacobs troubleshooting CSS troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting troubleshooting Smashing Smashing Smashing 重新设计网站。 她最新的宠物项目是鼓励更多的人从underrepresented的underrepresented到 Rawk,成为visible的网络专家。 你可以随时联系她 denise@denisejacobs.com,并查看更多关于 DeniseJacobs.com的信息。


PAR  cod  arc  架构  Principles  代码清理  
相关文章