gpt4 book ai didi

html - CSS中有多少个逗号是太多的逗号

转载 作者:太空宇宙 更新时间:2023-11-04 15:13:05 26 4
gpt4 key购买 nike

<分区>

供引用: SCSS .extend()

关于这个问题的类似帖子: Using extend for clearfix

假设我要制作一些我可以在整个元素中扩展和重用的类:

例如一个类可以是:

 //common boilerplate for most of my parent divs
.scaffold
{
position: relative;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

//or a typical clearfix

.group:after {
content: "";
display: table;
clear: both;
}

假设我有十几个这样的类,它们具有不同的目的和/或属性中的差异。在什么时候扩展类(class)对性能有害而不是有益?例如 - 如果这个类说了 50 个不同类的逗号

编写其中一个 SCSS 类的示例

   .site-header
{
@extend .group;
@extend .scaffold;
background: papayawhip;
border-bottom: 1px #ccc solid;
}

示例编译的 clearfix 可以是 CSS

.group:after, .site-header, .route-nav, .main-article, .article-header, .side-bar, .site-footer 
//this could go on for a while
{
content: "";
display: table;
clear: both;
}

示例 HTML

<!DOCTYPE html>
<html lang="en">

<body>
<header class="site-header">
<nav class="route-nav">

<nav>
</header>
<article class="main-article">
<header class="article-header"></header>
</article>
<aside class="side-bar">
</aside>
<footer class="site-footer">
</footer>
</body>
</html>

我觉得这可能是编写 CSS 的最干的方法之一。我觉得这种方法在只写一页的几个部分后会变得非常有效和成功。此外,这些类中的大多数都可以通过许多元素进行改进和使用。我真的很想试验一下,但我担心从长远来看它可能会导致一些性能问题,尤其是当类开始使用像 :after :before 这样的伪类时。

与仅添加类或编写混合宏相比,性能会受到影响吗?有没有人有任何统计数据来备份最佳路线?

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com