Хорошо ли использовать такие классы, как .left {float: left} и .right {float: right}

#html #css #xhtml

#HTML #css #xhtml

Вопрос:

Какой метод более удобен для командной разработки?
Что будет более оптимизировано в longer?
Каковы плюсы и минусы обоих?

Таблица стилей

 #firstblock { background: #000; float: left; }
.genblock { background: #006699; float: left; }

HTML

 <div id="firstblock"></div>
<div class="genblock"></div>
How you should do it

Или

Таблица стилей

 .left { float: left; }

#firstblock { background: #000; }
.genblock { background: #006699; }

HTML

 <div id="firstblock" class="left"></div>
<div class="genblock left"></div>

Ответ №1:

Вы не должны пропускать презентационную информацию (CSS) на свой уровень данных (HTML).

Вы должны присвоить своим элементам имя класса, которое описывает их назначение. Плавает он или нет, не имеет значения в HTML. Вы решаете это в CSS.

Что, если у вас есть имя класса, такое как blue , а затем ваши клиенты говорят, что теперь мы хотим, чтобы все эти вещи были красными?

Пример

HTML

 <ul id="primary-menu">
....
</ul>

CSS

 #primary-menu {
   float: left;
   color: #f00;
}

1. должны ли мы писать одно и то же свойство снова и снова, когда нам просто нужно написать его один раз?

2. Когда HTML стал слоем данных? Я бы сказал, слой разметки.

3. @Andrey Куда еще отправляются данные?

4. @alex HTML — это не просто данные, это само представление данных (загруженных со стороны сервера или жестко закодированных). Это данные разметка.

5. @Andrew Итак, это данные, помеченные в формате, который может быть обработан браузерами?

Ответ №2:

Я думаю, что первый подход является лучшим. Проблема с использованием таких классов left заключается в том, что в один прекрасный день left внезапно потребуется переместить их вправо. Теперь вам также нужно изменить все классы.

Я бы немного изменил первый набор стилей, чтобы читать:

 #firstblock,
.genblock { float: left; }

#firstblock { background: #000; }
.genblock { background: #006699; }

1. Да, это одновременно и преимущество, и недостаток. Это может быть полезно, если вы никогда не хотите, чтобы ваши разработчики HTML-интерфейса касались CSS. Но это недостаток в том, что ваш CSS имеет тенденцию быть немного больше, и вы используете больше отдельных классов в своей разметке.

Ответ №3:

Идеально оставить любые предложения по форматированию вне HTML (лучше первое). firstblock можно было бы переименовывать sidebar и genblock переименовывать content , например.

Ответ №4:

Это полностью зависит от того, как ваша команда создает и поддерживает HTML и CSS.

Использование буквальных имен классов для определения стилей (.left = float: left) означает, что разработчикам, которые не касаются CSS, проще создавать HTML. Это более доступно для чтения человеком. Недостатком является то, что в конечном итоге вы можете получить множество дополнительных классов, которые в противном случае вам бы не понадобились, если бы вы использовали больше семантических имен классов, основанных на типе содержимого.

Я бы сказал, что небольшие команды должны придерживаться семантических имен классов для более компактной разметки и лучшего разделения контента и стиля. Более крупные команды могут извлечь выгоду из более буквального и подробного использования классов, чтобы упростить долгосрочное обслуживание и создание HTML-кода в управлении.