CSS最佳实践

前进之路  论坛元老 | 2025-3-15 01:25:52 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1539|帖子 1539|积分 4617

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x

  • [color="skyblue"]发起各人在根元素声明全部需要使用到的样式，例如字体、颜色、巨细等，这样你在誊写盒子样式的时间会比力方便（自定义属性一样平常都是语义化标签）
  • [color="skyblue"]尽量使用相对单元（例如em），在html设置字体巨细，其他盒子使用相对单元，这样你可以通过调整html的字体巨细来达到调整全部字体的目的
  • [color="skyblue"]自顶向下誊写css样式，养成良好习惯，配合@media媒体查询实现响应式布局
:root

:root 这个 CSS [color=“skyblue”]伪类匹配文档树的根元素。对于 HTML 来说，:root 体现<html>元素，除了优先级更高之外，与html 选择器相同。
  1. /* 选择文档的根元素（HTML 中的 <html>） */
  2. :root {
  3.   background: yellow;
  4. }
复制代码
声明全局 CSS 变量

在声明全局 CSS 变量时 :root 会很有用：
  1. :root {
  2.   --main-color: hotpink;
  3.   --pane-padding: 5px 42px;
  4. }
复制代码
使用 CSS 自定义属性



  • 自定义属性是由 CSS 作者定义的，它包含的值可以在[color=“skyblue”]整个文档中重复使用
  • 由自定义属性标志设定值（比如： --main-color: black;）
  • 由 [color=“skyblue”]var() 函数来获取值（比如： color: var(--main-color);）
  • 自定义属性在某个地方存储一个值，然后在其他很多地方引用它
  • 另一个好处是[color=“skyblue”]语义化的标识。比如，--main-text-color 会比 #00ff00 更易理解
  • 自定义属性受级联的约束，并从其父级继承其值
基本用法

声明一个自定义属性，[color=“skyblue”]属性名需要以两个减号（--）开始，属性值则可以是任何有用的 CSS 值
和其他属性一样，自定义属性也是写在规则集之内的，如下：
  1. element {
  2.   --main-bg-color: brown;
  3. }
复制代码
注意，规则集所指定的选择器定义了自定义属性的可见作用域。
通常的最佳实践是定义在根伪类 :root下，这样就可以在 HTML 文档的任何地方访问到它了：
  1. :root {
  2.   --main-bg-color: brown;
  3. }
复制代码
注意

[color=“skyblue”]自定义属性名是巨细写敏感的，--my-color 和 --My-color 会被以为是两个不同的自定义属性
Var()函数

如前所述，使用一个局部变量时用[color=“skyblue”] var() 函数包裹以体现一个合法的属性值：
  1. element {
  2.   background-color: var(--main-bg-color);
  3. }
复制代码
自定义属性的继承性

[color=“skyblue”]自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被使用。
  1. <div class="one">
  2.   <div class="two">
  3.     <div class="three"></div>
  4.     <div class="four"></div>
  5.   </div>
  6. </div>
复制代码
  1. .two {
  2.   --test: 10px;
  3. }
  5. .three {
  6.   --test: 2em;
  7. }
复制代码
在这个情况下， var(--test) 的效果分别是：


  • 对于元素 class="two" ：10px
  • 对于元素 class="three" ：2em
  • 对于元素 class="four" ：10px （继承自父属性）
  • 对于元素 class="one" ：非法值，会变成自定义属性的默认值
注意，这些是自定义属性，并不是你在其他编程语言中遇到的实际的变量。这些值仅当需要的时间才管帐算，而并不会按其他规则进行保存。
自定义属性备用值

用 [color=“skyblue”]var()函数可以定义多个备用值（fallback value），当给定值未定义时将会用备用值替换。
备注： 备用值并不是用于实现浏览器兼容性的。如果浏览器不支持 CSS 自定义属性，备用值也没什么用。它仅对支持 CSS 自定义属性的浏览器提供了一个备份机制，该机制仅当给定值未定义或是无效值的时间见效。


  • 函数的第一个参数是自定义属性的名称。
  • 如果提供了第二个参数，则体现备用值
  • 当自定义属性值无效时见效。第二个参数可以嵌套，但是不能继承平铺展开下去了
  1. .two {
  2.   color: var(--my-var, red); /* Red if --my-var is not defined */
  3. }
  5. .three {
  6.   background-color: var(
  7.     --my-var,
  8.     var(--my-background, pink)
  9.   ); /* pink if --my-var and --my-background are not defined */
  10. }
  12. .three {
  13.   background-color: var(
  14.     --my-var,
  15.     --my-background,
  16.     pink
  17.   ); /* Invalid: "--my-background, pink" */
  18. }
复制代码
第二个例子展示了如何处置处罚一个以上的 fallback。该技术大概会导致性能题目，因为它花了更多的时间在处置处罚这些变量上。
JavaScript 中的值

在 JavaScript 中获取或者修改 CSS 变量和操纵平常 CSS 属性是一样的：
  1. // 获取一个 Dom 节点上的 CSS 变量
  2. element.style.getPropertyValue("--my-var");
  4. // 获取任意 Dom 节点上的 CSS 变量
  5. getComputedStyle(element).getPropertyValue("--my-var");
  7. // 修改一个 Dom 节点上的 CSS 变量
  8. element.style.setProperty("--my-var", jsVar + 4);
复制代码
最佳单元实践

1. px（像素）



  • 描述：绝对单元，基于体现设备的物理像素点。尽管称为“像素”，但在高分辨率屏幕上大概会有所不同。
  • 特点：

    • 提供了准确的尺寸控制。
    • 不随浏览器设置或父元素字体巨细的变化而变化。

  • 适用场景：当你需要固定的、不可缩放的尺寸时使用，例如细线边框、图标巨细等。
  1. div {
  2.   width: 200px; /* 固定宽度 */
  3. }
复制代码
2. em



  • 描述：相对单元，相对于当前元素的字体巨细。如果父元素设置了字体巨细，则 em 的值基于该字体巨细计算。
  • 特点：

    • 允许根据文本巨细调整布局。
    • 如果嵌套元素较多，大概导致复杂度增加，因为每个层级的字体巨细都会影响下一层级。

  • 适用场景：适用于盼望随着父元素的字体巨细变化而变化的设计部分，如段落、标题等。
  1. p {
  2.   font-size: 1.5em; /* 相对于父元素字体大小放大1.5倍 */
  3. }
复制代码
3. rem（root em）



  • 描述：类似于 em，但它是相对于根元素（即 <html> 标签）的字体巨细来计算。
  • 特点：

    • 简化了响应式设计中的尺寸管理，因为它只依靠于根元素的字体巨细。
    • 避免了 em 大概导致的嵌套层级题目。

  • 适用场景：非常适合用于整个页面的基础布局和排版，因为它提供了更划一的尺寸关系。
  1. html {
  2.   font-size: 16px;
  3. }
  5. div {
  6.   font-size: 1.2rem; /* 相对于根元素字体大小放大1.2倍 */
  7. }
复制代码
4. vw 和 vh（视窗宽度和高度百分比）



  • 描述：1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
  • 特点：

    • 动态地适应用户的屏幕尺寸。
    • 特别适合创建全屏或基于视口比例的设计。

  • 适用场景：当需要设计可以或许自适应不同屏幕尺寸的内容时非常有用，比如全屏背景图、响应式布局等。
  1. div {
  2.   width: 50vw; /* 占据视口宽度的一半 */
  3.   height: 30vh; /* 占据视口高度的30% */
  4. }
复制代码
5. %（百分比）



  • 描述：相对单元，相对于包含块（通常是父元素）的宽度或高度。
  • 特点：

    • 提供了一种机动的方式来定义元素巨细，使其可以根据其容器巨细自动调整。
    • 可以应用于宽度、高度、内边距、外边距等多个属性。

  • 适用场景：流体布局中，尤其是那些需要根据父容器巨细动态调整自身巨细的元素。
  1. div {
  2.   width: 80%; /* 占据父元素宽度的80% */
  3. }
复制代码
6. fr（网格分数单元）



  • 描述：仅在 CSS Grid 布局中使用的单元，体现可用空间的一部分。
  • 特点：

    • 提供了一种简朴的方法来分配网格轨道的空间。
    • 可以轻松创建复杂的网格布局。

  • 适用场景：在构建基于网格的布局时，用于定义行和列的巨细。
  1. .container {
  2.   display: grid;
  3.   grid-template-columns: 1fr 2fr; /* 第二列是第一列宽度的两倍 */
  4. }
复制代码
@media

@media CSS@规则可用于基于一个或多个媒体查询的效果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。
备注： 在 JavaScript 中，可以使用 CSSMediaRuleCSS 对象模型接口访问使用 @media 创建的规则。
语法

@media at 规则可置于你代码的顶层或嵌套至其他任何的 at 条件规则组中。
  1. /* 在你的代码的顶层 */
  2. @media screen and (min-width: 900px) {
  3.   article {
  4.     padding: 1rem 3rem;
  5.   }
  6. }
  8. /* 嵌套至其他的 at 条件规则中 */
  9. @supports (display: flex) {
  10.   @media screen and (min-width: 900px) {
  11.     article {
  12.       display: flex;
  13.     }
  14.   }
  15. }
复制代码
媒体类型

媒体类型（media type）描述设备的一样平常种别。除非使用 not 或 only 逻辑运算符，否则媒体类型是可选的，并且会（隐式地）应用 all 类型。


  • all
    适用于全部设备
  • print
    适用于在打印预览模式下在屏幕上查看的分页材料和文档
  • screen
    主要用于屏幕

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

前进之路

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表