getbem / getbem.github.io Goto Github PK
View Code? Open in Web Editor NEWGet BEM to all people in simplest way
Home Page: http://getbem.com/
License: MIT License
Get BEM to all people in simplest way
Home Page: http://getbem.com/
License: MIT License
Something like this unofficial buttons http://ghbtns.com/, but I think there is "official" star button
Site should have
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?
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?
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:
`
Info can be taken from git history. Looks like bem.info does similar thing.
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?
I pushed it to my github.I can commit it .
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.
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?
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...).
After last page movements we need to add proper 404 page
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 …
Or is there an option C) it depends?
<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 {
}
}
Example snippet says:
.menu { @include reset-list; } .menu__item { @include reset-list-item; }
Shouldn't that be reset-menu
and reset-menu-item
?
To reproduce:
You are then presented with an empty page
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.
I know that I can use a modifier within a block but,
can I do this ?
<span class="icon icon__item"> lorem ipsum </span>
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?
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.
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 Beurk, dirtyblock
and element
.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
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.
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;
}
[...]
}
}
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>
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 { ... }
?
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
@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.
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.
It would be nice to have list of links to additional materials, that could help beginners to start making sites.
Uglifying slowing our build flow, so we should exclude it from dev flow, and include only for production github pages.
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.
if I wanna control all <li>
inside a block, can i make the selector .block li{...}
?or i should use .block__li
?
Thought I'd find out what this BEM stuff is. Now I won't. Ever! (http://getbem.com on wp8.1)
Let's make new footer with links to twitter and github accounts with appropriate buttons, like follow, star, fork and other
This is discussion about Introduction article on site.
Main goal: Light interest in methodology, tell advantages and basics
Questions, that this article should resolve:
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:
of interface and so usign it gives answers
usign –> using
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
It will be hard to navigate without affix on subpages (I hope they will grow in length soon).
Seems to me, that this block is lost from main page, so let's return it.
Would be great to see review to different approaches to achieve BEM oriented javascript including building examples.
We need nice quote style and short/long answer.
It will let us not rebuild jade templates, when we change css files. Maybe it be better and faster.
Visitors can have ability to edit pages to fix typos and make improvements.
To reach this we should:
If url ends with index.html
, for example (/naming/index.html
) - should we redirect user to /naming/
page?
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?
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.
There are some other methodologies in a wild:
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á.
Hi all!
I want to start discussion about goals of getbem.com site and how we planning to achieve them.
(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.
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.
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.
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.
The section „Modifier“ on http://getbem.com/naming/ contains the example .block__mod--mod
in the explanation text.
Shouldn't it be .block__elem--mod
?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.