Написание семантической разметки (CSS / HTML)

Question

Написание семантической разметки (CSS / HTML)

0

Из того, что я понял до сих пор, для оформления веб-страниц применяются следующие соглашения:

Использовать классы для повторно используемых элементов и идентификатора для уникальных элементов
Не используйте несимметричные классы или id (например .float {float: left;})
Вместо этого назовите свои селекторы в соответствии с ролями элементов, а не их стилем.

У меня на самом деле есть 2 вопроса:

Когда элемент считается неземным? Является ли именование как .col3 неэксантичным? - Имо, он определяет структурное свойство элемента, а не только его стиль?
Как мы должны писать CSS в соответствии с этими правилами? Предположим, что у меня это было, и мне нужно было установить свойства float как в контейнере, так и в блоках:

 <div id="container">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
 </div>
 ----------------------- <!-- Now which CSS is best practice? //-->
 <style id="style_1">
   .box, #container { 
      float: left; 
   }
   #container { 
      other props... 
   }
 </style>

 <style id="style_2">
   .box { 
      float: left;
   }
   #container { 
      float: left;
      other props...
   }
 </style>

 <style id="style_3">
   .<commonclass for both divs, to be added to both> { 
      float: left;
   }
   .box { 
      float: left;
   }
   #container { 
      other properties....
   }
 </style>

Какой стиль - лучшая практика?

Tyblitz 21 окт. 2013, в 14:50

Источник

Теги:

html

css

styling

semantic-markup

2 ответа

0

Семантика имеет значение. Если имеет смысл иметь div с именем .col3 то это не является неземным.
Стиль 1 является предпочтительным, потому что вы не дублируете свойства CSS везде. Он также уменьшает размер файла CSS.

Я не понимаю стиль 3, какой смысл определять .box снова, когда вы уже определили его выше? Вы упомянули оба div, добавили только a . но один id id.

Надеюсь это поможет.

Daniel 21 окт. 2013, в 10:10

0

По поводу вашего вопроса, да .box {float: left;} должен был быть .box {other properties...}
Tyblitz 21 окт. 2013, в 21:10

Ещё вопросы

По поводу вашего вопроса, да .box {float: left;} должен был быть .box {other properties...}

David Randall · Accepted Answer · 2013-10-21T10-14-00.000Z

Я бы назвал семантические имена, которые описывают контент, который вы строите, а не те, которые описывают, как выглядит контент, например. В вашем примере вы используете класс col3. На мой взгляд, это прекрасно, поскольку он описывает часть контента, а не то, как он выглядит. Скажем, например, у нас есть статья, и мы хотим, чтобы первый абзац (в первую очередь) был написан несколько иначе:

<article>
  <h1>Article title</h1>
  <p>Introductory paragraph</p>
  <p>Next paragraph</p>
<article>

Мы могли бы добавить класс в первый абзац, чтобы мы могли установить некоторые значения CSS. Семантическое имя класса в этом экземпляре, возможно, будет "standfirst", поскольку оно описывает контент.

Не семантическое имя класса, возможно, будет "синим-синим текстом", поскольку оно описывает его презентацию. Кроме того, мы можем в какой-то момент захотеть изменить стиль, чтобы он был зеленым. Теперь у нас будет имя класса "большой синий текст", который на самом деле теперь зеленый. Более подробно о семантике я бы предложил прочитать эту статью http://css-tricks.com/semantic-class-names/

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

#container,
.box {
  float: left;
}
#container {
  styles
}
.box {
  styles
}

Спасибо за прояснение моих сомнений и указание мне на статью!