Вложенные div и семантика CSS - PullRequest
Новая
       1

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

0 голосов
/ 11 января 2011

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

Просто примечание. Пожалуйста, не обращайте внимания на любые ошибки или пропущенные атрибуты элемента, так как я ищу предложения, касающиеся только разработки самого файла .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 A) 

<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 не принес много пользы) или это исключительно личные предпочтения?

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

Ответы [ 2 ]

1 голос
/ 11 января 2011

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

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

Примечание: в этом примере вы экономите 22 байта, чтобы сделать то же самое с помощью опции A. Может показаться, что это не так уж много., но это может сложить.

1 голос
/ 11 января 2011

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

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

...