CODEWITHSUNDEEP
htmlcssnaming-conventionsbem
howard10
howard10

Reputation: 1851

BEM component / object separation

We're using BEM extensively but are running into several ways of structuring and naming components and wanted opinions on best practice. We're using the notion of 'objects' for reusable components (e.g. .box, .media, .btn) and 'components' for designed UI components that tend to be a combination of objects.

As an example of the issue, consider this from a wireframe:

Wireframe

The idea being than an image is overlayed with the number of other images available for this particular item.

There are at least two ways of tackling this layout and we're trying to work out the best option.

Option 1

Apply the layout in markup/CSS rather than as a component. All of the styles below could then be re-used between projects; none are project-specific.

HTML:

<div class="relatively-positioned">
    <img src="..." alt="" />
    <div class="box box--rounded  absolutely-positioned offset--10-10">12</div>
</div>

CSS:

.box {
    padding: 5px;
}

.box--rounded {
    border-radius: 5px;
}

.relatively-positioned { position: relative; }
.absolute-positioned { position: absolute; }

.offset--10-10 { top: 10px; left: 10px; }

Option 2

Implement this as a component made up of an image and a box for the count.

HTML:

<div class="image-preview">
    <img class="image-preview__img" ... />
    <div class="image-preview__count  box box--rounded">12</div>
</div>

CSS:

The same CSS would apply for box / box--rounded and would be generic for re-use between projects. The component would be defined for this project only:

.image-preview {
    position: relative;
}

.image-preview__count {
    position: absolute;
    top: 10px;
    left: 10px;
}

Thoughts, opinions and other ideas all greatly received!

Upvotes: 1

Views: 615

Answers (2)

Paleo
Paleo

Reputation: 23682

The best choice depends of your design. Repeating visual patterns can be implemented as reusable blocks, and semantic should be used for all specific cases.

Your second option is a mix of a semantic pattern (image-preview) and a visual pattern (box), probably good with your design.

If the pattern of an offset 10-10 is reused in many blocks, it can be implemented as a visual pattern block. But in the first choice, the classes relatively-positioned and absolutely-positioned are a bad idea. This is a confusion between visual patterns and CSS techniques.

An example of visual pattern implementation for the offset:

HTML:

<div class="image-preview offset-container">
    <img class="image-preview__img" ... />
    <div class="image-preview__count box box--rounded offset-container__offset">12</div>
</div>

CSS:

.offset-container {
    position: relative;
}
.offset-container__offset {
    position: absolute;
    top: 10px;
    left: 10px;
}

Upvotes: 0

tadatuta
tadatuta

Reputation: 2025

Second option is better because you end up with semantic blocks instead of inline-css-like approach in the first one.

You should think of your interface in terms of what it does and not in terms of what it looks like. Otherwise it's much harder to update design or actually do any change.

Upvotes: 1

Related Questions