css - CSS最佳实践问题

我一直在讨论将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>

简单的例子，却说明了float的布局风格。这是更好的做法吗？还是使用clear会更好？

提前致谢

最佳答案

fleft作为类名不是一个好习惯。

如果您的客户/老板说：“好吧，我们希望该div在右边？”

您有2个选项...将fleft类更改为float: right，或创建一个新类并在HTML中进行更改。 CSS类应以其含义或描述来命名，而不能使用包括位置/颜色/大小等的描述性词。

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

例子

（从坏名到好名）

top => header

left-side-bar => menu

bottom-menu => footer

当然，这些仅是示例。这也是一个好习惯，因为当HTML5出现时，您实际上将定义<header>，<footer>等