Question

我最大的CSS问题之一就是如何恰当地定位东西是多么棘手。

现在我觉得有多难以理解事情，我总是需要几次尝试才能猜出哪些必须浮动哪个方向与什么相关。

现在，我的麻烦是，我通常在某些时候会有这样的代码：

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

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

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

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

“好的，向右走一点，请...... 不，还没到那里。现在完美，不要动！“

此外，这些类没有真正的语义，因此非常很难给它们一个有意义的名称。这使得CSS非常难以阅读，更糟糕的是，很难写，因为每当我必须选择一个名称“而另一类 - 那么简单 - 我就会发生惊恐发作告诉-A-块到行为作为一种线”。因为每个类名都是web2.0-y-one-page-site的全局，所以您不希望与使用过的名称冲突。

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

将“定位”（布局？）css代码与你的html内联，并将CSS限制为实际样式（如“这应该是蓝色，这应该用粗体写，等等......”）？
只需要一个“act-as-a-line”和“act-as-a-column”类（意思是你的html代码包含只处理布局的类），这有点打败了“保持我的布局” HTML“精神？并为其他案件提供更有意义的课程？
使用名称约定？

欢迎任何想法。

Answer 1

我理解你的痛苦，但你越习惯使用CSS / html就越容易。为了你最终喜欢它。

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

是的，绝对！如果你使用布局框架，你将没有所有那些疯狂的类。然后你可以专注于风格。布局和样式都将在CSS文件中。

从不内联样式 - 维护有用的separation of concerns。

This article解决了为什么关注点分离会使您的网站长期受益。

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”文件和“主题”例如，.css“文件，主题文件只改变了外观，可以换成另一个用于完全不同的外观。”

我认为这是每个前端开发/ CSS编码人（或女孩）在某些时候碰到的东西！随着您对CSS的了解越来越多，您将开始思考“必须有更好的方法来实现这一目标”。最后，如果你努力，你会找到一个解决方案。：）

看一看SMACSS的更多思考：http://smacss.com/book/type-layout

Answer 3

使用多个类名 - 一组用于定位，一组用于样式。不要使用内联样式。

约定取决于你。

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

3 个答案: