Question

在可重用性的不同类中提取css是否有任何缺点？

一遍又一遍地重写相同的css代码对我来说似乎非常麻烦。我们设计的网页具有预定义的边距和填充，因此网站的间距保持不变。

字体大小，字体系列，颜色，悬停，背景等也是如此。你明白了。

我们在下面的代码示例中使用了sass。

.text-color-light{ color: $light-color; }
.text-color-dark{ color: $dark-color; }
.text-color-main{ color: $main-color; }
.text-color-secondary{ color: $secondary-color; }
.text-color-accent{ color: $accent-color; }

.text-hover-light:hover{ color: $light-color !important; }
.text-hover-dark:hover{ color: $dark-color !important; }
.text-hover-main:hover{ color: $main-color !important; }
.text-hover-secondary:hover{ color: $secondary-color !important; }
.text-hover-accent:hover{ color: $accent-color !important; }

.bg-light{ background: $background-color-light; min-height: 1px; }
.bg-dark{ background: $background-color-dark; min-height: 1px; }
.bg-main{ background: $main-color !important; min-height: 1px; }
.bg-secondary{  background: $secondary-color; min-height: 1px; }
.bg-accent{ background: $accent-color; min-height: 1px; }

/* Portrait phones and smaller */
@media (max-width: 480px) { 
    .xs-bg-light{ background: $background-color-light; min-height: 1px; }
    .xs-bg-dark{ background: $background-color-dark; min-height: 1px; }
    .xs-bg-main{ background: $main-color !important; min-height: 1px; }
    .xs-bg-secondary{   background: $secondary-color; min-height: 1px; }
    .xs-bg-accent{ background: $accent-color; min-height: 1px; }
}

提前致谢。

Answer 1

这是一个意见问题，StackOverflow不是意见。我认为这样做太多会降低代码的灵活性。如果有人只想在一个地方改变一件事，那么它将影响到整个项目。

根据我的经验，这种高效的代码在不断发展和不断发展的项目中效果不佳，很少有项目不会发展。

到目前为止，我最好的想法是创建可以独立运行的代码块，例如标题块，页脚一个，一个盒子，另一个盒子等等。< / p>

可重用的组件而不是可重用的类似乎对我而言。但这只是一种观点，这里没有绝对的真理。

在可重用性的不同类中提取css是否有任何缺点？

1 个答案: