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>

Простой пример, но нечеткий стиль разметки. Это лучшая практика? или было бы лучше использовать clear?

Заранее спасибо

Answer 1

fleft как имя класса не является хорошей практикой.

Что если ваш клиент / начальник скажет, "хорошо, мы хотим, чтобы этот div справа"?

У вас есть 2 варианта ... измените класс fleft на float: right или создайте новый класс и измените его в HTML. Классы CSS должны называться по их значению или описанию без использования описательных слов, которые включают положение / цвет / размер и т. Д.

Единственное исключение, которое я нашел в правиле, - это изображения в статье. Поскольку они обычно плавают влево и вправо, я использую имена классов image-left и image-right.

Примеры * * 1016 (от плохого имени к лучшему) top => header left-side-bar => menu bottom-menu => 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

Все зависит от реализации ... Но я согласен с Алексом ... Вы должны следовать более подходящему стандарту именования .... который будет лучше служить вам в будущем ...