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

Posted 2023-02-22

【中文标题】将所有样式放在 css 文件中与混合结构

【英文标题】：Put all styles in css files vs Mixed structure

【发布时间】：2012-02-01 22:12:43

【问题描述】：

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

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

.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>

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

位置信息完全不共享，因此基于现在的网络速度，性能增益非常有限。 （例如清除：左）

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

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

损害性能，当使用它的页面被删除时，某些 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>

我们可以获得的好处：

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

更容易维护，因为内联样式具有更高的优先级，编辑内联样式会立即给 UI 带来效果。此外，您无需担心会破坏其他页面。

当我们需要删除一个页面时，我们通常不需要清理 css。由于页面特定的 css 在页面中，因此它与页面一起使用。 css 文件中的内容更有可能被共享。

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

例如：

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

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

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

谢谢

【参考方案1】：

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

【参考方案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 分开会使故障排除变得容易得多。

【讨论】：

还有像 firebug 这样的工具，很容易弄清楚你的 CSS 是从哪里来的。