首页 > 其他分享 >【CSS】609- 改善CSS的10种最佳做法

【CSS】609- 改善CSS的10种最佳做法

时间:2022-11-29 11:05:01浏览次数:46  
标签:10 ... gradient 609 rgba 使用 选择器 CSS



【CSS】609- 改善CSS的10种最佳做法_预处理

CSS似乎是一种非常简单的语言,很难在其中犯错误。你只需添加样式规则,就可以对网站进行样式设置了,对吗?对于只需要几个CSS文件的小型网站,情况可能就是这样。但是在大型应用程序中,样式可能会迅速失控。你如何使它们易于管理?

事实是,就像其他任何语言一样,CSS可能会影响或破坏你的设计。这是CSS的10条最佳实践技巧,可以帮助你从样式中获得最大的收益。

1.你真的需要一个框架吗?

首先,确定你是否真的需要使用CSS框架。现在,有许多轻量级的替代健壮框架。通常,你不会使用框架中的每个选择器,因此你的软件包将包含无效代码。

如果仅对按钮样式使用,则将样式外包给你的CSS文件,然后删除其余样式。另外,你可以使用DevTools中的代码覆盖率来识别未使用的CSS规则。

【CSS】609- 改善CSS的10种最佳做法_选择器_02

要打开它,请在“工具”面板中搜索Coverage。你也可以通过单击Ctrl+ Shift+ 打开“工具”面板P。打开后,单击重新加载图标开始录制。红色显示的所有内容均未使用。

你可以在上面的示例中看到,它说没有使用98%的CSS。请注意,实际上并非如此,某些CSS样式仅在用户与网站互动后才应用。移动设备的样式也标记为未使用的字节。因此,在删除所有内容之前,请确保确认确实没有在任何地方使用它。

2、首选使用CSS方法

考虑为你的项目使用CSS方法。CSS方法用于在CSS文件中创建一致性。它们有助于扩展和维护你的项目。这是我可以推荐的一些流行的CSS方法。

BEM

BEM(块,元素,修饰符)是最流行的CSS方法之一。它是命名约定的集合,可用于轻松制作可重复使用的组件。命名约定遵循以下模式:

.block { ... }
.block__element { ... }
.block--modifier { ... }
  • .block:块代表一个组件。它们是独立的实体,并且对自己有意义。
  • .block__element:这些是的一部分.block。它们没有独立的含义,必须绑定到一个块上。
  • .block--modifier:这些用作块或元素上的标志。我们可以使用它们来更改元素的外观,行为或状态。例如,要使用隐藏标记,我们可以说.block--hidden。

ITCSS

倒三角CSS通过将不同的图层引入不同的特性来帮助你更好地组织文件。你走得越深,就越具体。

【CSS】609- 改善CSS的10种最佳做法_选择器_03

OOCSS

面向对象的CSS或OOCSS具有两个主要原理。

分离结构和皮肤
这意味着你要与结构代码分开定义视觉效果。实际上这是什么意思?

/* Instead of  */
.box {
width: 250px;
height: 250px;
padding: 10px;
border: 1px solid #CCC;
box-shadow: 1px 2px 5px #CCC;
border-radius: 5px;
}


/* Do */
.box {
width: 250px;
height: 250px;
padding: 10px;
}


.elevated {
border: 1px solid #CCC;
box-shadow: 1px 2px 5px #CCC;
border-radius: 5px;
}

2、分隔容器和内容
这意味着你不希望任何元素取决于其位置。相同的元素无论在页面上的什么位置,都应看起来相同。

/* Instead */.main span.breadcumb { ... }/* Do */.breadcrumb { ... }

3、设置预处理器

设置预处理器可以使你受益匪浅。预处理器是一种工具,可让你使用CSS中不存在的高级功能。这些可能是循环变量甚至函数之类的东西。

有很多预处理器。最著名的三个大概就是Sass,Less和Stylus。我建议使用Sass,因为它是一个繁荣的社区,并且你可以在网上找到它的大量文档。

那么,预处理器如何为你提供帮助?更好地组织你的风格

预处理程序可帮助你更好地组织样式。他们具有将你的文件分解为较小的可重用文件的能力。这些可以相互导入,也可以以后分别导入你的应用程序。

// Import different modules into one SCSS file
@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 {
...
}
}
}
}
}

分层结构使更容易可视化不同元素如何结合在一起。

浏览器自动为你的规则添加前缀

CSS中有一些非标准或实验性功能的前缀。不同的浏览器为其使用不同的前缀,例如:

  • -webkit-:适用于基于WebKit的浏览器,例如Chrome,Safari或Opera的较新版本。
  • -moz-:适用于Firefox。
  • -o-:适用于旧版Opera。
  • -ms-:用于IE和Edge。

为了支持所有主流浏览器,我们必须多次定义某些属性。

.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%);
background: -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%);
background: linear-gradient(to bottom, 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);
}

预处理器通过mixins帮助我们解决此问题-可以代替硬编码值使用的函数。

@mixin 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%);
background: -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%);
background: linear-gradient(to bottom, 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);
}


.gradient {
@include gradient();
}

不必一遍又一遍地写出相同的内容,而只需mixin在需要时添加即可。

使用后处理器

更好的选择是后处理器。一旦CSS由预处理器生成,则后处理器可以运行其他优化步骤。最受欢迎的后处理器之一是PostCSS。

你可以使用PostCSS来自动为CSS规则添加前缀,因此你不必担心会遗漏主要的浏览器。他们使用“ 我可以使用”中的值,因此它始终是最新的。

另一个很棒的后处理器是autoprefixer。使用autoprefixer,当你要支持最后四个版本时,无需在CSS文件中写入任何浏览器前缀就可以完成所有工作!

const autoprefixer = require('autoprefixer')({
browsers: [
'last 4 versions',
'not ie < 9'
]
});

使用配置进行一致的设计

除mixins外,你还可以选择使用变量。用短线连接一起,你可以执行设计规则。

// Font definitions
$font-12: 12px;
$font-21: 21px;
// Color definitions
$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: 1em 0;
}

对于其他属性(例如,填充,边框或背景),也是如此。

【CSS】609- 改善CSS的10种最佳做法_css_04

6、减少冗余

这与上一点紧密相关。有时很难发现冗余,特别是当两个选择器中的重复规则未遵循相同顺序时。但是,如果你的类仅在一个或两个规则中有所不同,则最好外包这些规则并将它们用作额外的类。代替这个:

<style>
.warning {
width: 100%;
height: 50px;
background: yellow;
border-radius: 5px;
}


.elevated-warning {
width: 100%;
height: 50px;
font-size: 150%;
background: yellow;
box-shadow: 1px 2px 5px #CCC;
border-radius: 5px;
}
</style>


<div class="warning">⚠️</div>
<div class="elevated-warning">

标签:10,...,gradient,609,rgba,使用,选择器,CSS
From: https://blog.51cto.com/u_11887782/5894298

相关文章

  • 【Web技术】610- Web上的图片技巧
    译者:飘飘  作者:Ahmad​​https://ishadeed.com/article/image-techniques/​​前端开发者在构建网站时需要做的一个决定是添加图片的技术。它可以是一个HTML​​<img>​......
  • UVA10129 Play on Words
    单词\(Play\)\(on\)\(Words\)一、题目描述输入\(n(n≤100000)\)个单词,是否可以把所有这些单词排成一个序列,使得每个单词的第一个字母可上一个单词的最后一个字母相同(......
  • acw 102. 最佳牛围栏
     求一个序列中平均值最大的子序列(长度为m) 二分这个平均值,检验答案:每个数-average,看能否找到长度为m的序列 #include<iostream>#include<algorithm>#incl......
  • 2022年鲜为人知的CSS 特性了解起来~
    前言随着CSS的不断发展,一些很酷且有用的属性要么完全被忽视,要么由于某种原因不像其他常见属性那样被开发者熟练应用。这篇文章我们将一起学习那些CSS中陌生但非常有用的CS......
  • Python 10 函数
    函数创建例:【下面的一定要看懂】#作者:咸瑜#代码时间:2022年11月28日defcalc(a,b):returna+b#传参方式1[自动"位置"传参]res=calc(1,9)print(......
  • win10 你需要trustedinstaller的权限才能修改
    win10你需要trustedinstaller的权限才能修改 选择一个文件或目录,右击属性,选择安全。 选择高级 选择更改。选择当前登陆用户或管理员,同时选择最左下角》使用......
  • CSS伪类使用详解
    基本描述CSS伪类是很常用的功能,主要应用于选择器的关键字,用来改变被选择元素的特殊状态下的样式。伪类类似于普通CSS类的用法,是对CSS选择器的一种扩展,增强选择器的功能。......
  • Acwing100 增减序列
    给定一个长度为n的数列每次可以选择一个区间 使每个数都加一或者都减一。 求至少需要多少次操作才能使数列中的所有数都一样,并求出在保证最少次数的前提下,最终得到......
  • 深入理解css 笔记(完)
    一个网站,从看起来还可以,到看起来非常棒,差别在于细节。在实现了页面里某个组件的布局并写完样式之后,不要急着继续,有意识地训练自己,以挑剔的眼光审视刚刚完成的代码。如果增......
  • Css单位rem和em的区别
    remrootem:root{}根选择器->html{}1rem=根元素字体大小(font-size)emem相对长度单位,相对于父元素的长度单位(font-size)先找自身的font-size,再找父元素的font-......