Modularising CSS questions

Question

I am looking at different CSS modularising methodologies and trying to implement some of their ideas into a new project. Some I am looking at are SMACSS, BEM and MVCSS.

I understand that in SMACSS layout rules should be in my _layout.sass file which is fine so my styles are as follows:

.container
  +container
  +margin-leader
  +margin-trailer

+container sets this element as a grid container from Compass Susy and then adds top and bottom margin.

I now want to add a border radius and box shadow to this element.

Where do I place these styles as they don't fit within the layout stylesheet?

2nd issue is:

I have created a media block which basically allows an image to be floated left and some text to be floated right. It has a flipped variation that flips the two around.

I need to be able to specify the width of the image but where does this go? I have for now placed it as part of the media block module code but surely that means that ALL images inside future media blocks will be that width. It seems like the width of the image needs to be elsewhere but I am just not sure where. I know I could add classes to the image in the markup like "small", "large" etc but to be that sounds like adding presentational stuff to the markup which I thought was what were were trying to get away from.

3rd issue:

I have created a title-box module that is marked up as follows:

  <div class="title-box">
    <h3 class="title-box__header">Upcoming Events</h3>
    <div class="title-box__content">

    </div>
  </div>

I want 3 of these boxes side by side. I know how to do it but unsure of the correct modular way to do this. Any thoughts?

Answer 1

1) According to BEM methodology you can use mixes to solve your first issue:

<div class="container widget"></div>

This means that there are 2 different blocks on the same DOM-node: container (knows about layout) and widget (styles the block with border radius and shadow).

2) You can add class to these images making them elements of media block and then specify types of images with modifiers:

<div class="media-block">
    <img class="media-block__image"/>
    <div class="media-block__description">Some text</div>
</div>

<div class="media-block media-block_float_left">
    <img class="media-block__image media-block__image_type_important"/>
    <div class="media-block__description">Some text</div>
</div>

So image elements of media block which are important can be styled with bigger size.

Also you can use modifiers to set float direction.

3) I'm not sure if I got your question right but I think you have two options:

1. Style title-box itself (e.g. as float with some margins).
2. Add styles to title-box in it's parent file with cascade if it's possible to use title-box somewhere outside with different layout.