Using the media object VS creating a custom component

[evul]

Hi Harry,

I've seen this done both ways, and I think it comes down to personal preference more than anything else.

What are your thoughts about - or what are the pros and cons for - creating a component that could technically be done by just using the media object with modifier classes.

So I've created an alert, or feedback, component for global status messages used to give feedback or convey information to the user. I have four types: message, warning, error, success. It's basically a bar with a colored background, an icon, and of course text. Hence, it could be done using the media object.

Currently I'm using an icon font and placing it as a pseudo element on the parent container. I've been considering using inline SVGs, which would be well suited to using the media object, making this issue a moot point. But that's another question I have, icon font vs inline SVG...

So, my thinking was that since this is for a specific use and we have four message types, it would be 'easier' to implement by having this component, using a modifier class for each message type. Of course, this is what you would also do if you used the media object. The differences being that I'm moving the icon from the markup to the CSS, but also reducing the amount of markup and class names. This may be opinionated, but since we have a UI design, I know that that message type uses that icon. So I don't feel that in this instance, putting the icon in the CSS is giving up the control of defining it in the markup.

Instead of having something like this using the media object:

<div class="o-media c-alert c-alert--error" role="status">
<div class="o-media__img"><i class="my-fonticons--error"></i> - OR - <svg .../></div>
<div class="o-media__body">You have no chance to survive make your time.</div>
</div>

The component markup looks like this:

<div class="c-alert c-alert--message" role="status">
<div class="c-alert__body">How are you gentlemen!!</div>
</div>

<div class="c-alert c-alert--error" role="status">
<div class="c-alert__body">You have no chance to survive make your time.</div>
</div>

And they look like this btw:

Unless I'm missing something, I don't think there is anything wrong with making a component like this. I'd love to hear your thoughts about it. Thanks for your time and all your great work!

[RhysyG]

I just asked this same question today haha.

I am leaning towards rewriting the styles.
I think this question comes back to this article harry wrote here:
https://csswizardry.com/2015/03/can-css-be-too-modular/

• Where does the ‘scope’ of this section of DOM start and stop?
• Are the div and a part of the same UI component?
• Could the div or a exist without one another?
• Are any of the classes thematically related?
• Do these classes appear side by side purely coincidentally?
• Do we need all classes to remain intact if we were to reuse this HTML?
• Do all classes when combined create a specific UI component?
• Are any of the classes optional at this point?
• If one of those classes changes in this bit of DOM, will they need to be changed in every similar piece of DOM?

If you re-use media object, then all the above would apply.

My example was:

<div class="c-chat">
	<div class="c-chat__content">
		<div class="o-media">
			<div class="o-media__item">Avatar</div>
			<div class="o-media__body">Message...</div>
		</div>
	</div>
	<div class="c-chat__buttons"></div>
</div>

vs

<div class="c-chat">
	<div class="c-chat__content">
		<div class="c-chat__message">
			<div class="c-chat__avatar">Avatar</div>
			<div class="c-chat__text">Message...</div>
		</div>
	</div>
	<div class="c-chat__buttons"></div>
</div>

The negative is it creates more CSS. However in the same article he suggest that "gzip would negate any difference in filesize anyway" (as it's a zipping tool that finds re-useable code).

So the last thing I'm left with is what's the purpose of the media object if we go down that path?
Is it just an older class before web apps became more componentised?

The last article I read where Harry mentioned it was this:
https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
"They can be used in any number of places across the project—places you might not have even seen."

So is it to be purely used on laying out content that's not a component? For example, a Title with a button to the right.

<div class="o-media">
      <div class="o-media__body">Title</div>
      <div class="o-media__item">
            <div class="o-button  c-button">Save</div>
      </div>
</div>

But then should that be a component? ie: c-page-header-title

The only object I still use is grid layouts, wrapper, bands as they "house" the components chunks without messing the markup. But then those too can be confusing sometimes. For example, lets say you have a grid layout object. Then have a component called "best sellers" which uses o-grid-layout and c-cards. I guess a distinction has to be made at that point between programmatic components and styled components as best sellers (ie for shoes) might just be programming logic without any style changes.

Another point, I've been following lots of Material Design principles and I find the media object quite rigid. Theres lots of 16px here, 8px here, 24px here. This doesn't really work that well with media, so you're best to create component classes if the out of the box ones aren't right for you.

On a side note, the splitting up of objects and components when they are to be used together like the button still doesn't feel exactly right.

Thoughts?