.container 在 CSS、Electron 或 Chromium 中是否有特殊含义？答案

【问题标题】：Does .container have a special meaning in CSS, Electron, or Chromium?.container 在 CSS、Electron 或 Chromium 中是否有特殊含义？
【发布时间】：2019-08-03 12:01:36
【问题描述】：

我是一名具有 C++ 和 Python 背景的程序员，正在学习 JS、HTML 和 CSS。我目前正在通过一本名为 Electron in Action 的书学习 Electron。其中一个示例包含一个 HTML 代码，如下所示：

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Fire Sale</title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <section class="controls">
            <button id="new-file">New File</button>
            <button id="open-file">Open File</button>
            <button id="save-markdown">Save File</button>
            <button id="revert">Revert</button>
            <button id="save-html">Save HTML</button>
            <button id="show-file">Show File</button>
            <button id="open-in-default">Open in Default Application</button>

        </section>

        <section class="content">
            <label for="markdown" hidden>Markdown Content</label>
            <textarea class="raw-markdown" id="markdown"></textarea>
            <div class="rendered-html" id="html"></div>

        </section>
    </body>
    <script>
        require('./renderer');
    </script>
</html>

其样式表如下：

html {
    box-sizing: border-box;
}

*, *::before, *:after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body , input {
    font: menu;
}

textarea, input, div, button {
    outline: none;
    margin: 0;
}

.controls {
    background-color: rgb(217, 241, 238);
    padding: 10px 10px 10px 10px;
}

button {
    font-size: 14px;
    background-color: rgb(181, 220, 216);
}

button:hover {
    background-color: rgb(156,, 198, 192);
}

button:active {
    background-color: rgb(144, 182, 177);
}
button:disabled {
    background-color: rgb(196, 204, 202);
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 100vw;
    position: relative;
}

.content {
    height: 100vh;
    display: flex;
}

.raw-markdown, .rendered-html {
    min-height: 100%;
    max-width: 50%;
    flex-grow: 1;
    padding: 1em;
    overflow: scroll;
    font-size: 16px;
}

.raw-markdown {
    border: 5px solid rgb(238, 252, 250);;
    background-color: rgb(238, 252, 250);
    font-family: monospace;
}

请注意，CSS 文件中有一个额外的类，在 HTML 规范中找不到。由于作者尚未更新示例的存储库，我必须问：.container 在 CSS 中是否具有某种特殊含义？我用谷歌搜索，没有任何结果，所以我想它没有，但可以安全地问，因为我已经搜索了这本书，并且没有其他提及这个诱人的容器类。感谢您的帮助。

【问题讨论】：

标签： html css node.js electron chromium

【解决方案1】：

CSS 类名几乎可以是任何东西，没有需要注意的保留类或特殊类。所以.container 只是针对带有class="container" 的任何元素，就是这样！

【讨论】：

补充一点：容器类的使用非常频繁。同样，它不是特殊的或保留的。您可以找到许多流行网站上使用的 .container 及其变体，您可以在此处看到 bootstrap 正在使用它：getbootstrap.com/docs/4.3/layout/overview
但这就是我的意思。 HTML 文件中没有具有该类名的元素。为什么？
您在该页面中看不到.container 的原因可能是：a) 曾经有一个但被删除了CSS 没有被清理（CSS 权重是 web 优化中的最后一个问题 - 因为它几乎不算数）。或者 b) 样式表被多个页面使用。其中一个有.container。
也许本书的作者使用.container 作为对任何容器元素的ez 引用。关于 CSS 代码的有趣之处在于，随着项目随着时间的推移而发生变化和发展，使用未使用的 CSS 是很常见的。未使用的 CSS 只会在项目大小上造成臃肿，它的存在不会造成其他伤害。
我刚刚找到了存储库，确实，它是为将来的某些东西保留的。谢谢大家。