CODEWITHSUNDEEP
cssnaming-conventionsbem
Fred K
Fred K

Reputation: 13910

Separate layout styles from theme styles

I have two blocks/objects (User and Place) that are visually displayed pretty the same.

In BEM, I have to put layout-grid related styles in the same class as well with theme styles? Or I have to separate them?

In BEM, I have to create project-specific blocks (.user, .place) or global reusable blocks (.card)?

That is, this:

.user{
    // Grid-layout styles
    float:left;
    width:33.3333%;
    // Theme etc styles
    background: red; // <== Change only this color
    border: 1px solid green;
    padding: 10px;
    margin: 5px;
    position: relative;
}

.place{
    // Grid-layout styles
    float:left;
    width:33.3333%;
    // Theme etc styles
    background: blue; // <== Change only this color
    border: 1px solid green;
    padding: 10px;
    margin: 5px;
    position: relative;
}

<div class="list">
  <div class="user">
  <div class="user">
  <div class="place">
  <div class="place">
</div>

Or this?

// Apply this class to user and place objects
.card{
    // Theme etc styles
    background: #EEE;
    border: 1px solid green;
    padding: 10px;
    margin: 5px;
    position: relative;
}

// Modifier: Apply this class to user object
.card--red { background: red }

// Modifier: Apply this class to place object
.card--blue { background: blue }

// Apply this class to user and place objects
.col-1-3{
    // Grid-layout class to assign to each .card block
    float:left;
    width:33.3333%;
}

<div class="list">
  <div class="col-1-3 card card--red">
  <div class="col-1-3 card card--red">
  <div class="col-1-3 card card--blue">
  <div class="col-1-3 card card--blue">
</div>

This is a real world example but there are a lot of similar situation: think to a common case like Menu: I have to do a block/object .main-menu (inline list specific for the main menu) or .inline-list (generic inline list to apply to the menu and eventually to other blocks with the same appearance)? And so on.

UPDATE: I add this to be more clear.

Note: .col-1-3 depends from .container

To reduce blocks on each div and simplify the maintainability, could I use this?

<div class="container">
  <div class="col-1-3 card card--user">
    <h1 class="card__title card__title--user">
    <p class="card__text card__text--user">
  <div class="col-1-3 card card--user">
    <h1 class="card__title card__title--user">
    <p class="card__text card__text--user">
  <div class="col-1-3 card card--place">
    <h1 class="card__title card__title--place">
    <p class="card__text card__text--place">
  <div class="col-1-3 card card--place">
    <h1 class="card__title card__title--place">
    <p class="card__text card__text--place">
</div>

How it works, if I understand well:

.col-1-3 is only layout (columns, etc), completely separate from the block card

.card is generic common/reusable block and has only internal properties (padding, etc)

.card--user and .card--place (and other related ones to subelements h1 and p) are card modifiers and contains theming properties (colors, margin, etc), or it's better define a specific block like you did (.user, .place)? If yes, why? And with those generic names how understand that they're related to card block?

Now, to reuse a "user card" I'll just use this:

<div class="card card--user">

but in this case the card will be full width (because there is no layout class).

Is this correct usage?

Upvotes: 2

Views: 899

Answers (1)

tadatuta
tadatuta

Reputation: 2025

First of all you should separate internal layout of a block (like paddings) from external layout (e.g. margins, position, etc).

This is easy with the help of mixes. For more info see:

As a result you'll be able to have generic reusable blocks mixed with some element of project-specific parent block. And all the positioning should be kept in this element's styles.

So you may end up with something like

<div class="list">
  <div class="col-1-3 card user">
  <div class="col-1-3 card user">
  <div class="col-1-3 card place">
  <div class="col-1-3 card place">
</div>

or even

<div class="list">
  <div class="col-1-3 list__item card user">
  <div class="col-1-3 list__item card user">
  <div class="col-1-3 list__item card place">
  <div class="col-1-3 list__item card place">
</div>

where list__item is to move margin from a card (and make `card be reusable anywhere else with different positioning).

Upvotes: 1

Related Questions