title: Semantic UI and Styled-Components. Is this bad practice to use it rather then usual classes?
body: <p>I always wrote the elements myself, but I found this service. I love this service, I like their style and speed, but looking to the future, I feel that it is unprofessional. Are such tools used in professional web development? And what do you say about Styled-components? Recently, I learned to write only on them, it's unusual, but I see that you can pass properties in them and use them again, but the application leaves a small mess of elements. will other developers understand me or is this also a bad practice.
  Here an example of my code:</p>
  <pre><code>const CheckoutPage = ({ cartItems, total }) =&gt; (
    &lt;CheckoutPageContainer&gt;
      &lt;CheckoutHeaderContainer&gt;
        &lt;HeaderBlockContainer&gt;
          &lt;span&gt;Product&lt;/span&gt;
        &lt;/HeaderBlockContainer&gt;
        &lt;HeaderBlockContainer&gt;
          &lt;span&gt;Description&lt;/span&gt;
        &lt;/HeaderBlockContainer&gt;
        &lt;HeaderBlockContainer&gt;
          &lt;span&gt;Quantity&lt;/span&gt;
        &lt;/HeaderBlockContainer&gt;
        &lt;HeaderBlockContainer&gt;
          &lt;span&gt;Price&lt;/span&gt;
        &lt;/HeaderBlockContainer&gt;
        &lt;HeaderBlockContainer&gt;
          &lt;span&gt;Remove&lt;/span&gt;
        &lt;/HeaderBlockContainer&gt;
      &lt;/CheckoutHeaderContainer&gt;
      {cartItems.map(cartItem =&gt; (
        &lt;CheckoutItem key={cartItem.id} cartItem={cartItem} /&gt;
      ))}
      &lt;TotalContainer&gt;TOTAL: ${total}&lt;/TotalContainer&gt;
      &lt;WarningContainer&gt;
        *Please use the following test credit card for payments*
        &lt;br /&gt;
        4242 4242 4242 4242 - Exp: 01/20 - CVV: 123
      &lt;/WarningContainer&gt;
      &lt;StripeCheckoutButton price={total} /&gt;
    &lt;/CheckoutPageContainer&gt;
  );
  </code></pre>
  <p>But i found only one example like that, rest of code is fine.</p>