CSS最佳实践
[*]发起各人在根元素声明全部需要使用到的样式，例如字体、颜色、巨细等，这样你在誊写盒子样式的时间会比力方便（自定义属性一样平常都是语义化标签）
[*]尽量使用相对单元（例如em），在html设置字体巨细，其他盒子使用相对单元，这样你可以通过调整html的字体巨细来达到调整全部字体的目的
[*]自顶向下誊写css样式，养成良好习惯，配合@media媒体查询实现响应式布局
:root
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 体现<html>元素，除了优先级更高之外，与html 选择器相同。
/* 选择文档的根元素（HTML 中的 <html>） */
:root {
background: yellow;
}
声明全局 CSS 变量
在声明全局 CSS 变量时 :root 会很有用：
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}
使用 CSS 自定义属性
[*]自定义属性是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用
[*]由自定义属性标志设定值（比如： --main-color: black;）
[*]由 var() 函数来获取值（比如： color: var(--main-color);）
[*]自定义属性在某个地方存储一个值，然后在其他很多地方引用它
[*]另一个好处是语义化的标识。比如，--main-text-color 会比 #00ff00 更易理解
[*]自定义属性受级联的约束，并从其父级继承其值
基本用法
声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有用的 CSS 值
和其他属性一样，自定义属性也是写在规则集之内的，如下：
element {
--main-bg-color: brown;
}
注意，规则集所指定的选择器定义了自定义属性的可见作用域。
通常的最佳实践是定义在根伪类 :root下，这样就可以在 HTML 文档的任何地方访问到它了：
:root {
--main-bg-color: brown;
}
注意
自定义属性名是巨细写敏感的，--my-color 和 --My-color 会被以为是两个不同的自定义属性
Var()函数
如前所述，使用一个局部变量时用 var() 函数包裹以体现一个合法的属性值：
element {
background-color: var(--main-bg-color);
}
自定义属性的继承性
自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被使用。
<div class="one">
<div class="two">
<div class="three"></div>
<div class="four"></div>
</div>
</div>
.two {
--test: 10px;
}
.three {
--test: 2em;
}
在这个情况下， var(--test) 的效果分别是：
[*]对于元素 class="two" ：10px
[*]对于元素 class="three" ：2em
[*]对于元素 class="four" ：10px （继承自父属性）
[*]对于元素 class="one" ：非法值，会变成自定义属性的默认值
注意，这些是自定义属性，并不是你在其他编程语言中遇到的实际的变量。这些值仅当需要的时间才管帐算，而并不会按其他规则进行保存。
自定义属性备用值
用 var()函数可以定义多个备用值（fallback value），当给定值未定义时将会用备用值替换。
备注： 备用值并不是用于实现浏览器兼容性的。如果浏览器不支持 CSS 自定义属性，备用值也没什么用。它仅对支持 CSS 自定义属性的浏览器提供了一个备份机制，该机制仅当给定值未定义或是无效值的时间见效。
[*]函数的第一个参数是自定义属性的名称。
[*]如果提供了第二个参数，则体现备用值
[*]当自定义属性值无效时见效。第二个参数可以嵌套，但是不能继承平铺展开下去了
.two {
color: var(--my-var, red); /* Red if --my-var is not defined */
}
.three {
background-color: var(
--my-var,
var(--my-background, pink)
); /* pink if --my-var and --my-background are not defined */
}
.three {
background-color: var(
--my-var,
--my-background,
pink
); /* Invalid: "--my-background, pink" */
}
第二个例子展示了如何处置处罚一个以上的 fallback。该技术大概会导致性能题目，因为它花了更多的时间在处置处罚这些变量上。
JavaScript 中的值
在 JavaScript 中获取或者修改 CSS 变量和操纵平常 CSS 属性是一样的：
// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");
// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");
// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);
最佳单元实践
1. px（像素）
[*]描述：绝对单元，基于体现设备的物理像素点。尽管称为“像素”，但在高分辨率屏幕上大概会有所不同。
[*]特点：
[*]提供了准确的尺寸控制。
[*]不随浏览器设置或父元素字体巨细的变化而变化。
[*]适用场景：当你需要固定的、不可缩放的尺寸时使用，例如细线边框、图标巨细等。
div {
width: 200px; /* 固定宽度 */
}
2. em
[*]描述：相对单元，相对于当前元素的字体巨细。如果父元素设置了字体巨细，则 em 的值基于该字体巨细计算。
[*]特点：
[*]允许根据文本巨细调整布局。
[*]如果嵌套元素较多，大概导致复杂度增加，因为每个层级的字体巨细都会影响下一层级。
[*]适用场景：适用于盼望随着父元素的字体巨细变化而变化的设计部分，如段落、标题等。
p {
font-size: 1.5em; /* 相对于父元素字体大小放大1.5倍 */
}
3. rem（root em）
[*]描述：类似于 em，但它是相对于根元素（即 <html> 标签）的字体巨细来计算。
[*]特点：
[*]简化了响应式设计中的尺寸管理，因为它只依靠于根元素的字体巨细。
[*]避免了 em 大概导致的嵌套层级题目。
[*]适用场景：非常适合用于整个页面的基础布局和排版，因为它提供了更划一的尺寸关系。
html {
font-size: 16px;
}
div {
font-size: 1.2rem; /* 相对于根元素字体大小放大1.2倍 */
}
4. vw 和 vh（视窗宽度和高度百分比）
[*]描述：1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
[*]特点：
[*]动态地适应用户的屏幕尺寸。
[*]特别适合创建全屏或基于视口比例的设计。
[*]适用场景：当需要设计可以或许自适应不同屏幕尺寸的内容时非常有用，比如全屏背景图、响应式布局等。
div {
width: 50vw; /* 占据视口宽度的一半 */
height: 30vh; /* 占据视口高度的30% */
}
5. %（百分比）
[*]描述：相对单元，相对于包含块（通常是父元素）的宽度或高度。
[*]特点：
[*]提供了一种机动的方式来定义元素巨细，使其可以根据其容器巨细自动调整。
[*]可以应用于宽度、高度、内边距、外边距等多个属性。
[*]适用场景：流体布局中，尤其是那些需要根据父容器巨细动态调整自身巨细的元素。
div {
width: 80%; /* 占据父元素宽度的80% */
}
6. fr（网格分数单元）
[*]描述：仅在 CSS Grid 布局中使用的单元，体现可用空间的一部分。
[*]特点：
[*]提供了一种简朴的方法来分配网格轨道的空间。
[*]可以轻松创建复杂的网格布局。
[*]适用场景：在构建基于网格的布局时，用于定义行和列的巨细。
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* 第二列是第一列宽度的两倍 */
}
@media
@media CSS@规则可用于基于一个或多个媒体查询的效果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。
备注： 在 JavaScript 中，可以使用 CSSMediaRuleCSS 对象模型接口访问使用 @media 创建的规则。
语法
@media at 规则可置于你代码的顶层或嵌套至其他任何的 at 条件规则组中。
/* 在你的代码的顶层 */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
/* 嵌套至其他的 at 条件规则中 */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}
媒体类型
媒体类型（media type）描述设备的一样平常种别。除非使用 not 或 only 逻辑运算符，否则媒体类型是可选的，并且会（隐式地）应用 all 类型。
[*] all
适用于全部设备
适用于在打印预览模式下在屏幕上查看的分页材料和文档
[*] screen
主要用于屏幕
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]