Question

我听说在您的网站中使用内联CSS很糟糕。

这是一个例子。

假设我有一个类mycss

.mycss { margin: 10px 0 11px 12px; text-align: left; color: red; }

我将在我的一个div中使用它

<div class="mycss">DIV ONE</div>

我想在我的DIV TWO中使用相同的样式，这个边距将设置为0.

<div class="mycss" style="margin: 0;">DIV TWO</div>

这是不好的做法吗？

编辑另一个让它更清晰的例子。

我有5个DIVS

 <div class="mycss">ONE</div>
 <div class="mycss">TWO</div>
 <div class="mycss">THREE</div>
 <div class="mycss">FOUR</div>
 <div class="mycss">FIVE</div>

假设我有一个类mycss

.mycss { margin: 10px 0 11px 12px; text-align: left; color: red; }

现在我希望所有5个DIVS都有不同的边距。我应该在每个课程中再创建5个课程吗？或者只是做一个内联CSS？

会不会是：

一个。

 .marginfordivone { margin: 1px 2px 3px 4px }
 .marginfordivtwo { margin: 2px 4px 6px 6px }
 .marginfordivthree { margin: 8px 5px 1px 3px }
 .marginfordivfour { margin: 1px 2px 2px 2px }
 .marginfordivfive { margin: 1px 4px 8px 4px }.


 <div class="mycss marginfordivone">ONE</div>
 <div class="mycss marginfordivtwo">TWO</div>
 <div class="mycss marginfordivthree">THREE</div>
 <div class="mycss marginfordivfour">FOUR</div>
 <div class="mycss marginfordivfive">FIVE</div>

B中。

 <div class="mycss" style="margin: 1px 2px 3px 4px">ONE</div>
 <div class="mycss" style="margin: 2px 4px 6px 6px">TWO</div>
 <div class="mycss" style="margin:  8px 5px 1px 3px">THREE</div>
 <div class="mycss" style="margin: 1px 2px 2px 2px">FOUR</div>
 <div class="mycss" style="margin: 1px 4px 8px 4px">FIVE</div>

A或B

Answer 1

是的，这是一种不好的做法。

为什么不简单地创建两个不同的类？

.mycss { text-align: left; color: red; }
.mycss2 { margin: 10px 0 11px 12px; }

<div class="mycss mycss2">DIV ONE</div>
<div class="mycss">DIV TWO</div>

更新（以适应更新的问题）

您仍然不应该使用内联css来覆盖css类。只需添加另一个类（如我所示）。如果你有5个不同的边距，你需要问问自己为什么要这样做。通常，您应该能够分别使用margin-left，margin-right，margin-top和margin-bottom，然后创建由其意图而不是其实现定义的css类。例如：

.narrowSideMargins { 
    margin-left: 2px; 
    margin-right: 2px; 
}
.wideSideMargins { 
    margin-left: 10px; 
    margin-right: 10px; 
}

您显然可以选择边距的任何组合，但重要的是要记住按照意图而不是实际的当前属性来定义类。这将回答您的原始（和当前）问题和bazmegakapa的评论（方法上）。

Answer 2

是的，那将是一种不好的做法。因为，当您拥有大多数共同的CSS样式并且只想更改一个或两个样式属性时，您可以执行以下操作：

1）为最常见的样式属性创建一个类。 2）为每个单独的更改创建不同的类。

  .mycss { text-align: left; color: red;}
    .mycss2 {margin: 10px 0 11px 12px; }
.mycss3 {margin: 0px}

Answer 3

是的，是。

内联样式使您的项目很难维护。只需在第二个div上添加另一个类，或使用其他许多CSS selectors中的一个来匹配它。

当然还有边缘情况，内联样式可能会派上用场。我想到了生成HTML服务器端并且必须在元素上放置生成的CSS样式，例如在其上设置background-image，图像URL来自数据库。

除了这些之外，如果没有曾经想过关于使用内联样式，你会感觉更好。

Answer 4

您可以将不同的两个类写为：

CSS：

.mycss-1 { margin: 10px 0 11px 12px; text-align: left; color: red; }

HTML：

<div class="mycss">DIV ONE</div>

CSS：

.mycss-2 { margin: 0; text-align: left; color: red; }

HTML：

<div class="mycss-2">DIV TWO</div>

只需将其更优化为：

CSS：

.mycss{ text-align: left; color: red; }
.margin-1{ margin: 10px 0 11px 12px; }
.margin-2{ margin: 0; }

HTML：

<div class="mycss margin-1">DIV ONE</div>
<div class="mycss margin-2">DIV TWO</div>

我可以只使用一次内联CSS吗？

4 个答案:

更新（以适应更新的问题）