Question

我一直在讨论使用带有div的css和布置元素，我真的希望看看我一直在使用的练习是否被认为是最佳实践，或者如果有不同的东西我会过度看会更好。

让我们说我们在同一条线上放置了两张图片，右边是左边的一张图片，下面是广告中的文字。我可能会这样做：

#container{
 width:800px;
 height:300px;
}
.fleft{
  float:left;
}
#left_img_container{
  float:left;
  width:150px;
}
#right_img_container{
  float:right;
  width:150px;
  text-align:right;
}
#textArea{
  margin-top:5px;
  width:100%;
}

<div id='container'>
   <div class='fleft'>
       <div id='left_img_container'>FOO IMAGE 1</div>
       <div id='right_img_container'>FOO IMAGE 2</div>
   </div>
   <div class='fleft' id='textArea'>this is my text</div>
</div>

简单示例但是隐藏了浮动类型的布局样式。这是更好的做法吗？或者使用clear会更好？

提前致谢

Answer 1

fleft作为班级名称不是好习惯。

如果您的客户/老板说，“好吧，我们想要右侧的div？”

您有2个选项...将fleft类更改为float: right，或者创建一个新类并在HTML中进行更改。 CSS类的标题应该是它们的含义或描述，而不使用包含位置/颜色/大小等的描述性词语。

我发现规则的唯一例外是文章中的图像。由于它们通常向左和向右浮动，因此我使用类名image-left和image-right。

实施例

（从坏名字到更好的名字）

top =＆gt; header

left-side-bar =＆gt; menu

bottom-menu =＆gt; footer

当然，这些只是一些例子。这也是一种很好的做法，因为当HTML5出现时，您实际上会定义<header>，<footer>等

Answer 2

您可以稍微清理一下HTML代码，并在CSS中使用较少的类，如下所示：

<div id="container">
   <img id="foo1" src="foo1" />
   <img id="foo2" src="foo2" />
   <p>This is my text</p>
</div>

#container {
   width:800px;
   height:300px;
}

#foo1 {
   float:left;
}

#foo2 {
   float:right;
}

#container p {
   margin-top:5px;
   clear:both;
}

Answer 3

这完全取决于实施...但我同意Alex ......你需要遵循一个更合适的命名标准....这将为你的未来提供更好的服务......

css最佳实践问题

3 个答案:

实施例