Site should have

• keywords on each page
• description on each page
• author on each page
• approriate heading ierarchy
• open graph meta tags
• twitter card support

I know that I can use a modifier within a block but,
can I do this ?
<span class="icon icon__item"> lorem ipsum </span>

In the Github example mockup you show that each of the 3 large input fields is a block. However, couldn't it be said that the form is a block and the input field therein are elements? How would BEM prevent one developer/designer from creating inputs-as-blocks and another developer/designer creating form-as-block-and-inputs-as-elements, or encourage them in the right way?

The section „Modifier“ on http://getbem.com/naming/ contains the example .block__mod--mod in the explanation text.

See https://github.com/getbem/getbem.com/blob/d23fbcac1f5e976cbd415cd7737f6d1fd2d0f2c9/src/naming.jsx#L102

Shouldn't it be .block__elem--mod?

After last page movements we need to add proper 404 page

This is discussion about Introduction article on site.

Main goal: Light interest in methodology, tell advantages and basics

Questions, that this article should resolve:

• What problems should you expect, if you do not using structured CSS
• Show, how this problems can be resolved with BEM
• Add FAQ (will be own page - too many questions)
• Put some examples of Blocks, Elements and Modifiers
• Publish introduction on css-weekly (when it will be worth it)

I think these targets will help people to understand basics of BEM and sow some interest in methodology itself.

This article should have some pictures of sample site and it's blocks (it should be more visual, than textual article I think). Link to live demo will be good too.

Articles, that can be linked, or used as inspiration:

• Used and Abused – CSS Inheritance and Our Misuse of the Cascade
• Scaling Down The BEM Methodology For Small Projects

Must watch css videos

Would be great to see review to different approaches to achieve BEM oriented javascript including building examples.

It will be hard to navigate without affix on subpages (I hope they will grow in length soon).

• Navigation bar
• Affix

I have two components:

.button {
  &--primary {
    color: red;
  }
  &--default {
    color: black;
  }
}

.header {
  background: black;
}

Now, my HTML is:

<header class=header>
  <button class="button button--default">
</header>

Inside my header, the default button will not be visible, because the background has the same color of the text.

I'd like to do something like this:

.header {
  background: black;
  &__button {
    color: white;
  }
}

<header class=header>
  <button class="header__button button button--default">
</header>

But it doesn't look so BEMish...

I think the other solution would be to define a variant of .button for just this specific case, but I wanted to check if there is some easier way for this specific case?

Thanks.

I even did not realised that the strips in head are logo. I think there is no reason not to use and official BEM symbol at the front page. Let's take it. We can fulfil the symbol with any background we want.

Other than familiarity, is there a reason BEM settled on the all lowercase syntax that was generally popular for non structured CSS naming conventions?

I'm not sure if there was a particular reason everyone settled on the all lowercase dash separated syntax other than lack of need for a more descriptive syntax, and a desire to match HTML conventions. But CSS is not HTML so is there a reason for them to match? Since BEM is much more descriptive, I like to use mixed case to provide more versatility.

Personally I've settled on BlockName_ElementName-attributeName using PascalCase/ camelCase to invoke a class/variable feel. IMO it's easier to read than block-name__element-name--attribute-name because each name token is blocked together. Also __ and -- look ugly :)

Is there a particular reason BEM settled on all lowercase instead of mixed case? Did I make a grave mistake, or is it purely cosmetic?

I'm not sure if & where this falls into the BEM methodology, but I'm interested in where this might fall.

If I have a block modifier, for example "xmas," and I want the elements within that block to also be xmas themed, how would it be best to do it.

Does a --xmas suffix for every element seem necessary? Or would this be the one use-case for nesting (e.g. block--xmas block__elem { ... }?

Visitors can have ability to edit pages to fix typos and make improvements.

To reach this we should:

• add fork us label
• add edit link at the bottom of all pages taking user to github edit form

if I wanna control all <li> inside a block, can i make the selector .block li{...}?or i should use .block__li?

We should add those:

We need nice quote style and short/long answer.

Let's make new footer with links to twitter and github accounts with appropriate buttons, like follow, star, fork and other

If url ends with index.html, for example (/naming/index.html) - should we redirect user to /naming/ page?

If you or your company using BEM methodology, we will be happy add you logotype at getbem.com.

If you can add link to repository with build scripts or write a quote about How BEM make your life better - we will pick best ones and put them on site too.

Hi guys!
I'm a brazilian designer and developer and i'm currently looking to contribute on some open source projects. I stumbled across getbem and found the content to be super valuable, so i'm willing to translate it to portuguese, would it be ok?

I want to know. if there is an element that many blocks have used it.these blocks are block1,block2,block3... Then ,How should I name this element?

In FAQ section „Why the modifier CSS classes are not represented as a combined selector?“ please add:

You get problem with mixing 2 blocks with shorted modifiers - rules for block modifiers

.block1.-mod {}
.block2.-mod {}

will have the same specificity as rules for block mix

.block1.block2 {}

and can unexpectedly override them.

I pushed it to my github.I can commit it .

Seems to me, that this block is lost from main page, so let's return it.

Hi,

I'm using a table and I'd like all "td" to have a padding of "10px" and I don't want to use the "cellpadding" attribute of the table. In "normal" CSS, I would do something like :

td { padding:10px; }

But I'd like to use BEM. What I did so far is :

.my-table__col { padding:10px; }

It works, but it means that I have to put this class on every "td" element of my array, which produce a HTML bigger than wanted. Is it the only solution or can I use "tag" selector in BEM (I think I read that I shouldn't...).

It would be awesome to build in dist folder and publish only served files in gh-pages. I would like to avoid complicated build processes (like add gulp to move files around), but for start it will suffice.

To reproduce:

1. Go the http://getbem.com
2. Scroll down to the FAQ section
3. Press one of the two first links.

You are then presented with an empty page

I was wondering what would happen in the following instance. I couldn't seem to find an example anywhere. Also I've noticed the last two issues haven't been answered in over a month, is this still active?

<div class="intro">
    <span class="intro__span--title"></span>
    <span class="intro__span"></span>
    <span class="intro__span"></span>
</div>

.intro__span { display: block; }
.intro__span--title { font-size: 1.1em; }

Now the intro__span--title doesn't take on intro__span so do you have to do <span class="intro__span intro__span--title"></span>

Hey,

Noticed the last few questions haven't been answered in almost a month. Is this still active?

I was wondering what would be the correct way to do the following
html:
`

Hi all!

I want to start discussion about goals of getbem.com site and how we planning to achieve them.

"Get BEM" to all people in simplest way

(no matter what size of project are they working on)

To achieve this we trying to separate BEM methodology from concrete libraries and tools, which will decrease threshold of entry in methodology. It is quite obvious, that BEM can be separated into Naming, Structuring and Building steps. Each of those can be used separately and give benefits of structured project or BEM naming in single index.css file.

Those articles are in pretty bad state for now—they have no illustrations, weak examples and very-very short. So we are looking for authors which share our point of view, that can help us to write those articles.

What about bem.info?

We think, that bem.info have too many information and arcticles. Some of them are outdated, some of them are not translated to English. This leads to confusion and produces frustration, that associated with BEM methodology.

What about bem-tools and ENB?

Bem-tools and ENB are concrete build-systems with they own advantages and disadvantages. Otherwise, we are focused on providing clear build instructions (for CSS, JavaScript and templates) which can be implemented in any build-systems.

What about blocks’ libraries?

Concrete block libraries should be chosen and developed by project needs. There are not many ready to use blocks’ libraries out there, so we planning to provide instructions for developing and testing custom blocks libraries.

We think, that all this will help developers to create lots of great libraries for BEM community.

It will let us not rebuild jade templates, when we change css files. Maybe it be better and faster.

Uglifying slowing our build flow, so we should exclude it from dev flow, and include only for production github pages.

I'm wondering how to re-use base components within other components. I created a linklist with base-styling and I'm reusing it as part of a larger component. Within the scope of this component, the linklist requires additional styling. Applying this styling, is it …

• A) an element, because it's used within a component/block – makes it easier to scope component-related styles within the component
• B) a modifier, because it extends the base styling – feels like it respects the idea of BEM more

Or is there an option C) it depends?

• If the adjustments are one use-case only -> A
• If they are global modifiers -> B

<div class="component">
   <ul class="linklist linklist--mod"> OR
   <ul class="linklist component__linklist">
      <li class="linklist__item"> … </li>
   </ul>
</div>

// file lists.less
.linklist {
   …
   &__item {
   }

   // B)
   &--mod {
   }
}

// file component.less
.component {
   …

   // A)
   &__linklist {
   }
}

Something like this unofficial buttons http://ghbtns.com/, but I think there is "official" star button

Hi.

I have a quite complicated and very specific situation. I found a "fix" but I don't like it. So I will explain it step by step to the "fix" I found. I hope you will be able to purpose to me something better :)

I have the following CSS and HTML:

.my-block.myblock--modifier .myblock__element { ... }

my-block my-block--modifier
  my-block__element /* affected */
    my-block
      my-block__element /* affected but unexpected */

With the --modifier which should affect __element. The problem is that the sub-block element is affected too by the --modifier.

Two solutions:
1. Direct nesting block and element Beurk, dirty

.my-block.myblock--modifier > .myblock__element { ... }

2. Add modifier class on element

.myblock--modifier { ... }
.myblock--modifier__element { ... }

my-block my-block--modifier
  my-block__element my-block--modifier__element
    my-block
      my-block__element /* not affected */

But.
2.1. Can we consider than a block encapsulates its elements ? If yes, we shouldn't care that the block --modifier is affecting __element. A solution can be to always apply modifier on elements too, regardless if its modifier is affecting it or not. It's hard to write but maybe it can be automated on JS frameworks.

2.2. I'm working on a semantic SCSS, with something like this:

@mixin my-block--modifier {
  /* will generate .header__my-block .my-block__element */
  .my-block__element { ... }
}

...

.header {
  /* this header element is called as the block because we assume it is this block */
  &__my-block {
    /* modifier applied with @include so it can be applied for a particular breakpoint */
    @include my-block--modifier;
  }
}

header
  header__my-block my-block
    my-block__element
      my-block
        my-block__element /* affected */

To resolve this situation as I done at 2, I can do :

@mixin my-block--modifier {
  /* will generate .header__my-block__element */
  &__element { ... }
}
...

header
  header__my-block my-block
    header__my-block__element my-block__element
      my-block
        my-block__element /* not affected */

But it create a lot of long classes to apply, with the same 2.1 problem. *header__my-block__... will have to be applied on each element.

Can you advise me better practices ? I tried to numerate my questions and problems so you can give step-by-step responses :)

I'm working on https://github.com/ncoden/caliopen.web-client-ng/tree/refactor/foundation . Take a look if you want to see what give a semantic SCSS on a medium-big project

For instance:

<div class="post__header">
    <div class="user-card">
        <div class="user-card__userpic">
            <img class="userpic userpic_type_round".../>
        </div>
        <div class="user-card__text">
            <span class="user-card__username">User Name</span>

            <!-- here. it's ok? -->
            <span class="post__meta">2 hours ago</span>

        </div>
    </div>
</div>

Or just do not worry and do all these things as elements of appropriate blocks?

If I building the project from BEM-like filestructure — all images are in their block's folders. I think it is another block technology. So I should move images to some ./assets/images/ folder and rebase url's in CSS.

How do you manage your image files?

I think it can be good to have a note about this issue in build docs. Thanks.

What is the recommendation for id naming? I would assume that an id (#) would have the same rules as a block, but is BEM intended only for class naming and not ids?

I have this LESS:

.foo-bar {
  &__el1 {
    height: 10px;
  }
  &__el2 {
    height: 15px;
  }
  &__el3 {
    height: 10px;
  }
}

now... I want to add some theming variations to it:

.foo-bar {
  &--sm {
    // here something to change the height of my 3 elements...
  }
  [...]
}

Obviously I don't want to apply the --sm variation to each element of my component, but I want to add it just to the component and changing the rest accordingly.

How to proceed?
Should I repeat all the elements name by hand?
Doing so, when I want to rename a component, I'll have to manually rename all of them.

.foo-bar {
  &--sm {
    .foo-bar__el1 {
      height: 5px;
     }
     [...]
   }
}

@f0rmat1k proposed awesome idea - start to write blog posts about BEM and different ways of building it with vary of tools.

If you are interested in creating glorious blog - write us! We will be happy to roll out http://blog.getbem.com site.

of interface and so usign it gives answers

usign –> using

Hi -- apologies for just jumping in as a stranger. But as an information and UX designer, I was interested in learning about BEM but then very confused by the Naming page. The problem is that you seem to have a conceptual hierarchy (top level: Block, Element, Modifier; each has lower levels of Naming, HTML, CSS) but the top level names are presented at the same font size as the lower levels -- plus, the colorizing of the top level names with different colors works against the principles of gestalt theory, which show that humans group things of the same color, separate things of different colors.

Possible solution: bump the Naming, HTML, and CSS down to

, set Block, Element, and Modifier to the same color (doesn't have to be the same color as the body text!).

Thought I'd find out what this BEM stuff is. Now I won't. Ever! (http://getbem.com on wp8.1)

https://twitter.com/bleedo/status/728106291269275649

It would be nice to have list of links to additional materials, that could help beginners to start making sites.

After #65 it will be possible to pre-generate html pages to avoid tiny lag before page rendering.

https://github.com/markdalgleish/static-site-generator-webpack-plugin

blockquote need some love and CSS:

Info can be taken from git history. Looks like bem.info does similar thing.

There are some other methodologies in a wild:

• OOCSS - Object Oriented CSS
• ACSS - Atomic CSS
• oCSS - organic cascade style sheet
• SMACSS - Scalable and Modular Architecture for CSS

We should have separate article with comparison of those architectures, which will be linked from site. I think it should be article on smashingmagazine or similar resource.

Must watch css videos
OOCSS, ACSS, BEM, SMACSS by Antti Hiljá.

For now we have half-working hot reload, because of /introduction/index.html files - webpack-dev-server is not doing magic on them (only on index.html).

Using react-router will fix this, but urls will be a bit different.

Example snippet says:

.menu { @include reset-list; } .menu__item { @include reset-list-item; }

Shouldn't that be reset-menu and reset-menu-item?

http://getbem.com/faq/#global-css-resets