CSS: как организовать структуру классов?

Question

[daMage]

Сейчас пытаюсь создать некий шаблон проектирования, но есть несколько момментов, которые не покидают меня. Хочу придерживаться концепции независимых блоков, прям как в БЭМ. С глобальными стилями всё вроде бы понятно: я про различные кнопки, шрифты и т.п, но вот допустим мне нужно сделать уникальный элемент на странице news. По БЭМ'у я должен написать: news-block, news-block-element. Что делать, если мне придется использовать этот же елемент уже на другой странице? Убирать news-? Как быть в ситуации(если проект большой), когда в дальнейшем я могу использовать block снова на другой странице и переопределю стили?

И еще бывают ситуации когда происходит конфликт имен классов. Например есть блок для категорий, соответственно это .cats и в нем список категорий. Каким классом называть этот список? .cats-cats? Или быть может список называть cats, а родителя cats-wrapper?

Comments

[bezymenka]

Использование LESS или SASS не подходит в данном случае?

[daMage]

Мне чистый css больше нравится.

[sim3x]

@bezymenka можно использовать less-bootstrap с бэм именованием.

[sim3x]

@bezymenka можно использовать less-bootstrap с бэм именованием. БЭМ -- это методология, а ее реализацию можно сделать разными путями

[bezymenka]

@daMage не знаю, мне кажется после less работать на чистом css не захочется )))

[bezymenka]

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

[Алексей Ярошевич]

@bezymenka Препроцессоры (Styl еще) — это другое. Но часто препроцессоры только сбивают с толку, потому что бэм отчасти решает похожие задачи, которые им поставлены, правда совсем другим путем.

Answer 1

[sergealmazov]

Стоит использовать news-block__element, news-block__element_modifier.

Если этот же элемент будете использовать на другой странице - используйте news-block__element. Убирать ничего не надо.

Comments

[daMage]

Мне не понятно с какого уровня идет наименование. Разве БЭМ не подразумевает наличие родителя в имени класса? Допустим есть страница articles, значит
body.articles
div.articles-article

[Krickt]

@daMage БЭМ методология говорит, что нужно избегать всякого каскада. Т.е. таких селекторов как body.articles, .articles .content, .articles ul li, body h1 и других

[Алексей Ярошевич]

@daMage бэм говорит, если не вы хотите того, то делайте так, если не хотите этого — то делайте так. Фактически это руководство молодого бойца с описанием всех подводных камней, которые любят совершать начинающие, поскольку безоговорочно верят в CSS/HTML или по иным причинам.
При чем, материалами и примерами по каждому пункту интернет изобилует, нужно только захотеть их поискать и сделать это ;-).

[Алексей Ярошевич]

@daMage но не только, на самом деле. Оно еще и рассказывает про более сложные конструкции, и правила, которые избавляют от многих проблем в html/css/js в долгосрочных проектах. Цена — небольшой оверхед по времени. Но при соответствующих навыках — оверхед часто превращается в экономию.

Answer 2

[Николай Васильчук]

БЭМ не пишут руками. Для этого есть всякие bemtools.

Comments

[Алексей Ярошевич]

Пишут ;-) Но инструментами удобнее, конечно. Просто иногда возможности нет — сжатые сроки, большой проект, и т.п.

Answer 3

[Krickt]

Мне кажется вам стоит почитать вот эту статью, в ней все довольно понятно.
habrahabr.ru/post/203440
Однако стоит понимать, что БЭМ удобен в основном на больших проектах. Если вы делаете лендинг, сайт-визитку и подобное, вам проще использовать обычный каскад.

Comments

[Алексей Ярошевич]

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