是否值得在CSS中将"样式"与"布局"分开

Question

CSS最大的麻烦之一就是如何恰当地定位东西是多么棘手.

现在我要努力去理解事情,我总是需要几次尝试才能猜出哪些必须浮动哪个方向与什么相关.

现在,我的麻烦是,我通常在某些时候有这样的代码:

<div class="someContainerThatWillWorkAsALine">
  <div class="someOtherContainerThatWillWorkAsAcolumn">
    <div class="StuffInAcolumn">
      ...
    </div>

这样的课程的唯一目的是:

• "孩子,请从左到右"
• "除了你们,请从上到下"
• "你,不要打扰你的兄弟,向左走5px,你已经停飞了"
• "约翰尼,你是你品种的最后一个,请清除所有那些浮动的废话"

我有时会想知道我是在编写软件,还是试图找到合适的方法将天线转为接收旧式模拟电视.

"好吧,在右边再多一点,拜托......不,还没到那里.现在完美,别动!"

此外,这些类都没有真正的语义,所以这是非常辛苦,给他们一个有意义的名字.这使得CSS非常难以阅读,更糟糕的是,写起来非常困难,因为每次我必须选择一个名称"而另一类 - 那简单地告诉一个块"时,我会发生惊恐发作-act作为一种线".因为每个类名都是web2.0-y-one-page-site的全局,所以您不希望与使用过的名称冲突.

那么你如何解决这类问题呢？你呢 :

• 保留"定位"(布局？)css代码与你的html内联,并将CSS限制为实际样式(如"这应该是蓝色,这应该用粗体写,等等......")？
• 只需要一个"行为一行"和"行为一列"类(意思是你的html代码包含只处理布局的类),这有点打败了"保持布局摆脱我的html"精神？为其他案件提供更有意义的课程？
• 使用公约名称？

欢迎任何想法.

Answer 1

我理解您的痛苦，但是您使用 CSS/html 越多，它就会变得越容易。以至于你最终爱上它。

是否值得在 CSS 中将“样式”与“布局”分开

是的，一点没错！如果您使用布局框架，您将不会拥有所有这些疯狂的类。然后你可以专注于风格。布局和样式都将在一个 CSS 文件中。

永远不要内联样式 - 保持有用的关注点分离。

本文介绍了为什么关注点分离将长期使您的网站受益。

Answer 2

我采用的方法是将CSS规则分为三个不同的“部分”：

• 布局规则（宽度，高度，填充，边距，是否浮动，位置等）
• 键入规则（字体大小，字体粗细等）
• 外观规则（字体颜色，背景颜色，带有供应商前缀的CSS3等）

这是当前项目的示例：

    .OrderActionsPane {

    /* --- Layout --- */

    height: 45px;
    padding: 3px;
    border-bottom-width: 1px;

    /* --- Typography --- */

    font-size: 14px;
    font-weight: bold;

    /* --- Appearance --- */

    background: #fff;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #ededed));
    background: -webkit-linear-gradient(top center, #fff, #ededed);
    background: -moz-linear-gradient(top center, #fff), #ededed);
    background: -o-linear-gradient(top center, #fff, #ededed);
    background: linear-gradient(top center, #fff, #ededed);

    box-shadow: 0 0 5px rgba(0,0,0,.25);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.25);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,.25);
    -ms-box-shadow: 0 0 5px rgba(0,0,0,.25);
    -o-box-shadow: 0 0 5px rgba(0,0,0,.25);

    border-bottom-style: solid;
    border-bottom-color: #e6e6e6;

}

我这样做的原因是布局规则（主要是盒子模型的东西）对您的布局影响最大。类型规则也可能会影响您的布局（例如，如果您有一个流畅的容器并增加了字体大小，则容器可能会增大）。外观样式对您的布局没有影响。

请注意，我正在分隔边界规则。将“ border-bottom：1px solid＃e6e6e6”写为速记会更容易，但是那样您将失去边框的外观和布局效果之间的分隔。

其他注意事项也可能是您在布局中使用的单位。Px将使布局更可靠，但是如果您使用百分比或ems表示对移动设备更友好或可扩展的布局，则可能需要多做一些思考。

我的方法不一定是唯一的方法，也不一定是最好的方法，并且解决方案可能会因平台的限制而有所不同（是否允许您将这样的规则分为“ Layout.css”文件和“ Theme.css”例如，主题文件仅更改外观，并且可以换成另一个文件以换一个完全不同的外观）。

我认为这是每个前端开发人员/ CSS编码人员（或女孩）在某个时候遇到的问题！随着对CSS的更多了解，您将开始思考“必须有更好的方法来做到这一点”。最终，如果您付出了努力，就会找到解决方案。:)

看看SMACSS可以得到更多思考：http ://smacss.com/book/type-layout