CSS 最佳实践问题

Question

我一直在讨论将 css 与 div 一起使用并布置元素，我真的很想看看我一直在使用的做法是否被认为是最佳做法，或者是否有一些不同的东西我忽略了会更好。

假设我们将两张图片放在同一行，左边一张放在右边，然后在其下方的广告中放置一个文本。我可能会做类似的事情:

#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 会更好？

提前致谢

Answer 1

fleft作为类名不是好的做法。

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

您有 2 个选择...更改 fleft类别为 float: right , 或者创建一个新类并在 HTML 中更改它。 CSS 类的标题应按其含义或描述来命名，而不要使用包括位置/颜色/大小等的描述性词语。

我发现该规则的唯一异常(exception)是文章中的图像。因为它们通常向左和向右浮动，所以我使用类名 image-left和 image-right .

例子

(从一个坏名字到一个更好的名字)

top => header

left-side-bar => menu

bottom-menu => footer

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