Question

我被告知，良好的模式是将所有样式放在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文件中”的想法。我希望看到你的想法，无论是好的方面还是坏的方面。

由于

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可以使故障排除变得更加容易。

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

2 个答案: