CSS Frameworks & "Semantic Naming"

Question

Я рассмотрел две рамки 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-фреймворков, подобных этим?

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

В конечном итоге ваше сохраненное время будет потеряно. Вы можете оказаться навсегда, щелкая между вашим css и html, пытаясь вспомнить, что такое «grid_6». Описательные имена классов очень помогут.

Answer 4

Я не вижу, как

<div class="span-24 last"> 

и

<div class="grid_6 prefix_3 suffix_3"> 

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

Answer 5

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

Если вы заинтересованы больше в этой теме прочитать всю статью о разбивая журнал «HTML5 и будущий Интернет» (Google это: новый лимит ссылок пользователя: /)

Answer 6

ЗАКАНЧИВАТЬ Compass.

Он использует 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, сохраняя при этом свою разметку c худой и смысловой.