имена классов в html верстке
 

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

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

в сочетании с domMaster и css_стилей в js коде (пример) получается убойная штука.

вообще, для меня основное преимущество подобных подходов - упрощение поддержки, т.е. поменьше наследования и связей. Вот недавно понял, что лучше написать отдельные стили для нескольких контейнеров, пусть и похожих, чем сделать один компонент, который учитывает все варианты. Дизайнеры, они ведь такие люди, что обязательно скажут: "А вот здесь пожалуйста на 1px больше" :) От префиксов сейчас решил попробовать отказаться, по-моему они не дают значительной выгоды. Для имен использую camelCase (имяКомпонента-имяЭлемената), да и вообще на клиентской стороне - в результате проще искать по проекту. И собственно по этой же причине идея с дефисом в именах мне больше всего не нравится, в этом случае vim считает такое имя, состоящим из нескольких слов.

в чем убойность? Мне такой вариант больше нравится

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

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

<style>
    .b-project_ubutton--icon .icon {....}
</style>
<button class="b-project_ubutton b-project_ubutton--icon">
    <span class="b-project_ubutton-icon icon">..</span>
</button>.

но это на этапе разработке а позже ".icon" привожу по возможности к полной форме

<style>
    .b-project_ubutton--icon .b-project_ubutton-icon {....}
</style>
<button class="b-project_ubutton b-project_ubutton--icon">
    <span class="b-project_ubutton-icon">..</span>
</button>

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

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

вообще, наверное, в первую очередь дело в том, что я решил сделать для форм какой-то общий стиль. А потом пожалел. Но в любом случае, я модификаторами почти не пользуюсь, посмотрим...

... пример придумал, в контакте есть информация о пользователе (имя: ..., университет: ..., город: ...) в списке пользователей и на страничке профайла. Ты бы сделал это отдельным компонентом?

лакировка. теперь "компонент" называют "объектом" :) это слово хорошо вписывается и в интернете встречается.

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

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

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

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

vflash,


А есть ссылка на какойнибудь готовый сайт с использованием этого приёма?

я по коду лучше пойму....

x-yuri,

<div class="clear_fix miniblock">
  <div class="label fl_l">Любимые игры:</div>
  <div class="labeled fl_l">...</div>
</div>

если речь об этом то там вроде только в одном месте. потому не стал бы делать новый объект. можно выделить в отдельный объект а не понравиться потом слить обратно, и это нормально.

объект уже употреблялся для верстки как "ОПП верстка", потому решил что лучше не плодить термины. нет такой проблемы как у БЭМ. в БЭМ это блок, а блок уже давно употребляется в верстке как div элемент или display:block; . у меня както с этим путаница, потому не нравиться их термин.

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

тут мои
http://vflash.ru/xm/dev.html
http://mail.rambler.ru/m/beta/#/contacts
есть еше но не покажу.