CSS似乎是一种相当简单的语言，很难出错。您只需添加您的规则来设置您网站的样式就大功告成了，也许对于只需要几个CSS文件的小型网站来说。但在大型应用程序中，样式很快就会失控。你如何控制它们？事实上，就像任何其他语言一样，CSS可以成就或破坏你的设计。这里有10个CSS技巧-可帮助您充分利用样式的最佳实践。1.你真的需要框架吗？首先，确定您是否真的需要使用CSS框架。现在，有许多轻量级和健壮的替代框架。通常，您不会使用框架中的每个选择器，因此您的包将包含死代码。如果您只在按钮上使用样式，请将它们外包给您自己的CSS文件，而忽略其余部分。此外，您可以使用DevTools中的代码覆盖率来识别未使用的CSS规则。要打开它，请在“工具”面板中搜索Coverage，您可以通过单击Ctrl+Shift+P打开它。打开后，单击重新加载图标开始录制。以红色显示的所有内容均未使用。你可以在上面的例子中看到，它表示98%的CSS没有被应用。请注意，实际情况并非如此——一些CSS样式是在用户与网站交互后应用的。移动设备的样式也被标记为未使用的字节。因此，在删除所有内容之前，请确认它确实没有在任何地方使用。2.更喜欢使用CSS方法论考虑为您的项目使用CSS方法论。CSS方法论用于在您的CSS文件中创建一致性，它们有助于扩展和维护您的项目。以下是我可以推荐的一些流行的CSS方法。/BEM/BEM(Block,Element,Modifier)是比较流行的CSS方法论之一。它是一组命名约定，可用于轻松制作可重用的组件。命名约定遵循以下模式：.block{...}.block__element{...}.block--modifier{...}block-块，代表一个组件。它们是具有自身意义的独立实体。block__element-这些是.block的一部分。它们没有独立的意义，必须绑定到一个块上。block--modifier-这些被用作块或元素上的标志。我们可以使用它们来改变元素的外观、行为或状态。例如，要使用隐藏标志，我们可以说.block--hidden。/ITCSS/InvertedTriangleCSS是InvertedTriangleCSS的缩写，它通过引入不同的层到不同的特性来帮助你更好地组织你的文件。越深入，越具体。/OOCSS/面向对象的CSS或OOCSS有两个主要原则。1.结构与皮肤分离这意味着您将视觉效果与结构代码分开定义。你是什??么意思？/*而不是*/.box{width:250px;height:250px;padding:10px;border:1pxsolid#CCC;box-shadow:1px2px5px#CCC;border-radius:5px;}/*像这样*/.box{width:250px;height:250px;padding:10px;}.elevated{border:1pxsolid#CCC;box-shadow:1px2px5px#CCC;border-radius:5px;}2.将容器和内容分开，这意味着你不'想让任何元素依赖于它的位置。相同的元素无论在页面的哪个位置，都应该看起来相同。/*而不是*/.mainspan.breadcumb{...}/*像这样*/.breadcrumb{...}3.设置预处理器设置预处理器可以让你受益匪浅。预处理器是一种工具，可让您使用CSS中不存在的高级功能，这些功能可能是循环变量甚至函数。预处理器有很多，最著名的可能是Sass、Less和Stylus三个。我推荐Sass，因为它有蓬勃发展的社区和可在Web上找到的大量文档。那么，预处理器如何帮助您呢？/更好地组织您的样式/它们能够将您的文件分解为更小的可重用文件，这些文件可以相互导入，或者稍后单独导入您的应用程序。//将不同的模块导入到一个SCSS文件中@import'settings';@import'tools';@import'generic';@import'elements';@import'objects';@import'components';@import'trumps';/嵌套选择器/另一个提高可读性的好方法是嵌套选择器，这是CSS所缺乏的一个简单而强大的功能。.wrapper{.sidebar{&.collapsed{display:none;}.list{.list-item{...&.list-item--active{...}}}}}层级结构使得不同的元素它们之间的联系更加直观。/Automaticallyaddprefixestoyourrules/CSS中有一些非标准或实验性的前缀，不同的浏览器为它们使用不同的前缀，例如：webkit-：适用于基于WebKit的浏览器，如Chrome、Safari或更新版本歌剧。moz-:Firefoxo-:OlderOperaversionsms-:IEandEdge为了支持所有主流浏览器，我们必须多次定义某些属性。.gradient{background:rgb(30,87,153);background:-moz-linear-gradient(top,rgba(30,87,153,1)0%,rgba(41,137,216,1)50%,rgba(32,124,202,1)51%,rgba(125,185,232,1)100%);背景:-webkit-linear-gradient(top,rgba(30,87,153,1)0%,rgba(41,137,216,1)50%,rgba(32,124,202,1)51%,rgba(125,185,232,1)100%);背景:线性渐变(tobottom,rgba(30,87,153,1)0%,rgba(41,137,216,1)50%,rgba(32,124,202,1)51%,rgba(125,185,232,1)100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799',endColorstr='#7db9e8',GradientType=0);}预处理器可以帮助我们使用blend函数来解决对于这个问题，可以使用mixin函数来代替硬编码值。@mixingradient(){background:rgb(30,87,153);background:-moz-linear-gradient(top,rgba(30,87,153,1)0%,rgba(41,137,216,1)50%,rgba(32,124,202,1)51%,rgba(125,185,232,1)100%);背景:-webkit-linear-gradient(top,rgba(30,87,153,1)0%,rgba(41,137,216,1)50%,rgba(32,124,202,1)51%,rgba(125,185,232,1)100%);背景：线性渐变（tobottom，rgba（30,87,153,1）0％，rgba（41,137,216,1）50％，rgba（32,124,202,1）51％，rgba（125,185,232,1）100％）;过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799',endColorstr='#7db9e8',GradientType=0);}.gradient{@includegradient();}不要一遍又一遍地写同样的东西，只要在需要。/使用后处理器/更好的选择是后处理器。一旦CSS由预处理器生成，后处理器就可以运行其他优化步骤。更流行的后处理器之一是PostCSS。CSS规则可以自动加上PostCSS前缀，不用担心错过主流浏览器。另一个很棒的后处理器是autoprefixer。使用autoprefixer，当你想要支持最新的四个版本时，它可以完成所有工作，而无需在你的CSS文件中写入任何供应商前缀！constautoprefixer=require('autoprefixer')({browsers:['last4versions','notie<9']});/使用配置实现一致的设计/除了mixins，你还可以选择使用变量。与烧结机结合使用，您可以强制执行设计规则。与linter结合使用，您可以强制执行设计规则。//字体定义$font-12:12px;$font-21:21px;//颜色定义$color-white:#FAFAFA;$color-black:#212121;4.使用标记代替CSS现在，让我们转向实际的CSS。这一点经常被忽视，而且通常，您可以通过简单地使用正确的HTML元素来减小CSS包的大小。假设您的标题包含以下规则：span.heading{display:block;font-size:1.2em;margin-top:1em;margin-bottom:1em;}您正在使用span元素作为标题，您可以覆盖默认显示、间距或字体样式。这可以通过使用h1、h2或h3来避免。默认情况下，它们有你想用其他元素实现的样式，你可以瞬间去掉四个不必要的规则，也更语义化。5.使用短属性为了进一步减少规则的数量，总是尝试使用简写属性。对于上面的示例，我们可以说：.heading{margin:1em0;}其他属性（如填充、边框或背景）也是如此。6.减少冗余这与上一点密切相关。冗余有时很难发现，尤其是当重复规则在两个选择器中的顺序不同时。但是，如果您的课程仅在一两个规则上有所不同，那么最好将这些规则外包并将它们用作附加课程。而不是这个。<样式>.warning{width:100%;height:50px;background:yellow;border-radius:5px;}.elevated-warning{width:100%;height:50px;font-size:150%;background:yellow;box-shadow:1px2px5px#CCC;border-radius:5px;}
