FAQ: How do I get started with BEM?

[adamvoss]

See the title for for what I see as the motivating question underlying the following.

Context: For most intents and purposes I am not a web developer, I saw the BEM acronym parenthetically after CSS on the Internet and did a search for CSS BEM which landed me at your site. I mentions this because I am giving my user experience but it may not be relevant if I am not a target user. I hope there may be something here you will find useful for understanding how a user may interact with your site.

The web site looks good and seems detailed. I think were to spend the time to read through the entire site and follow some of the links, I could piece together a pretty good understanding of what BEM is. In my case I was just trying to get a a quick high-level/conceptual understanding; basically a little more than what the acronym stood for so I would recognize it if I saw it elsewhere or remember it if I found I needed such a thing for a project in the future and could return to learn more. In my case felt the transition between concept and details happened to quickly to meet my lack of knowledge. In my case I landed directly on the "Introduction" page since that was the top Google Result (getbem has the top 3 results but none are the home page).

Suggestions:

I think this may be somewhat related to this from the Project Goals #8

To achieve this we trying to separate BEM methodology from concrete libraries and tools, which will decrease threshold of entry in methodology.

I think mention of that distinction on the website would be good because it lets users know that tools do exist and explains the conspicuous absence of them on the website. Or perhaps it is something the really does not need tools, and it could be clearer (see below) about not needing tools.

Front-page

Block Element Modifier is a add descriptive adjective or adjectives here methodology that helps you to create reusable components and code sharing in front-end development

What kind of methodology is it? Software development, code reuse, deployment, etc.

BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.

I find this to be the most clearly stated definition of BEM on the website. However, I am left not knowing if it is actually the definition. Is it a methodology (as previously stated) or a naming convention?

Introduction

I imagine the site workflow is has users start on the home page which gives nice descriptions for what to expect on each page. Search engines (or links) mean that users are easily bypass the homepage. I think it would be appropriate and even preferred to start the introduction page with an explanation of what BEM is, even if some of the information is also on the home page.

FAQ

BEM provides solutions for all the frontend technologies: CSS, JavaScript, templating; and also for building process of your web application.

Much of the content suggests BEM is about CSS but that is not explicitly stated anywhere. My naive interpretation of this is that the principles are generic and could be applied to any number of things, but in practice it concerns CSS. If I am right about that I would propose making the website about CSS and have an FAQ question along the lines of "Can I use BEM for things other than CSS?"

[tadatuta]

You definitely can use BEM for any other things than CSS. The idea behind BEM is much more like idea of Web Components (or just component approach to web development).

Please take a look at https://en.bem.info for more info.