Должны ли исключаться имена классов css, такие как "floatleft", которые непосредственно описывают прикрепленный стиль?

Ответ 1

Отлично, пока вы не перепроектируете, а narrow подсвечивается желтым цветом, center преобразуется влево, а изображение, которое вы назвали floatleft, теперь принадлежит справа.

Я признаю грех использования floatleft и clear в качестве имен класса CSS, но гораздо проще поддерживать ваш CSS, если вы выберете имена, относящиеся к семантическому смыслу контента, например feedback и heroimage.

Ответ 2

Названия презентационных классов

HTML-спецификация ясно из этой проблемы:

Нет никаких дополнительных ограничений на маркеры авторы могут использовать в class, но авторы рекомендуется использовать значения, которые описывают характер контента, а не значения, которые описывают презентация содержимого.

Описывает ли clearleft характер контента? На самом деле, нет. Эрик Мейер сделал об этом несколько лет назад .

Попробуйте найти структурное соотношение между кажущимися несвязанными элементами

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

<p class="duck"></p>
<p class="monkey"></p>
<p class="frog"></p>

Вы можете добавить это правило CSS:

p.duck, p.monkey, p.frog {
    background-color: blue;
}

Но разве они не все животные? Просто добавьте еще один токен animal:

<p class="animal duck"></p>
<p class="animal monkey"></p>
<p class="animal frog"></p>

И измените правило CSS на:

p.animal {
    background-color: blue;
}

Это сложно, и это может быть не всегда возможно, но важно не сдаваться быстро.

Что делать, если вы не можете?

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

Ответ 3

Классы стилей должны быть семантическими. Это отличная статья о дизайне семантической веб-страницы (ну, в любом случае, я нашел ее действительно полезной).

EDIT: я просто прочитал другую статью, в которой есть несколько хороших моментов для использования таких вещей, как display: inline-block, display: table и т.д. вместо floats, Это должно помочь избежать этих надоедливых классов floatleft и clearfix. Создание семантики всегда зависит от вас.

Ответ 4

Основная проблема с наличием классов с именем floatleft, clear или тому подобное заключается в том, что изменения в дизайне подразумевают изменения в разметке HTML. Этого не должно быть, истинное разделение между контентом и презентацией достигается только тогда, когда вы можете повторно использовать одну и ту же разметку в нескольких проектах или даже в средствах массовой информации (подумайте об обмене одним и тем же HTML между настольными и мобильными версиями вашего сайта и только переключением силовых таблиц).

Теперь, для практического примера:). Чтобы добавить ответ Fredrik, LESSCSS позволяет вам скрывать декларации стилей /mixins от разработчиков. Таким образом, вы можете защитить повторно используемые компоненты в таблицах стилей, не опасаясь, чтобы они отображались в вашем HTML.

Пример разметки:

<div class="branding">Company Name</div>

Пример less code:

// example of reusable functions
.noText() {
    color: transparent;
    text-indent: -9999px;
}
.clear-after() {
    &:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
    }
}

.branding {
    .clear-after();
    .noText();
    background-image: ...;
}

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

.branding {
    color: pink;
    font-weight: bold;
}

Ответ 5

Andrew; это хорошо, чтобы дать разумное имя классу и id, которые легко понять для вас и вашего коллеги, которые работают над этим проектом. Для меня классы small, center, floatleft и т.д. Ничего не определяют для меня, потому что, когда вы даете класс-центр, указывающий, что элемент в центре, но есть и другие свойства в этом классе like color, background etc

Например

<div class="wrap">
 <div class="center">lorem</div>
</div>

css:
.center{margin:0 auto;}

в этом примере класс center мне не понятен. но мы можем использовать их как вспомогательный класс.

Например

<div class="wrap">
 <div class="panel center narrow">lorem</div>
</div>

css:
.center{margin:0 auto;}

из приведенного выше примера теперь ясно, какая роль класса center в том, что panel div

ДЛЯ БОЛЬШЕ ПРОВЕРЯЙТЕ ЭТИ ССЫЛКИ:

Каков наилучший способ назвать идентификаторы и классы в CSS и HTML?

http://www.ronniesan.com/blog/entry.php?title=organizing-your-dom-elements-with-the-proper-ids

http://cssglobe.com/post/3745/my-top-10-most-used-css-class-names

Ответ 6

Я думаю, это зависит от того, как вы используете стили.

Содержимое должно быть названо соответствующим образом, так как стиль может измениться, но контент, вероятно, останется прежним.

Например, если у вас есть div, который содержит информацию о запасе, вы должны называть div что-то вроде div class="stockInfo", так что независимо от того, какую презентацию вы можете изменить стили, и имя не будет противоречить эти стили (в отличие от названия div div class="yellow", а затем изменения background-color на красный).

Тем не менее у вас будут "вспомогательные стили", и их следует назвать тем, что они делают.

Например, вы, вероятно, захотите использовать <br />, чтобы очистить некоторые поплавки. В этом случае вполне разумно назвать его <br class="clear" /> и придать ему стиль br {clear:both;}.

Опять же, большинство веб-сайтов float имеют свои изображения справа или слева. Чтобы помочь с этим, вы можете установить <img class="right" src="" /> и <img class="left" src="" />, а затем сопоставить стили, img.right {float:right;} и т.д.

Так что это зависит от использования.

Ответ 7

Имена классов и идентификаторы, описывающие эту функцию, лучше, чем имена, описывающие стиль элемента.

Я обычно не делаю это религиозно, потому что, на мой взгляд, более удобно, т.е. очищать плавающие элементы, используя известный файл clearfix hack вместо добавления clear:both по всем таблицам стилей.

Но я думаю, что LESS и SASS создает интересные возможности, чтобы получить лучшее из обоих миров, потому что у вас могут быть миксины и функции, которые описывают некоторый стиль и все еще имеют семантико-правильные имена, просто вставляя любой "стиль", который вы хотите.

Вместо этого HTML и CSS

<div class="navigation roundedcorners">...</div>
.roundedcorners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

вы можете использовать SASS для создания этого mixin:

=rounded-corners
  -moz-border-radius: 5px
  -webkit-border-radius: 5px
  border-radius: 5px

и включите его в свой класс .navigation следующим образом:

.navigation
  +rounded-corners-5px

который уменьшит ваш HTML до этого:

<div class="navigation">...</div>

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

Ответ 8

Если ваш вопрос:

Рекомендуется ли группировать элементы на основе прикрепленных стилей, чтобы избежать повторение в CSS, даже если это означает презентационную информацию проникает в HTML?

Тогда мой плоский ответ был бы в том, что в реальном мире семантика и представление - это еще не все. Поэтому мой ответ будет: это зависит.

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

... зависит также, если вы прекрасно знаете, что когда внешний вид изменится, тогда также изменится КОД. (например, вы перепроектируете сайт сегодня в XHTML, но вы прекрасно знаете, что когда вы будете повторно выполнять CSS за 2 года, вам нужно, чтобы разметка была HTML5, так что вы в значительной степени измените структуру в любом случае...)

... зависит также, если вы уже опоздали на 3 дня при доставке. Когда вы опаздываете на 3 дня, поверьте мне, начинают появляться такие классные имена, как "nopadding", так как у вас больше нет времени думать прямо о семантике (ни ваш клиент).

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

Ответ 9

Я не думаю, что добавление описательного имени класса в ваш документ действительно большая проблема. Мне легче работать с явными именами классов, такими как "floatleft", в отличие от вещей, которые являются чисто семантическими или зависят от каскада. Обычно это проще для более поздних разработчиков, у которых также нет структуры документа в головах. Вы не хотите использовать их для всего: вы не захотите добавлять класс floatleft к каждому li в меню с левым плаванием, но эти стили очень хороши, когда вам нужно сделать конкретный вещь к одному или нескольким элементам, и вы хотите, чтобы другие разработчики знали, что вы это сделали. Это как положить в <div class="clear"> или даже <div style="clear:both;">: может быть, не самый красивый, но он уверен в том, что вы делаете. Мое эмпирическое правило: все, что заставляет вас думать меньше, сделайте это. EDIT: Как я уже сказал в своем комментарии выше, это наиболее справедливо для классов, которые относятся к очистке и плаванию, т.е. К вещам, которые являются чисто презентационными, не смысловыми, и все же должны упоминаться в HTML. Я думаю, что в этом случае на самом деле предпочтительнее указывать, что вы используете чисто презентационный класс, например floatleft, вместо того, чтобы принудительно привязывать float к некоторому семантическому элементу.

Ответ 10

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

Наличие таких вещей, как center и float-left, может быть полезно, когда вы используете отображаемый текст, который был введен пользователем (например, сообщение на форуме), но для общих целей разметки вам лучше просто добавляя text-align: center и float: left к соответствующим классам. Это особенно помогает, если вы пытаетесь изменить внешний вид своего сайта без значительного изменения HTML. Чем меньше у вас жестко закодировано в ваш шаблон, тем проще изменять CSS только при изменении шаблона. Только этот бит мне стоит.

Как правило, вы действительно должны давать только классы элементов, когда он описывает что содержание, а не , где или , как он отображается. т.е. <span class="movie-information"> вместо <span class="bold">.

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

Единственный раз, когда я когда-либо "группировал" классы, это если они либо отображают одно и то же, либо являются родными братьями и сестрами. Это становится очень беспорядочным в вашем CSS, когда у вас есть элементы со всей вашей страницы, определенные вместе. Вам гораздо лучше группировать свои классы в таблице стилей так, чтобы вы могли их найти позже, вместо того, чтобы сохранять несколько строк, объединив их.

Ответ 11

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

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

Я хочу связать это с соглашением об именах ассоциаций Rails. Рассмотрим это...

class Post < ActiveRecord::Base
    has_one  :personifyable
    has_many :personifications, :through => :personifyable
    has_many :taggables
    has_many :tags, :through => taggables
    belongs_to :destroyers
end

Очевидно, что это не настоящая модель; это то, что я использую, чтобы вести точку. Рассмотрим случай глубоко вложенной зависимости. Эти имена станут смешными - если они еще не (например, в CSS, <div class='mediumwidth floatright centeredtext graytheme master'></div> или что-то вроде того)

Теперь рассмотрим случай, когда у вас разные принципы. Различные разработчики и дизайнеры могут - если не "наиболее определенно будут" - иметь разные причины для использования определенного соглашения об именах. Как это повлияет на время рефакторинга. Я оставлю это для вашего воображения. Кроме того, если ваш бизнес-партнер отмечает новую тенденцию с темами сайтов, которые привлекают трафик - более технически, предположим, что этот бизнес-партнер выполнил некоторые экспериментальные тесты A/B и придумал некоторые спецификации - вы не хотите изменять содержимое (например, HTML и CSS и, возможно, страницы JS) для реализации этого нового стиля.

В заключение, держите подсказки стиля из вашей разметки. Ненавязчиво взаимодействовать с документом в стиле и манипулировать им. Sass дает вам прекрасный способ стилизации сайта, а ваш CSS-фальсификация вашей разметки. jQuery - еще одна потрясающая библиотека UJS. HTML5 дает вам методы, которые делают разметку более гибкой и дают больше информации для CSS и JS.

Ответ 12

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

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

Ответ 13

Вы говорите что-то вроде этого:

.red
{
    color:red;
}

поэтому для использования этого класса:

<ul>
<li class="red">hello</li>
</li>

АЛЬТЕРНАТИВНОЕ РЕШЕНИЕ

ul li
{
    color:red;
}

Использование:

<ul>
    <li>Hello</li>
</ul>

Таким образом вы можете удалить информацию о презентации из контента.

Ответ 14

Я лично называю их близкими к тому, что они будут делать. Скажем, у меня есть класс, который находится в галерее изображений и его основной наиболее используемый класс, он будет чем-то вроде "галереи", или если я устанавливаю границы вокруг вещей, которые должны быть более декоративными, я назову его "decoborder", Я стараюсь держать их полукоротными и несколько связанными с тем, какую задачу они предоставляют. Я не люблю делать такие вещи, как "маленький, большой, H1underlined" или что-нибудь, что может имитировать другой тег или функцию, потому что это может просто запутать. Помимо этого, я думаю, вы действительно должны называть его любым способом, который имеет для вас наибольший смысл.

Ответ 15

Если вопрос является только одним из имен, то для одного конкретного класса...

class="floatleft"

или

class="myClass"

или

class="gibberish"

.... ничего не меняет. Это только разные имена классов. Программирование функций одинаково.

Либо ваш контент и презентация разделены, либо не полностью... независимо от того, как вы создали имена.

Ответ 16

Для чего стоит, если я правильно помню, ключевое слово class в HTML в настоящее время не используется ни для чего другого, кроме CSS stylesheets. Таким образом, пример, который вы предоставили...

<div class="foo">Some info about foo</div>
...
<div class="bar">Info about unrelated topic bar</div>

... на самом деле не был бы способом идентификации данных. Я бы предложил либо атрибут name, либо id, если вы действительно хотите идентифицировать данные в своих тегах HTML. (Оба они имеют несколько разные виды использования - name обычно используется для запросов на стороне сервера, а id может быть стилизован и, как правило, более универсален. Идентификаторы должны быть уникальными, но имена не обязательно должны быть.) Вы можете проверить дальнейшая документация с использованием спецификации HTML W3C.

Короче говоря - не беспокойтесь о привязке контента к презентации через ваши классы тегов; пока они специально не используются для чего-либо еще, они не будут иметь никакого реального эффекта на ваш сырой контент. Таким образом, я бы назвал ваши классы тем, что вы хотите, если это имеет смысл. Лично я ошибался бы на стороне логического именования по сравнению с именем стиля (например, имя класса "editorcomment" вместо класса "graybgfloatleft" или что-то в этом роде), но, в конце концов, ваши имена классов не собираются связывать ваши данные в вашу презентацию, такие как идентификатор или имя.

Удачи.

Ответ 17

Я разработчик перед программистом, поэтому для меня я использую что-то вроде класса floatleft css как своего рода UtilityMethod.
Смысл, мой класс css - "floatleft"... и что все это делает класс. поэтому, если я скажу <div class="floatleft"></div> в своем уме, что говорит "сделайте этот div float слева".
Поэтому, если этому Div также нужен синий фон, и это мой главный заголовок, у него будет другой класс для этого, и я получаю <div class="mainheader floatleft"></div>

Выполнение этого способа также позволяет избежать проблем с рефакторингом. Если я изменю свой дизайн позже, я буду знать, что "floatleft" ВСЕГДА плывет все, что осталось, и больше ничего.

Ответ 18

Я сделал оба, и я должен сказать, что сейчас я склоняюсь к использованию не презентационных классных имен. Я нашел эту отличную структуру под названием OOCSS https://github.com/stubbornella/oocss/wiki, которая мне очень помогла, когда я создавал новый макет для своего веб-приложения и так хорошо соответствовал моим требованиям,

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

Offcourse это означает, что элемент в вашем html может выглядеть так: <div class="unit size1of3 lastUnit"> Но разве это не то, что такое HTML? Убедитесь, что ваша информация представлена ​​правильно.

Я не согласен на всю точку редизайна, честно говоря, когда вы должны перепроектировать свой сайт, большинство CSS все равно выходит за дверь. И, разделив CSS на правильные классы для интервала/заголовка/текста, у него становится меньше шансов иметь противоречивые правила CSS, которые беспорядочно заполняют, например ul li div{}

Отключение классов не описывает содержимое, но поскольку CSS не позволяет наследование классов, и вы должны поддерживать старые технологии, такие как IE6... действительно ли это имеет значение? И действительно ли классные имена, такие как животное и утка, делают лучший html? Id нравится думать, что HTML для браузера, и когда браузер делает это, это для людей.

Ответ 19

Это зависит, иногда имеет смысл просто добавить класс, чтобы позволить элементу float. Проблема с семантическим подходом заключается в том, что вы закончите шарик грязи классов css. Конечно, имена, такие как redLink или blackHeader, должны быть запрещены, но иногда вам понадобятся маленькие помощники, такие как "clear" или "floatLeft".

Прочитайте эту статью Николь Салливан, которая объясняет это глубоко.

Ответ 20

Есть две вещи, которые, как я чувствую, полностью исключены из этих обсуждений слишком часто. Во-первых, ПОЧЕМУ вы хотели бы быть все семантическими или не все. Ключевые слова: Branding и Skinning. Названия презентационных классов могут быть оправданными, если вы работаете на некоторых внутренних, ведомственных веб-сайтах, где брендинг и скинирование никогда в течение миллиона лет не получат финансирование. С другой стороны, клиентские сайты, такие как производители автомобилей и универмаги, живут в мире, где каждый новый продукт, который запускается, приводит к совершенно новому скину для веб-сайта. Новые цвета, новый макет, новые фоновые изображения, и все это приводит к дизайнерам, которые должны иметь возможность внести изменения исключительно в css, чтобы у них не было шансов, что они могут сломать любой рабочий php (или что-то-вы). Существуют также фирменные сайты, в которых у вас несколько скинов, которые могут работать одновременно на одном и том же сайте. На сайтах с этим требованием вы не можете иметь визуальные изменения, влияющие на html, или вы в конечном итоге нарушаете любой другой бренд только для обновления одного из них. В этих ситуациях семантические имена классов являются необходимостью.

Второе, что часто не учитывается, заключается в том, как бороться с проблемой повторения групп свойств, созданных семантическими именами классов, как в:

.content-nav {
    float: left;
    margin-right: 10px;
    background-color: #ccc;
}

.content-nav .user-photo {
    float: left;
    margin-right: 10px;
    border: solid 1px #000;
}

.content-nav .user-display-name {
    float: left;
    margin-right: 10px;
    text-decoration: underline;
}

Люди часто указывают на это как на недостаток семантических имен, и я думаю, что это действительная точка. С другой стороны, я хотел бы отметить, что есть инструменты, которые могут помочь вам сохранить семантический CSS-DRY, такой как LESS и SASS. Я видел еще одного комментатора, упомянутого выше, но я просто подумал, что этот момент стоит выделить.