将所有样式放在 css 文件中 vs 混合结构

Question

有人告诉我，最好的模式是将所有样式放入 css 文件中，因为等等（你可以在谷歌中搜索原因，因为这是一个非常流行的想法）。 然而，我是一个当人们试图出售时总是问为什么的人。根据我自己在一些项目中的经验。我认为将所有样式放入文件中更难维护，因为存在一些可继承或页面特定的样式。

例如，我有一个显示条款和条件的控件：

.TermsAndConditions
{
    background-clip: padding-box;
    border: 1px solid #CFC2A7;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.6) inset, 1px 0 rgba(255, 255, 255, 0.3) inset, -1px 0 rgba(255, 255, 255, 0.3) inset;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;

    position:absolute;
    top: 0px;
    left:0px;
}

当我需要在两个页面上使用它时，我必须为其创建两个特定的类：

.HomePageTermsAndConditions
{
    position: static;
    bottom: 20px;
    right:30px;
}


.ImagePreviewPageTermsAndConditions
{
    position:absolute;
    top: 50px;
    left:60px;
}


Home page:
<div class="TermsAndConditions HomePageTermsAndConditions">
</div>

Preview page:
<div class="TermsAndConditions ImagePreviewPageTermsAndConditions">
</div>

绝对没有内联样式，但存在一些问题：

1. 位置信息是根本不共享，因此基于现在的网络速度，性能增益非常有限。 （例如clear：left）

2. 有些样式甚至不可继承，所以我们必须为每个级别创建css类，这不省力。

3. 难以维护，由于文件中的css类可能会被另一个页面继承或覆盖，因此在编辑类时很难知道它可能会造成什么影响，因此需要花费时间进行测试/调试/修复往返。

4. 损害性能，当使用它的页面被删除时，一些 css 类将保留在那里。清理它们需要花费精力。

因此，我建议将页面/标签特定样式（如位置信息）内联移动，如下所示：

.TermsAndConditions
{
    background-clip: padding-box;
    border: 1px solid #CFC2A7;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.6) inset, 1px 0 rgba(255, 255, 255, 0.3) inset, -1px 0 rgba(255, 255, 255, 0.3) inset;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
}

<div class="TermsAndConditions" style="position:absolute; bottom: 20px; right:30px;">
</div>


<div class="TermsAndConditions" style="position: static; top: 50px; left:60px;">
</div>

我们可以获得的好处：

1. 类中没有页面特定信息。不会影响性能，因为页面中只有几种样式

2. 更容易维护，因为内联样式具有更高的优先级，编辑内联样式会立即在 UI 上带来效果。而且也不用担心破坏其他页面。

3. 当我们需要删除页面时，通常不需要清理CSS。由于页面特定的 css 位于页面中，因此它与页面一致。 css文件中的东西更有可能被共享。

4. 更加面向对象。由于文件中的 css 类没有页面特定信息，因此它们本身更像是一个控件。很容易插入其他页面。

例如：

当我在新页面上需要它时，我只需复制 html 并更改内联样式：

<div class="TermsAndConditions" style="position: absolute; top: 50px; left:60px;">
</div>

这是我反对“将所有样式放入 css 文件中”的想法。我希望看到你对此的想法，无论是好的方面还是坏的方面。

谢谢

Answer 1

我认为最好的办法是将这些东西混合在一起......
通常我使用类，但是当我需要指定位置/尺寸时，我使用样式。
有时，当我需要覆盖类设置时，我会使用现有的类，但将其与样式混合。
我认为我不会使用样式的唯一情况是当我想创建完全动态的布局并能够仅使用 CSS 更改它时。

Answer 2

将样式置于 HTML 之外的好处就是这样。

假设我在每个页面上都有一个导航栏，例如：

<ul class="main-navigation">
   <li>my link</li>
   <li>my link</li>
   <li>my link</li>
   <li>my link</li>
</ul>

我的样式将是这样的：

.main-navigation ul li {
color:#000;
}

现在假设我有相同的导航栏，但这次使用内联样式。

<ul>
   <li style="color: #000;"></li>
   <li style="color: #000;"></li>
   <li style="color: #000;"></li>
   <li style="color: #000;"></li>
</ul>

或者说我将样式嵌入到 HTML 中，如下所示。

<style type="text/css">
   .main-navigation ul li {
    color:#000;
    }
</style>

取决于文件管理的设置方式。您很可能不想浏览每个 HTML 文件来更改像导航颜色这样简单的内容。当您只需进入样式表并更改一行代码时。

希望这是有道理的。但我想总结一下，在某些情况下它可能更实用。不过，我个人认为，将 HTML、CSS、Javascript 和 PHP 分开可以使故障排除变得更加容易。