[daGrevis]

How can buttons be responsive? And why there are two hyphens in some, not all, classes like “btn--full“ or “btn--m“?

[componentr]

| And why there are two hyphens in some, not all, classes like “btn--full“ or “btn--m“?

They are Block--Element__Modifiers (BEM). It's a style of css meant for developer readability and code reuse.

In this instance you have the following:

.btn { //the base code for a button }

.btn--s { font-size: 12px; }

.btn--m { font-size: 14px; }

.btn--l { font-size: 20px; border-radius: .25em!important; }

Now if I want to make two buttons, one with small font, the other with large font, I can simply do this:

<button class="btn btn--s"></button> <button class="btn btn--l"></button>

Personally, I like writing with BEM methodology rather than repeating style rules over multiple classes.

[err4nt]

I get the concept of using multiple classes to modify a base style (class="btn btn-small") and even using delimiters in multi-part classnames so you can use regular expressions in your CSS to select groups of classes that conform to a naming convention (I.e. [class^="btn-"] {color:red} would make both class="btn-small" and class="btn-large" red).

What is the advantage to a double delimiter over using a single delimiter? (btn--small)

[lowboy]

.multi-word-block__with-an-element--and-modifier

Also see the .site-search example here http://csswizardry.com/2013/01/mindbemding-getting-your-head...

[err4nt]

Ahh gotcha! I still don't see why they can't do this without doubling up the delimiters just by agreeing on a stricter naming convention ;)

[Kiro]

You mean Block__Element--Modifiers.

[ceejayoz]

Re: responsive buttons, the end of the page shows some:

> Centered, full-width on mobile, with a max-width of 16em on larger screens.