Вложенные divs и семантика CSS

У меня такое ощущение, что это субъективный вопрос, но, возможно, есть что-то где-то в сетях, которые пытались стандартизировать это уже, и я просто не знаю об этом (но кто-то еще, кто опубликует здесь).Вложенные divs и семантика CSS

Просто примечание. Пожалуйста, не обращайте внимания на любые ошибки или пропущенные атрибуты элементов, поскольку я ищу предложения исключительно относительно создания самого файла .css. Оба метода работают. Тем не менее, я лично предпочитаю .css B, поскольку он кажется более правильным, но обслуживание может быть больно, если вы работаете с вложенными div, чьи родители меняют имена классов.

Предположим, у меня простая форма на странице, содержащейся внутри контейнера div. Форма имеет два трех поля: два входных текстовых поля и одно текстовое поле (из, тема и сообщение).

Какой бы более "семантически правильно" CSS сопровождать следующий вид:

<div id="contact"> 
<form action="/index.php/forms/contact" method="POST"> 
    <label for="txt_replyto">From:</label><input type="text" id="txt_replyto"></input> 
    <label for="txt_replyto">Subject:</label><input type="text" id="txt_subject"></input> 
    <label for="txt_replyto">Message:</label><textarea id="txt_msg"></textarea> 
</form>

(.css)

<style> 
div#contact { width: 350px; } 
div#contact form { width: 100%; } 
div#contact label { float: left; width: 20%; text-align: right; } 
div#contact input { margin-left: 1%; width: 79%; float: left; } 
div#contact textarea { margin-left: 1%; width: 79%; float: left; } 
</style>

или

(. css B)

<style> 
div#contact  { width: 350px; } 
div#contact form  { width: 100%; } 
div#contact form label { float: left; width: 20%; text-align: right; } 
div#contact form input { margin-left: 1%; width: 79%; float: left; } 
div#contact form textarea { margin-left: 1%; width: 79%; float: left; } 
</style>

Существуют ли какие-либо предопределенные стандарты для такого рода вещей (в Google не было много этого), или это исключительно личное предпочтение?

Редактировать: Thar. Обновлено на основе напоминания Джека :)

источник

2011-01-11 Demian Brecht

Есть ли причина, по которой вы не используете фактический элемент ярлыка? http://www.w3.org/TR/html401/interact/forms.html#h-17.9 – JackCA

Кроме того, что забыл, что он был там? ;) Неа. Однако это изменит. –

Лично я бы также дал форму своего идентификатора, а затем использовал это в css ala form # contact. Если вы сделаете эти два изменения, это полностью восстановит ваш вопрос и настройку, но может выглядеть лучше. – JackCA

Я не знаю, существует ли какой-либо тип «предопределенного стандарта» для такого рода вещей. Тем не менее, во всех моих CSS я всегда придерживаюсь мнения, что меньше. И это то, что я бы рекомендовал: напишите наименьшее количество хорошего, чистого и приемлемого кода, чтобы получить результат.

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

Замечание: вы сохраняете 22 байта в этом примере, чтобы сделать то же самое, используя опцию A. Это может показаться не очень-то большим, но оно может складываться.

источник

2011-01-11 03:28:15

Возможно, я слишком философский, но если обе таблицы стилей дают одинаковый результат, то они семантически эквивалентны с точки зрения браузера.

Если мы говорим о человеческой читаемости, тогда я обычно применяю принцип «меньше кода лучше кода», если нет веской причины не делать этого. В этом случае я не могу думать об одном.

источник

2011-01-11 03:28:14

Вложенные divs и семантика CSS

ответ

Смежные вопросы