1

我听说在您的网站中使用内联 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>

甲或乙

4

4 回答 4

2

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

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

.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的评论（在方法上）。

于 2013-11-07T06:45:31.927 回答
1

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

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

  .mycss { text-align: left; color: red;}
    .mycss2 {margin: 10px 0 11px 12px; }
.mycss3 {margin: 0px}
于 2013-11-07T06:55:03.137 回答
0

您可以编写不同的两个类：

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>
于 2013-11-07T06:51:10.017 回答
0

是的。

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

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

除此之外，最好不要考虑使用内联样式。

于 2013-11-07T06:47:28.570 回答