第 3部分:使用MetaCoax方法重构 CSS ( 相 1和 2 )

分享于 

27分钟阅读

Web开发

  繁體

介绍

在前一篇文章中我介绍的可以伸缩和模块化的方法我的CSS架构系列all都有助于改变你思考和构造CSS结构的一系列辉煌。 在很多方面,它们也相互重叠,这表明改进CSS的过程的哪些方面是真正关键的。 尽管你可以在构造新站点时遵循任何一种方法,但事实是,我们做的是对现有CSS运行。

我描述了这些方法,但真正需要的是一种结合超级代码来对抗疯狂代码的方法- - 一种可以扩展的模块化技术。 而且,正如罗马不在一天内建立的,这是一个错误,试图纠正一些代码的代码。 因此,通过相控方法传递聚焦波中的代码是一个好主意。

给CSS重构一个好名字

去年,我为一个客户做了一个项目,我被保留在那里。 在学习了 DRY CSS。OOCSS。SMACSS和CSSG之后,我试图把它们提取到它们的基本实践中。 在一段时间内,我意识到所有这些方法都会被熟悉的道义"。测量两次,剪切一次。"所熟悉。 他们都鼓励查看模式,创建可以移植的样式和模块,可以重用和不添加多余的多余选择器或者样式。

这里外,我的客户机有很多代码,并希望对CSS可以做的更改有灵活性。 因此,我开发了一个内聚的。相控的攻击计划,以减少我的客户端CSS中的行数。 最后,所有四个可以扩展CSS框架的实践和技术都被合并,我开发的流程在减少CSS行的过程中非常有效。

一旦我创建了流程,我就必须知道该如何处理它。 我以"。测量两次,剪切一次"为基础,向它添加了 CSS,这就是我所得到的:

测量两次,剪切一次 css css mtco css à MetaCoax !

在本文的内容中,我将与你分享我的MetaCoax CSS 重构过程,设计用于的redundant冗余 CSS,同时保持CSS的可读性。简洁性和可扩展性,同时保持网站的可视设计和功能。 ( 查看我最近在 de-bloatifying CSS上的幻灯片。)

为了让你准备好重构 CSS,这里有一些建议。 首先,熟悉特殊性和级联- 它会产生巨大的差异。 我希望在本系列( 第 1部分第 2部分)的前两篇文章中,我已经驱动了选择器和规则来限制它们的可以重用性。 特别是使用后代选择器时,特殊性很容易和快速地失控,这就是我们要避免的。 其次,记住继承规则:某些属性被子元素继承;因此,这些属性如何向下层叠应该始终被记住。

MetaCoax进程

MetaCoax进程是四个阶段的方法。 在前一阶段构建每个阶段,它们都包含减少代码数量。增加可伸缩性和可维护性的做法,并为将来的友好站点提供基础。 我们将查看每个阶段的详细细分,以及每个阶段所包含的实践和技术。 在本文中,我将介绍 1和 2阶段。 有关阶段 3和 4的详细信息将出现在本系列的最后一篇文章中。

注意:在你完成MetaCoax重构过程时,你可以使用 Sullivan CSS Lint 来识别额外的位置,并向你提供关于如何完成的想法。

阶段 1: 缩短选择器和利用和层规则集

第一个阶段是关注最少的工作来改进站点的CSS。 这些更改涉及修改 CSS,但不触摸当前的HTML页面。 目标是使样式表更轻量化,并且使用少量时间和工作更容易维护和更新。 方法涉及优化选择器,同时通过更聪明的规则集重用来减少冗余。 即使你只将这个阶段的实践应用到你的CSS,你也会看到可维护性的改进。

下面是我们要做的事情:

  • 缩短选择器链
    • 终止限定符
    • 丢弃后代
    • 使选择器链成为三或者 LESS
  • 利用和图层声明
    • 利用继承来利用级联
    • 审查,修改和减少重要的属性 !
    • 干("不要重复你的规则集

缩短选择器链

为了优化选择器,目标是使用浅的选择器链,使链尽可以能短。 这种做法使得代码更易于使用,并且样式变得更加便携。 它的他优点是减少选择器破坏的机会,降低位置依赖性,降低特异性,避免特殊的冲突。

你有几种方法可以缩短选择器链,并将所有可以扩展架构的实践集成在一起,并进一步应用"。减少,重复使用,回收"。 所有的实践都保证了CSS代码的更加宽容。 这根本不是更新样式表的目标?

丢弃后代选择器

后代选择器( a ) 是用于目标元素的最"价格不菲"组合选择器之一。 其他昂贵的CSS选择器包括通用选择器( * ) 和子选择器( 一个> b )。 它们为什么会让浏览器浏览更多页面元素,从而使浏览器更易于阅读。 选择链越长,需要的检查越多,浏览器在屏幕上呈现样式所需的时间就越长。 当匹配后代选择器时,浏览器必须在页上找到每个密钥选择器( 是最右边的那个),然后上传 MATCH 树。

虽然这可以能不是几百行的样式表的问题,但是当文档大小接近 10,000行或者更多时会变成问题。 在采用未来友好和移动mobile的情况下,长选择器链会产生一种情况,即强迫小型的设备加载和处理不必要的CSS文件。

在后续 descendent Overdependence 2.1选择器中,on选择器是 IE 6编码的一个痕迹,因为 IE 6没有呈现其他的CSS组合符。 现在,在美国和其他主要市场, IE 6使用几乎不存在,开始使用与 IE 7和 IE 8兼容的选择器,并释放后代选择器的大量使用,并让所有的子类都可以使用。table 1 显示可以与 IE 7一起使用的选择器。 自之后的所有 IE 版本都支持这里显示的所有选择器。

选择器企业 管理 咨询
通用 *y
子:e>y
属性:e [attribute ]y
:first-childy
:hovery
:activey
同级/邻接:e + fn
:beforen
:aftern
table 1.CSS 2.1选择器安全用于 IE 7

注意:检查 http://caniuse.com/http://www.findmebyip.com/litmus/的图表,以确定浏览器对其他CSS选择器的支持。

不使用后代选择器,而是使用子选择器。 子选择器选择作为父元素直接子元素的元素,第一代的直接子元素与孙或者大孙相反。 图 1 说明了这个选择过程。

图 1.后代选择器 vs 子选择器

尽管子选择器仍然是一个"价格不菲"选择器,但它更具体。 这意味着浏览器不会在继承链中搜索到 MATCH的密钥选择器。 因此,这样的选择器会使你所需要的元素。

如果必须使用后代选择器,请清除其中的所有多余元素。 例如:

.widget li a

将成为

.widget a

无论li是否在那里,都将应用这种风格。

杀死合格的选择器

使用元素限定 #IDs 和 .classes 会导致浏览器不必要地搜索页面上的附加元素以使 MATCH 具有选择器。 绝对不需要限定身份。 ,中有一个最高的特异权重,因为它对于它所处的任何页面都是独特的,它总是有一个 MATCH。 限定选择器也会导致选择器的特殊性,使用更具体的选择器和使用 important。!

选择器等选择器

div#widget-nav div#widget-nav-slider

可以简化为

#widget-nav
#widget-nav-slider

并进一步缩小到

#widget-nav-slider

每个都提供相同的结果。

删除选择器中的元素类限定符减少了选择器的特性,这使得你能够正确使用级联。 比如,

li.chapter

理想将被更改为

.chapter

更好的是,因为它更具体于 <li>的情况,因这里可以考虑更改 <sap> 标记上的类。

.li-chapter

或者 .list-chapter

使它成为三或者 LESS

在优化选择器时,研究"三个或者 LESS"规则: combinator选择器不应该有三个上的步骤来到达键选择器。 例如使用这种特殊的选择器:

div#blog-footer div#col2.column
div.bestright p.besttitle {margin-bottom: 4px;}

要有三个步骤或者 LESS 到达密钥选择器,请进行如下更改:

#col2.column. besttitle {border:
1px solid #eee;}

利用和图层声明

下一步是要关注样式声明本身。 当重构到更多可以管理的that时,很容易重点关注选择器,并且相信样式会自己工作。 但是,注意你创建( 请参见图 2 )的样式声明和它们转移到美丽的CSS的位置。

图 2.CSS规则集的剖析利用继承

我们认为,当实际上我们不知道的时候,我们认识到了一些非常好的事情。 你可能记得继承是CSS插件的基本概念,但是你可能不记得哪些属性自然地,而哪些属性不需要使用。 代价高昂的表显示了由后代元素继承的最常用属性,除非对后代元素进行了样式设置。 ( 还有其他更模糊的属性被继承。)

color

font-family

font-family

font-size

font-style

font-variant

font-weight

font

letter-spacing

line-height

list-style-image

list-style-position

list-style-type

list-style

text-align

text-indent

text-transform

visibility

white-space

word-spacing

table 2.后代元素继承的公共元素

在查找冗余样式以合并或者消除这些属性时,这些属性非常重要。 当你更新样式表时,可以将可以继承的属性放在CSS中,使它的最佳利用并不重复。 适当地放置这些属性后,可以完全消除后面多余的样式声明。

审查,修改和减少重要的属性 !

如果你的CSS拥有令人印象深刻的重要声明,那么就应该减少它。 你应该真正使用重要的声明仅在某些实例中。 CSS技巧 Chris建议使用实用工具类或者在用户样式表中使用。 否则,你可能会被认为是自私和懒惰的人,而谁愿意这样做? !

如何减少 important?! 首先,按照我前面提出的建议保持选择器的特殊性。 其次,记住,新样式不应该撤销以前的规则集,而是添加到它们。

here,if,undo,undo,distill,distill,distill,rethink,create,create,create,create,create,create,create,create,create,create,create,create,create,create。 这就是我认为"分层"样式规则集的原因。 这也可以称为"扩展"( 或者"子类化") 样式,这是在第 2阶段创建模块的一部分。

在相同样式的important 属性中,我打赌这些属性可以变成可移植样式,在我描述阶段 2时,我也会讨论这些属性。!

擦干规则集

为了减少CSS中大量重复的样式,一些枯燥的编码可以帮助你。 在采用全干CSS方法时,可能会有些苛刻,注意到重复相同的规则集,然后在上加入组是一个很大的实践。

阶段 2: 重构,调整和模块化

第 2阶段的技术主要关注高级工作,以提高站点的CSS。 更改包括更改CSS和HTML的页面,对HTML的更改最可以能涉及重命名或者重新分配类名。 目标是为样式表提供结构和组织,通过按类别分组样式而不是页面。

这个阶段将进一步消除冗余,通过提高选择器的准确性和效率,使样式表更加轻量级,同时也帮助维护。 这种改进比第 1阶段花费了更多的时间和精力,但它包含了使CSS更好且能显著减少CSS代码行数所需的大量工作。

下面是我们要做的事情:

  • 重构以重构
    • 在样式表中分类CSS规则
    • 重构依赖于DOM中的限定符的样式
    • 使用类名称作为键选择器
  • 开始建立模块
    • 使用双连字符扩展 MODULE 子样式( -- )
  • 创建可移植 helper 样式
    • 外科布局助手
    • 印刷样式
  • 调整 HTML
    • 删除 inline 样式
    • 减少 <span>的使用以获得更好的语义

重构以重构

让我们不要忘记,重构CSS是我们的主要目标。 这些实践开始从思考和创建基于页面组件和页面层次结构的样式。

在样式表中分类CSS规则

我建议创建一个目录,以便在CSS中查找样式的各个部分,以便更容易地找到CSS样式。 在CSS重构阶段,通过将这些部分转换为它们描述的样式类型( 如 SMACSS类别),我建议将这些部分提升几个细分。 这些类别包括:

  • 标注,边栏部分,产品,媒体,幻灯片,列表等等。

因此,你的table 内容和文档部分的外观如下所示:

/* Table of Contents
- Base
- Layout
- Module
- State
- Theme
*/...
(later in the document...)/* =Layout */ (etc.)

样式表的重组有助于为第 2阶段的它的余部分提供基础,也是第 3阶段的一部分。

重构依赖于DOM中的限定符的样式

本建议是本文中最重要的内容之一: 完全消除页面特定样式,即基于将类添加到 body 元素以表示不同页的样式。 这样的样式迫使浏览器检查DOM链到 <body> 标签的所有路径。 下面是一个示例:

body.donations.events
div#footer-columns div#col1 div.staff span.slug {
display: block;
margin: 3px 000;
}

这里实践是长选择器链的root,超高特异性的选择器和需要使用重要的是覆盖级联。

body.video div#lowercontent
div.children.videoitem.hover a.title { background: #bc5b29; 
color: #fff!important; 
text-decoration: none; 
}

换而言之,它是错误的。 Mmkaay

要修复它,需要遵循以前的所有建议,例如三个或者 LESS,终止限定符并减少特异性。 你最终可能会得到的内容更类似于:

.donations-slug {
display: block;
margin: 3px 000;
}
使用类名称作为键选择器

因为id是高度特定的,所以应该尽可能避免使用它们,因为它们不能作为类重用。 但是,在创建类时,你希望使类名语义保持为。 目标是使选择器尽可能的直接。 通过这样做,你可以避免特异性问题,然后甚至可以将样式结合在一起以。

从SMACSS中,你应该生成在创建选择器时,键选择器应该是 .class,而不是标记 NAME 或者 #id.。 请记住,far-right 键选择器是最重要的。 如果选择器可以尽可以能的特定于所需的元素,那么你就可以按照这个选项进行。 通过这种方式,样式更直接地针对,因为浏览器 MATCHES 只显示精确的元素。

检查使用子选择器的所有位置,并在可能的情况下将它们替换为特定的类。 这也避免了子组合中的键选择器作为元素,也不建议这样做。

例如不执行以下操作:

#toc > LI > A

最好创建一个类,然后将它的添加到适当的元素中。

.toc-anchor

开始研究所模块

可以伸缩的CSS方法以及模块都是"。测量两次,剪切一次"的主义,它们都是他们所有的心灵和灵魂。 模块是可以从设计模式抽象出来的代码组件,例如经常出现在设计模式中的频繁实例,或者是一个可以将每一个共享的基本样式集合。 模块可以在文本。背景。字体颜色。边框。浮动等方面进行扩展,但是结构仍然是相同的。

模块的优点在于它们是可以移植的,这意味着它们不是位置依赖的。 将设计 Pattern 抽象为代码 MODULE 意味着可以放入任何页面中的任何位置,而不必重新创建轮样。 这就是,那是什么CSS的,对? ! 除了我早期的建议,模块化CSS是大量减少代码量的最佳方法之一。

OOCSS提供了一个很好的方法来思考如何将和皮肤 to MODULE,以及如何将到 MODULE。 SMACSS提供了关于如何处理模块并扩展它们的明确指南。

使用- - 扩展子样式

尽管SMACSS为扩展模块提供了很大的指导,但我更喜欢从CSS中提取子样式,以使用来扩展子。 这对我来说很有意义,因为这是一个视觉上的指示,新的样式是基于前面的。

下面是一个示例:

#go, #pmgo{
 width: 29px;
 height: 29px;
 margin: 4px 00 4px;
 padding: 0;
 border: 0;
 font-size: 0;
 display: block;
 line-height: 0;
 text-indent: -9999px!important;
 background: transparent url("/images/go.jpg") 00no-repeat;
 cursor: pointer; /* hand-shaped cursor */ x-cursor: hand; /* for IE 5.x */}
#pmgo{
 margin: 2px 00 3px;
 background: transparent url("/images/go.jpg")
no-repeat center top;
}

可以修改这里代码并将它的更改为更类似于以下内容的内容:

.button-search{
 width: 29px;
 height: 29px;
 margin: 4px 00 4px;
 padding: 0;
 border: 0;
 font-size: 0;
 display: block;
 line-height: 0;
 text-indent: -9999px!important;
 background: transparent url("/images/go.jpg") 00no-repeat;
 cursor: pointer; /* hand-shaped cursor */ x-cursor: hand; /* for IE 5.x */}
.button-search--pm{
 margin: 2px 00 3px;
 background: transparent url("/images/go.jpg")
no-repeat center top;
}

创建可移植 helper 样式

随着模块化的过程,便携式样式是另一个方便的工具在你的。 下面是一些来自Grownups的CSS示例。

外科布局助手

通过Grownups标准的CSS,有一些额外的布局帮助并不令人遗憾。 尽管网格处理了很多问题,但是这些样式在需要( 尤其是在垂直间距方面) 时会给元素带来轻微的动作。

.margin-top {margin-top:
5px;}
.margin-bottom
{margin-bottom:. 5em;}

虽然在大多数情况下,我们在创建类时努力保持名称的语义,在这个例子中,描述名是很好的。

印刷样式

如果你发现很多CSS都是用来改变 font-face。尺寸和/或者线条高度的,印刷风格是非常完美的。 对于Grownups和CSS都建议专用的排版样式,它们不绑定到元素,例如:

.h-slug {font-size:. 8em;}
.h-title {font-size: 1.5em;}
.h-author {font-size: 1em;}

一个很好的练习是通过of和of搜索属性字体,font-size,font-face,以及这些属性实例的大幅度。 一旦你有了一个好笑,想出哪些样式适用于什么,哪些大小重要,然后开始一些便携式印刷。

调整 HTML

尽管到目前为止,我们已经讨论过的第 1阶段和第 2阶段的实践提供了一些奇迹。 最有可以能,如在Grownups的CSS中的to建议的,你需要在添加新类名时更改 HTML。

减少 <span>的使用以获得更好的语义

如果有更多语义标记更合适,那么 <span> 标记的使用是否会有所不同。 记住,<span> 标记实际上是针对 inline 元素,而不是块级元素,所以使用来表示,因此在技术上使用的标题和其他元素是错误的。

例如这里的span应该是段落或者 header 标记,指出这些内容在文档层次结构中的位置。 这些元素中的任何一个都可以为类钩子提供基础。

<liclass="item"><ahref="http://www.codeproject.com/learning/hillman"title=""><imgsrc="http://www.codeproject.com/images/brenda-hillman.jpg"alt="Air in the Epic"/></a><spanclass="slug">Brenda Hillman Essays</span><spanclass="title"><ahref="http://www.codeproject.com/learning/hillman"title="Air in the Epic"class="title">Air in the Epic</a></span><spanclass="author">Brenda Hillman</span></li>

下面的代码版本将从语义角度进行改进:

<liclass="item"><ahref="http://www.codeproject.com/learning/hillman"title=""><imgsrc="http://www.codeproject.com/images/brenda-hillman.jpg"alt="Air in the Epic"/></a><pclass="slug">Brenda Hillman Essays </p><h3class="title"><ahref="http://www.codeproject.com/learning/hillman"title="Air in the Epic"class="title">Air in the Epic</a></h3><pclass="author">Brenda Hillman</p></li>
删除 inline 样式

最后,你需要去掉 inline 样式。 在这一天,inline 风格很少会被使用。 它们与HTML紧密相连,当字体> 标签运行猖獗的时候,它们就像那样。 如果使用内联样式替代特殊性,那么本文中建议的更改应该已经帮助你避免特殊性战争,有效地消除内联样式的需要。

例如这里 inline 样式:

<spanclass="text-indent: 1em">Skittles are tasty</span>

可以轻松转换为可以在整个文档中应用的类,例如:

.indent {text-indent: 1em:}

如果你选择接受它的任务,那么你应该找到所有的inline 样式实例,看看你可以在哪里使这些样式成为可以移植的辅助工具。 你使用的属性可以很容易地成为可以移植样式,可以在它的他文本实例中重用。

试试吧,这对你很有用 !

你可以用同样的方法来重新构造你的CSS。 通过修复CSS的内容,你可以获得一个静态和功能的感觉,而开始使站点的样式更好。

但是跟我一起,因为我们还没有完成。 对于你的CSS过程,我们还有两个阶段,可以完全从你的CSS中找到邪恶,同时也可以让你的所有前端开发人员都在你身后留下一个美好的behind。

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

用于进一步阅读的链接

这篇文章是由 Denise R 写的。 of。Denise是网络设计的专家,是一家拥有 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  REF  arc  META  架构  refactor  
相关文章