CSS。警报{...}。警报。是错误{...}。警报p{。..}.alert.is-errorp{}在上面的例子中，alert类属于module类，is-error类属于status类。然后根据需要从这些类中的每一个继承样式。选择解决方案使用哪种方法（如果有的话）完全取决于您。您认为给定网站的最佳选择是什么。通常，OOCSS和SMACSS的可靠组合会很好地工作，您可以根据自己的喜好从每种方法中借鉴原则。性能驱动的选择器CSS中的大部分注意力都集中在属性和值上，而CSS中的选择器经常在没有意识到的情况下被滥用。我们总是认为将这些样式应用到正确的元素上是完美的，但这是一个坏主意。CSS中元素的选择也会影响性能，包括页面呈现的速度，以及样式在整个站点架构中的实用性和模块化程度。保持选择器短保持CSS选择器尽可能短有几个好处。这些包括最小化特异性，允许更好的继承和可移植性，以及提高效率。长的、高质量的选择器会降低性能，因为它们会强制浏览器从右到左呈现每个选择器类型。更具体地说，它们还会给所有其他选择器带来负担。/*不好*/headernavullia{...}/*好*/.primary-link{...}/*不好*/buttonstrongspan{...}buttonstrongspan.callout{....}/*Good*/buttonspan{...}button.callout{...}在上面的代码中，第一个选择器非常具体，但我们可以识别并呈现。此外，在这种情况下使用类大大减少了识别元素父元素的需要，允许元素位置随时间变化而不会破坏任何样式。第二个示例包含比第一个更短的选择器，但可以通过为每个选择器提供相同级别的特异性来改进它。避免过于具体的选择器，作为回报，如果元素的顺序发生变化，它们不太可能中断。摆脱一些单独的选择器单元并赋予所有选择器相同的强度，可以使它们更好地协同工作。使用短选择器的总体目标是降低特异性并创建更简洁、更宽松的代码。支持类很棒，它们呈现速度很快，允许重用样式，并且已经广泛用于构建网站。但是，在使用类时要遵守一些常见的做法，以确保它们得到适当的利用。因为选择器是从右向左呈现的，所以一定要注意键选择器。键选择器是最后一个最右边的选择器单元格。键选择器非常重要，因为它标识浏览器将查找的第一个元素。如果键选择器是坏的，浏览器就没用了。不要害怕仅仅为了性能优势而使用一个类来变得更加独特。另外，不要在元素前加上类选择器。这样做会阻碍将这些样式轻松应用于不同的元素，并增加选择器的整体特异性。/*坏*/#containerheadernav{...}/*好*/.primary-nav{...}/*坏*/article.feat-post{...}/*好*/.feat-post{...}同样值得注意的是尽可能远离ID选择器，因为它们太具体并且不允许任何重复。归根结底，使用ID与使用!important没有什么不同。代码重用的最大性能缺陷之一是文件过大和不必要的浏览器渲染。最小化CSS文件大小的快速方法是重用尽可能多的样式。任何重复的样式或界面模式都应该组合起来以允许共享代码。如果两个模块共享背景、圆角和框阴影，则没有理由两次显式声明相同的样式。相反，它们可以组合在一个类中，允许样式只编写一次然后共享。重用代码也不必以牺牲语义为代价。一种技术是通过用逗号分隔选择器将它们组合在一起，从而允许在两个选择器之间继承相同的样式。在上述OOCSS和SMACSS方法中经常看到的另一种方法涉及将样式绑定到一个类，然后在同一元素上使用多个类。/*坏消息*/.news{background:#eee;边界半径：5px；box-shadow:inset01px2pxrgba(0,0,0,.25);}.social{background:#eee;边框半径：5px；box-shadow:inset01px2pxrgba(0,0,0,.25);}.news,.social{background:#eee;边界半径：5px；box-shadow:inset01px2pxrgba(0,0,0,.25);}/*更好*/.model{background:#eee;边界半径：5px；box-shawdow:inset01px2pxrgba(0,0,0,.25);}只要代码共享和重用，并且整体文件大小减小，采用哪种方法并没有太大区别.缩小和压缩文件简单地删除重复和不必要的代码是减小文件大小的最佳方法，但还有其他方法。一种方法涉及缩小和压缩HTML、CSS、JavaScript文件等文件。此外，图像可能会被压缩，删除任何不必要的注释和颜色配置文件。gzip压缩一种更流行的文件压缩类型称为gzip。gzip压缩采用常见文件，包括HTML、CSS、JavaScript等，并识别要压缩的相似字符串。识别出的匹配字符串越多，可以压缩的文件就越小，从而允许从服务器向浏览器发送更小的文件。设置gzip相当简单，HTML5模板团队为此做了大量工作。要压缩gzip文件，您需要将.htaccess文件添加到您的Web服务器的根目录，并标记要压缩的特定文件。文件名开头的点是正确的，因为.htaccess文件是一个隐藏文件。在HTML5样板Apache服务器配置中，它们指示应将gzip压缩应用于哪些文件。请记住，此压缩代码应位于Web服务器根目录中的.htaccess文件中。此外，值得注意的是.htaccess文件仅适用于ApacheWeb服务器，这需要启用以下模块。mod_setenvif.cmod_headers.cmod_deflate.cmod_filter.cmod_expires.cmod_rewrite.c通常这不是问题，某些网络服务器甚至可能会为您设置压缩。毕竟，压缩文件也符合Web服务器的最佳利益。测量压缩在GoogleChrome网络浏览器中，网络检查器提供了大量关于性能的数据，尤其是在“网络”选项卡中。此外，有些网站可以帮助确定是否启用了gzip压缩。“网络”选项卡标识浏览器中加载的每个文件并显示文件大小和加载时间。请注意gzip如何将文件大小减少了大约60%。查看文件的请求标头可以明确确定浏览器支持哪些类型的压缩编码。在这种情况下，gzip、deflate和sdch都受支持，如请求标头中所述。图像压缩有助于减小文本文件的大小，但您可以通过压缩图像的文件大小来获得更好的效果。网站上所有图像的总文件大小加起来很快，压缩图像将大大有助于控制文件大小。许多人避免压缩图像，因为担心压缩会降低图像本身的质量。在大多数情况下，这是不正确的，图像可以以无损方式压缩，允许从图像中删除不必要的颜色配置文件和注释，而不会改变图像质量。有一些工具可以帮助压缩图像，其中最好的两个是适用于Mac的ImageOptim和适用于Windows的PNGGauntlet。这两种服务都压缩最常用的图像格式，特别是JPG和PNG文件。还应该注意的是，通过height和width属性在HTML中设置图像的尺寸确实有助于更快地呈现页面，为图像留出适当的空间。请理解，这些属性仅用于确定图像的确切尺寸，而不是用于缩小图像。使用较大的图像然后使用高度和宽度属性将其缩小是一种不好的做法，因为它会加载比需要更多的数据。减少HTTP请求除了文件大小，网站发出的HTTP请求数量是最大的性能缺陷之一。每次向服务器发出请求时，页面加载时间都会增加。有些请求必须在其他请求开始之前完成，太多的请求会使服务器膨胀。减少HTTP请求数量的一种方法（可能也是最简单的方法）是合并相似的文件。具体来说，将所有的CSS文件合并为一个，将所有的JavaScript文件合并为一个。合并这些文件然后压缩它们会创建一个微小的HTTP请求。一般来说网页的CSS应该加载在开头header文档的header，而网页的javascript应该在最后加载，就在结束body标记之前。这些独特位置的原因是CSS可以在加载站点的其余部分时加载。另一方面，JavaScript一次只能呈现一个文件，因此禁止加载任何其他文件。这里需要注意的是，JavaScript文件是在页面本身完成呈现后异步加载的。另一个注意事项是需要JavaScript来帮助呈现页面，例如HTML5SHIV。ImageSprites在CSS中将图像拼接在一起涉及在多个元素之间使用单个背景图像。这里的目标是减少使用多个背景图像发出的HTTP请求的数量。要创建精灵，可以将一些常用的背景图像排列成单个图像。然后使用CSS将精灵作为背景图片添加到元素中，并使用background-position属性显示正确的背景图片。想象一下背景图像在元素后面滑动，只是为了在给定元素上显示正确的背景图像。例如，如果一个元素是16像素宽x16像素高，它只能暴露一个16像素x16像素的背景图像，而背景图像的其余部分被隐藏。比如我们文本编辑器菜单的精灵，我们可以用ps将多个图标拼接在一起。要使用上面的图像精灵，您可以使用图像精灵作为span元素的背景来创建菜单。然后，使用类改变图像精灵的背景位置，可以相应地显示不同的图标。HTML

• 粗体文本
• 斜体文本
• 下划线文本
• 调整文本大小
• 项目符号文本
• 数字文本
• 引用文本
• 左对齐文本
• 居中对齐文本/li>
• 右对齐文本

CSSul{margin:0;填充：0；}li{浮动：左；列表样式：无；margin:2px;}lia{background:linear-gradient(#fff,#eee);边框：1px实心#ccc；边界半径：3px；a:hover{border-color:#999;}lispan{background:url("sprite.png")00不重复；颜色：透明；显示：块；字体：0/0a；高度：16px；width:16px;}.italic{background-position:-16px0;}.underline{background-position:-32px0;}.size{background-position:-48px0;}.bullet{background-position:-64px0;}.number{背景位置：-80px0;}.quote{背景位置：-96px0;}.left{背景位置：-112px0;}.center{背景位置：-128px0;}.right{background-position:-144px0;}图片数据URI另外，图片的编码数据可以通过数据URI直接包含在HTML和CSS中，不需要使用spriting图片，从而完全消除需要HTTP请求使用图像数据URI非常适用于可能永远不会改变的小图像，并且HTML和CSS可以大量缓存。但是，数据URI存在一些问题。它们很难更改和维护，因此必须生成另一种编码。此外，它们不适用于旧版浏览器，尤其是InternetExplorer7及以下版本。如果使用数据uri有助于减少一些HTTP请求，并且HTML或CSS可以缓存很多，那么好处往往大于风险。一些帮助生成数据URI的工具包括转换器和模式生成器。不过要小心，并始终仔细检查以确保实际数据URI的权重小于实际图像。HTMLCSSdiv{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAO6m73+X/bdxogujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQAyIyYy0nBAGgAAAABJRU5ErkJggg==")repeat;}缓存公共文件另一种帮助减少HTTP请求和更快地提供页面的方法是缓存常见文件。Certainfilescanbecachedwhenthe页面首先加载。现在浏览器不必在重复访问一段时间后再次请求同一个文件。时间段由您决定，具体取决于您希望用户保留特定文件类型的时间。与gzip文件一样，缓存文件的过期标头可以在.htaccess文件中设置。同样，HTML5Boilerplate团队领先于我们。在他们的ApacheServerConfigs中，有一个专门用于设置expires标头的文件。图片、视频、网络字体和常见媒体类型通常会缓存一个月，而CSS和JavaScript文件通常会缓存一年。如果CSS或任何其他文件每年更改一次以上，则需要更改文件名，最好是版本化，以便加载。或者，可以将Expiration标头更改为更短的时间段。ExpiresByTypetext/css"accessplus1year"ExpiresByTypeapplication/javascript"accessplus1year"将"accessplus1year"的值改成"accessplus1week"更适合周变但不使用单独的文件名控制VersionCSS和JavaScript文件。请参阅mod_expires语法以了解可接受的过期标头值。参考W3C标准