CSS Framework & "Semantic Naming" - PullRequest
Новая
       18

CSS Framework & "Semantic Naming"

0 голосов
/ 21 июля 2009

Я рассмотрел две CSS-фреймворки, которые могут сэкономить мне много времени (Blueprint, 960gs), но у меня есть вопросы о том, как их использовать и соблюдать веб-стандарты. Например, Blueprint имеет такие вещи, как:

<div class="span-24 last">

и 960gs, как: <div class="grid_6 prefix_3 suffix_3">

Это лично меня не беспокоит, но я видел упоминание о том, что использование этих нестандартных имен для классов не рекомендуется и идет вразрез с веб-стандартами. Как более опытный разработчик, я не знаком с последними веб-стандартами, доступностью и т. Д., Но хотел бы, по крайней мере, оставаться несколько совместимым. Будет ли просто добавление значимых идентификаторов работать? Например: <div class="grid_12" id="menu"> Есть ли лучшая практика при использовании таких фреймворков CSS?

Примечание: мне также нравится предложение Николаса об использовании Compass / Sass!

Ответы [ 6 ]

8 голосов
/ 21 июля 2009

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

Для классов нет «стандартных» имен, вы можете называть их как угодно, поэтому я бы не стал беспокоиться об именовании классов каким-либо особым образом с точки зрения технических стандартов.

Кроме того, поскольку классы, создаваемые платформой CSS Framework, не предназначены для редактирования людьми, а используются только в контексте платформы, их отсутствие семантического значения не имеет значения вне структуры.

4 голосов
/ 21 июля 2009

Я не понимаю, как 

<div class="span-24 last">

и 

<div class="grid_6 prefix_3 suffix_3">

не соответствует веб-стандартам. Это просто несколько классов, назначенных одному элементу.

3 голосов
/ 21 июля 2009

В конечном итоге ваше сэкономленное время будет потеряно. Вы можете навсегда переключаться между CSS и HTML, пытаясь вспомнить, что такое grid_6. Описательные имена классов очень помогут.

2 голосов
/ 26 июля 2009

Выезд Компас .

Он использует Sass (который компилируется в CSS) и использует функции ряда популярных CSS-фреймворков. (Это не так страшно / странно, как кажется. Sass - отличная замена CSS, даже без поддержки фреймворка CSS.)

Вместо того, чтобы делать 

<ul class="column_6">...</ul>

Вы делаете: 

ul.naviation
  color: #fff
  +column(6)

, который компилируется в 

ul.navigation {
  color: #fff;
  /* all the rules for the 6th column a placed here */
}

Вы можете использовать преимущества CSS-фреймворков, сохраняя разметку чистой и семантической.

1 голос
/ 21 июля 2009

Не использовать CSS Framework
потому что ваш сайт не будет использовать все, что предлагает фреймворк.

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

Единственная часть, которую я бы использовал - это файл reset.css из 960.gs
Файл сброса css широко используется для удаления всего стандартного расстояния белого с элементами DOM.

0 голосов
/ 22 июля 2009

Вы можете попробовать именовать элементы с идентификатором предстоящих спецификаций имени html5: hml5 лист , который довольно широко указан для использования везде. Если вы придерживаетесь этих соглашений об именах, вам следует помнить назначение элемента дизайна. Если требуется большая точность, попробуйте использовать какой-нибудь понятный человеку формат, который вы поймете - удобство написания - ключ к качественному коду.

Если вас больше интересует эта тема, прочитайте статью в журнале Smashing "html5 и будущее Интернета" (google it: ограничение количества новых пользовательских ссылок: /)

...