Updated BEM form mark-up,

Before (attempting) to use BEM, I'd mark my forms up something like this:

<form> 

    <h3 class="title">Form Heading <small>(if small tag is added)</small></h3>
    <p>Short paragraph of text...</p>

    <div class="form-group">
        <label class="label">Username <em>*</em></label>
        <div class="form-controls">
            <input type="text" />
        </div>
    </div>
    <div class="form-group error">
        <label class="label">Email address <em>*</em></label>
        <div class="form-controls">
            <input type="text" />
        </div>
    </div>
    <div class="form-group">
        <label class="label">Label</label>
        <div class="form-controls">
            <input type="text"  placeholder="" />
        </div>
    </div>
    <div class="form-group">
        <label class="label">Label</label>
        <div class="form-controls">
            <label class="radio"><input type="radio" name="radio" checked="checked" /> Option One</label>
            <label class="radio"><input type="radio" name="radio" /> Option Two</label>
        </div>
    </div>

</form>

It seems, obvious to use form__group instead of form-group and form__controls instead of form-controls. Using elements like this, the form would NEED a class of form on it - otherwise it makes no sense? Seems a bit strange on a default element though, I've not used <ul class="list"> for example, just <ul class="list--bordered"> for example.

I've created some quick, updated mark-up below, would this be acceptable?

<form class="form"> 

    <h3 class="form__title">Form Heading <small>(if small tag is added)</small></h3>
    <p>Short paragraph of text...</p>

    <div class="form__group">
        <label class="form__group-title">Username <em>*</em></label>
        <div class="form__controls">
            <input type="text" />
        </div>
    </div>
    <div class="form__group error">
        <label class="form__group-title">Email address <em>*</em></label>
        <div class="form__controls">
            <input type="text" />
        </div>
    </div>
    <div class="form__group">
        <label class="form__group-title">Label</label>
        <div class="form__controls">
            <input type="text"  placeholder="" />
        </div>
    </div>
    <div class="form__group">
        <label class="form__group-title">Label</label>
        <div class="form__controls">
            <label class="form__radio"><input type="radio" name="radio" checked="checked" /> Option One</label>
            <label class="form__radio"><input type="radio" name="radio" /> Option Two</label>
        </div>
    </div>

</form>

Thanks again!

8 years ago

tadatuta

Hi!

The code you posted is quite fine.

But I'd argue about <ul class="list--bordered"> without list class. Modifiers are to modify something. They shouldn't live by themselves.

And the main reason is that they are about state of a components as well. So you may add/remove/toggle modifiers in runtime via JS (e.g. to make some block invisible you may add --hidden modifier and then remove it again).

Consider modifiers as HTML attributes: they can change the way a tag works but they are useless without tag itself.

8 years ago

moymadethis

Great, so both are pretty much correct? It's all dependant on if a class of form is added or not. What would you recommend? I normally just style <form> rather than a class. Would you add a generic class just so classes like form__group could be used or would you stick with form-group (without a parent class of .form).

I suppose it's the same for lists too so maybe it's better to use list-bordered if there will be no styling on a class of .list as the tag <ul> is style?

8 years ago

tadatuta

We do not use tag selectors at all. But that is mostly because we use a template engine which works in terms of blocks, elements and modifiers:

block('form').tag()('form');

So we initially have form block (with proper class) and just then we define a tag for it.

The same is true for our JS framework which again matches blocks not tags. And as so it's quite natural to use class selectors everywhere.

In order to leave a comment you need to login.