css - 解耦模块的CSS最佳做法

Question

这个问题的答案没有指出我不知道的某些CSS选择器或属性。它也没有把一些随机的CSS放在一起，使这种特定情况下可行。我不由自主地想到了几种方法可以使这个特定的示例生效。我敢肯定还有数百个。

创建CSS以使各种设计元素脱钩的最佳实践是什么？

我的意思的解释：

我是具有良好设计意识的计算机程序员。在编写良好的代码时，我希望创建解耦的类/对象，这意味着它们之间没有奇怪和意外的交互。我可以自由地混合和匹配我的类/对象，结果效果很好，并且是您所期望的。我所有尝试学习/创建CSS最佳实践的尝试都效果不佳。我担任.NET Web开发人员已有10多年了。长期以来，我一直相信语义CSS。我喜欢csszengarden.com。我尝试学习OOCSS和SMACSS。尽管如此，我还是无法使CSS正常工作。我在网上搜索CSS最佳做法，并找到诸如命名，格式设置以及一些提示和技巧。从未深入了解如何创建解耦的CSS。也许这是不可能的。我不应该这样。我觉得应该可以创建一种可以组合的可重用元素的设计语言。

由于所有内容都是非常抽象的，没有示例就很难讨论。这是我遇到的挑战的一个例子。这是基于涉及引导程序的情况，但是我简化了样式。因此，请理解样式的风格，因为这对于网站的其余部分有意义，并且此示例不是有关一些琐碎的更改的，这些更改使其可以在这种情况下正常工作。

例：

此代码位于jsbin上。

我有一个带有标题和内容的面板模块。通常，标头包含h2和一个或多个按钮操作：



请注意，标题和操作周围的等距填充向右浮动。这种设计具有响应性，当面板狭窄时，操作必须降到标题下方。尽管实际上发生问题是因为标题和按钮之间没有空格。

但是实际上，面板是一个可以在其标头中包含任何内容的模块。这应该遵循OOCSS的“容器和内容物分离”原则。因此，我们在面板标题中放置的内容并不重要。我们希望它运作良好。

现在，在特定页面上，将选择列表放在面板标题中是有意义的。像Bootstrap一样，有许多与表单有关的样式，因此我们在这里也使用这些样式。结果看起来像：



请注意，由于表单组（每个Bootstrap）的底部有页边距，因此现在页眉底部的空间增加了一倍（底部页边距为具有多个表单组的表单提供了正确的间距）。我同意我们的设计师的观点，即双重空间是错误的，它应该与顶部空间相等（例如，在更简单的示例中）。我找到了a good article关于尝试解决此问题的方法。但是，我喜欢的结尾处的“ best”选项（使用*:last-child）在这里不起作用，因为表单不是容器中的最后一个元素，因为操作按钮必须在选择列表下方浮动窗户很小。另外，我感觉总是会出现这种情况。请注意，在这种情况下，当窗口很小并且按钮浮动在选择框下方时，由于窗体组上的边距提供了它们之间的间距，因此间距很好。

另外，设计人员说按钮应该与选择垂直对齐（使用引导程序时看起来更好，因为输入的高度相同）。感觉没有办法完成不完全特定于此处元素的特定组合或特定内容页面的方法。也就是说，我无法想象使这样的东西正确排列的通用最佳实践。

上面的CSS太长，无法包含在这个已经很长的问题中，但是再次检查jsbin。

重述问题：

同样，我不是在寻找可以解决此特定示例的特定CSS。我想知道什么最佳实践将允许我为解耦的设计元素创建CSS，这些元素可以自由组合，而不会不断遇到上述问题。

Answer 1

关于CSS的可组合性

孩子的位置，身高应由父母负责


  创建CSS以进行各种设计的最佳实践是什么
  元素是解耦的？


我已经对该主题进行了深思熟虑，并且很高兴收到同事发送的指向您的文章"CSS is Not Composable"的链接，这是我如何找到此问题的方法。

因为CSS本质上适合在全局空间中创建选择器，所以将解耦的模块分隔为名称空间是明智的最佳实践。

您可以选择在全局级别上为通用组件类定义基本样式，但是可以依靠名称空间类和/或ID根据组件的位置将位置样式和尺寸样式应用于组件。

不要将位置或尺寸样式直接应用于任何组件容器。所有其他样式由组件在其名称空间内定义。

换句话说，子组件的位置和尺寸应由父容器负责。

正确：

/* A component namespace */
.my-component-A {
    padding: 10px;
    background-color: White;
}

/* A component styles its children as necessary */
.my-component-A > p {
    margin: 0 0 1em 0;
}

/* Position & dimension applied by parent (Page A) within its namespace */
.my-page-A .my-component-A { 
    float: left;
    margin: 0 10px 0 0;
}

/* Position & dimension applied by parent (Page B) within its namespace */
.my-page-B .my-component-A { 
    float: right;
    margin: 0 0 0 10px;
}

/* Position & dimension applied by parent (Component B) within its namespace */
.my-component-B .my-component-A {
    margin: 10px;
}

不正确：

/* Position & dimension applied by component within its own namespace */
.my-component-A {
    float: left;
    margin: 0 10px 0 0;
    padding: 10px;
    background-color: White;
}

/* Position & dimension now have to be overridden by parent */
.my-component-B .my-component-A {
    float: none;
    margin: 10px;
}

通过使用父组件或页面命名空间将位置和尺寸应用于子组件，您可以创建一个完全可组合的解耦模块系统。而且由于组件永远不会改变其自身的大小或位置，因此维护父组件或页面的开发人员可以确保他们可以控制其子组件的布局。

如果您始终如一且有意，则每个组件都可以放入任何其他组件中。并且因为它没有定义自己的大小或位置，所以它以浏览器默认的位置和尺寸样式或全局重置提供的样式流入父容器。

作为维护页面或父组件的开发人员，您完全可以自由修改该名称空间下所有内容的布局，而无需应用替代。而且，如果您的团队采用了这种最佳实践，则无需担心对他人维护的子组件进行的命名空间样式更改会破坏您维护的页面或父组件的布局。

每个组件都忽略位置和尺寸，完全依靠其父组件或页面来定义其位置和大小（如果需要）。

在您的示例中，我们可以应用该主体创建一个表单组组件，该组件可以放置在页面上以及各种深度的其他组件中，同时放弃对页面或父组件的布局控制。

/* Component Base / generic reset */
.component {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Use generic page and component class to target all child components at once */
.pagewrapper > .component {
  margin: 20px;
}

/* Component: Panel */
.component.panel {
  /* No positional styles defined on component container */
  border: 1px solid Black;
}
.component.panel .panel-header {
  /* `display: table` is a great legacy & cross-browser solution for vertical alignment */
  display: table;
  position: relative;
  overflow: auto;
  border-bottom: 1px solid Gray;
}
.component.panel .panel-header > * {
  /* set all immediate children as table-cells to get vertical-alignment */
  display: table-cell;
  padding: 10px;
  table-layout: auto;
  border-collapse: collapse;
  vertical-align: middle;
}
.component.panel .panel-header > .actions {
  width: 1%;
}
.component.panel .panel-header h2 {
  margin: 0;
  font-size: 25px;
}
.component.panel .panel-content {
  /* Exclude bottom padding and apply margin-bottom to immediate children instead */
  padding: 10px 10px 0;
}
.component.panel .panel-content > * {
  /* All immediate children of the container get a bottom margin */
  margin: 0 0 10px;
}

/* Component: Form Group */
.component.form-group {
  /* No positional styles defined on component container */
  padding: 10px;
  background-color: Beige;
}
.component.form-group label {
  display: block;
}

/* Component position and dimension are namespaced to the parent */
.pagewrapper.home > .component.form-group {
  /* Use child selector to limit scope of namespaced components where a component may exist multiple times as descendants of the same ancestor. */
  /* You may override any other styles such as background-colors */
  background-color: Lavender;
}
.component.panel .panel-header .component.form-group {
  /* Positional style is always applied in the context of a parent container… */
  margin: -10px;
}
.component.panel .panel-content .component.form-group {
  /* …because it may need different positioning even within the same parent component. */
  margin: 0 -10px;
}
.component.panel .panel-content .component.form-group:first-child {
  /* Strategically use pseudo-class selectors… */
  margin: -10px -10px 0;
}
.component.panel .panel-content .component.form-group + * {
  /* …and sibling selectors (and other selectors as warranted). */
  margin-top: 10px;
}

<main class="pagewrapper home" id="my-page-A">

  <!-- Position and dimension defined by page…
       `.pagewrapper > .component` -->
  <section class="component panel" id="my-panel-A">
    <div class="panel-header">
      <h2>Title</h2>
      <div class="actions">
        <button>Add</button>
      </div>
    </div>
    <div class="panel-content">
      <p>Content</p>
    </div>
  </section>

  <section class="component panel" id="my-panel-B">
    <div class="panel-header">

      <!-- Position and dimension defined by parent component…
           `.component.panel .panel-header .component.form-group` -->
      <div class="component form-group" id="my-form-group-A">
        <label>A Label</label>
        <select>
          <option>Something</option>
        </select>
      </div>
      
      <div class="actions">
        <button>Add</button>
      </div>
    </div>
    <div class="panel-content">
      <p>Content</p>
      <p>More content</p>
    </div>
  </section>

  <section class="component panel" id="my-panel-C">
    <div class="panel-header">
      <h2>Title</h2>
      <div class="actions">
        <button>Add</button>
      </div>
    </div>
    <div class="panel-content">
      <p>Content</p>
      
      <!-- Position and dimension defined by parent component…
           `.component.panel .panel-content .component.form-group` -->
      <div class="component form-group" id="my-form-group-B">
        <label>A Label</label>
        <select>
          <option>Something</option>
        </select>
      </div>

      <p>More content</p>
    </div>
  </section>

  <!-- Position and dimension defined by namespaced page…
       `.pagewrapper.home > .component.form-group` -->
  <div class="component form-group" id="my-form-group-C">
    <label>A Label</label>
    <select>
      <option>Something</option>
    </select>
  </div>

</main>