DEV Community


Discussion on: How to organize your components using the Atomic Design

sanfra1407 profile image
Giuseppe Sanfrancesco Author

Hi Janus,
thank you for your comment: I really appreciate it!

I can get your perplexity about the "overengineering" of the Text component.
Let me try to clarify your doubts.

The Text component in this context has too much implementation, it's true. Just two things:

  • This is a simple example;
  • This is a small application.

Having a component like this can bring some advantages.


You have to think the this component is meant to be used and used and used... If you need to use it several times, then you must a have a consinstent component with the same size, the same font-family, the same color and so on. It's really hard to have this kind of consistency without using a component.

Let me give you one example:

   <span class="text-component size-big weight-medium family-primary color-secondary">

This means that, when you need to write something, to have texts which are consinstent you have to apply the same classes. Everytime. And this is not a smart approach neither stable, because it's very buggy (try to imagine what could happen writing the weight-medium class 50 times).

Automatic updates

Futhermore, with a reusable component, if you want to change a class or a default value, you just need to modify the component itself and the changes will be automatically reflected everywhere.
Having reusable components is very useful, especially in design systems.

Anyway, I want to give you a suggestion: do not put your focus on the Text's implementation; put it on the usage. The implementation is made only once, but the usage might be done n times.

floede profile image
Janus Hasseriis

I'm sorry, but I don't think your example makes sense.

Of course, reusable components are useful. Very much so.
But you are talking about making an entire component only for text elements.

In your post, you describe making a molecule that combines a label with an input. That's fine.
But you gain nothing from having the label as a generic text component with type=label over just writing <label class="input-field__label"/>.
Everything you said about changing the label in one place still applies.

And if you want to have consistent <p>'s you put a standard style for paragraphs in your stylesheet.

Your long example of five different classes implies that a <span> could have other classes. That would be exactly the same with a text component type=span.
So again, it's not actually simpler.

But of course, you should write your code however you see fit :-)