Question

在我的html部分中包含样式和脚本标记是否有益？我觉得它更有意义，但我不是百分百肯定。我对福利的定义是：

它在维护和修改方面做得很好。
几乎没有性能损失。
代码更容易理解。

这是我正在谈论的一个例子

<html>

    <style>
        /*Application wide styling*/
        body{
            height:1000px;
            width:100%;
        }
    </style>

    <body>

        <!-- Include homepage partial -->

    </body>
</html>


<!-- homepage partial -->

<style>
        .subcontent_wrapper{
            height:40px;
        }
</style>
<div class="main_content">
    <div class="subcontent_wrapper">
        <!-- include subcontent1 partial -->
    </div>
    <div class="subcontent_wrapper">
        <!-- include subcontent2 partial -->
    </div>
</div>

<!-- subcontent1 -->
<style>
    #subcontent1{
        font-size: 10px;
    }
</style>
<div id="subcontent1" class="subcontent">
    <p>Hello,</p>
</div>


<!-- subcontent2 -->
<style>
    #subcontent2{
        font-size: 12px;
    }
</style>
<div id="subcontent2" class="subcontent">
    <p>World!</p>
</div>

这是否有正常方式的优点/缺点，只是单独包含所有的CSS？

编辑：通过html partial，我的意思是任何动态插入到文档中的html。通常将页面拆分为“包装器”并将其他html文件插入其中。当我说包含html partial时，我引用的html部分被插入文档的那个区域。

Answer 1

这个问题有点接近意见，但我会说没有来包含样式标记（它们不应该在任何地方都是HTML。那就是CSS是什么for！）in HTML partials。

对于脚本标签，请在需要的地方添加;有时，JavaScript需要放在HTML文档的特定位置，因此无需更改代码以允许其在<head>元素内运行，您就必须这样做。

Answer 2

在HTML代码中包含<style></style>是一种非常糟糕的做法，因为它极大地妨碍了代码的可维护性。

我不知道你在哪里得到了你的假设，但让我们稍微讨论一下：

它在维护和修改方面做得很好。

这绝对是假的你的应用程序可能会超过几页，当这种情况发生时，你会发现自己有几十（或几百？）个小<style>个片段。

祝你好运，当你决定要让那个字体更大一点......

几乎没有性能损失。

这也不是真的一开始可能不会引起注意，但是当你的应用程序增长时，你的代码中会有很多冗余的CSS分散在各处。

当然这是需要下载的额外信息。

代码更容易理解。

今天，也许从现在起一个月后查看代码，你会诅咒自己试图在几十（或几百）个其他几乎相同的片段之间找到你的片段......

<小时/> 另外，作为旁注，您不应在部分中包含<html>标记。

编辑：我几乎忘记了脚本
由于您将问题标记为angular-ui-router，因此我认为您正在使用AngularJS 在这种情况下，没有任何感觉根本让脚本标签不再是HTML。

html partials中的样式标签

2 个答案: