css最佳实践问题

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 => header

left-side-bar => menu

bottom-menu => footer

当然,这些只是例子.这也是很好的做法,因为在HTML5出现时,你会真正定义<header>,<footer>等