将所有样式放在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;

    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>

.homepageTerms和条件
{
位置：静态；
底部：20px；
右：30px；
}
.ImagePreviewPageTerms和条件
{
位置：绝对位置；
顶部：50px；
左：60px；
}
主页：
预览页面：

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

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

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

很难维护，因为文件中的css类可能会被另一个页面上的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>

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

.TermsAndConditions
{
背景剪辑：填充框；
边框：1px实心#CFC2A7；
边界半径：5px 5px 5px；
框阴影：0 1px 1px rgba（0,0,0,0.1），0 1px rgba（255,255,255,0.6）插入，1px 0 rgba（255,255,255,0.3）插入，-1px 0 rgba（255,255,255,0.3）插入；
高度：26px；
线高：26px；
填充：0 10px；
文本对齐：居中；
文字装饰：无；
垂直对齐：中间对齐；
空白：nowrap；
}

我们可以得到的好处：

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

更易于维护，因为内联样式具有更高的优先级，编辑内联样式将立即对UI产生影响。此外，您不必担心会破坏其他页面

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

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

例如：

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

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

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

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

---

谢谢

我认为最好的办法是把这些东西混在一起。。。 通常我使用类，但当我需要指定位置/尺寸时，我使用样式。 有时我使用现有的类，但在需要覆盖类设置时将其与样式混合。

---

我认为唯一不使用样式的情况是，我希望创建完全动态的布局，并且能够仅使用CSS来更改布局。

将样式置于HTML之外的好处在于此

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

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

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

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

.主导航ul li{
颜色：#000；
}

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

---

希望这是有意义的。但我想总结一下，我会说，在某些情况下，它可能更实用。然而，我个人认为，分离HTML、CSS、Javascript和PHP会使故障排除变得更加容易。

此外，使用firebug等工具，很容易准确地找出CSS的来源。