DEV Community


Posted on

First post about Master CSS

Let's see the first example on the site :

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src=""></script>
  <body class="bg:#121212">
    <div class="flex jc:space-around">
        <div class="bg:gray-22 p:10 r:10 max-w:350 b:1|solid|white">
          <img class="object:cover w:full square r:5" src="" loading="lazy" alt="clothes" />
          <div class="mt:10 p:15 color:white">
            <div class="font:24 font:bold capitalize">texture crew sweater</div>
            <div class="font:14 font:gray-66 mt:5">Designed for on the move</div>
            <div class="mt:12 font:semibold">$120.0 USD</div>
            <div class="mt:12 flex gap:8">
              <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3 b:3|solid|gold:hover">
                <div class="bg:white full round">white</div>
              <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
                <div class="bg:#999 full round">white</div>
              <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
                <div class="bg:#333 full round">white</div>
            <div class="mt:20 font:12 font:semibold letter-spacing:2 font:gray-66 uppercase">size</div>
            <div class="mt:12 flex gap:8">
              <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">XS</button>
              <button class="p:10|15 r:3 font:14 font:semibold bg:gray-28">S</button>
              <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">M</button>
              <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">L</button>
              <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">XL</button>
            <a class="font:gray-66 font:12 text:underline mt:20 inline-block color:white" href="/"> Get delivery dates </a>
Enter fullscreen mode Exit fullscreen mode

You can test it here : DEMO

The setup is really simple (you can of course use npm i...).
At first glance I can read the code fluently, not more complicated than Tailwind, perhaps even easier.

For curiosity, here the css code which is inserted in the DOM :

Image description

Very easy to read, isn't it ?

Without any optimisations, here is the lighthouse score OnlineDemo:

Image description

Not bad, for a first draft...

Cherry on the cake, VStudio Code intellisense is also provided

Image description

What do you think?

Stay tuned...

Top comments (4)

efpage profile image
Eckehard • Edited

CSS surely has it´s design issues, but to me this seems utterly verbose.

Cascading styles and classes have been introduced to allow a better styling but provide some "uniformity" over the whole application. If you absolutely need to change the style of a single DOM element, you can use inline styles.

So, what is the advantage of using classes that mimic inline-styles? Sure, you can use search and replace to change the font size, but we all know what this leads to:

Half a day of debugging can save you 5 seconds of thinking...

artydev profile image
artydev • Edited

Hy Eckehard :-),

In fact I am really in favor of plain CSS.
But when I need to create projects for 'clients' I don't have time to deal with all intricacies and need to get things done quite rapidly.
Give it a try, for pure curiosity :-)

efpage profile image

But what is the advantage? I really cannot see...

If I was in a hurry, I would have not time to write font:14 font:semibold 5 times, when I just would need to wite button(['XS','S','M','L','XL']), given your button function is kind of smart enough to deal with arrays.

Thread Thread
artydev profile image
artydev • Edited

In reality, Master CSS like other libraries of its kind, works best when used with frameworks oriented components like ASTRO so that you can avoid repetitions.

The fact that you can use pseudo elements, media queries and see the modifications in live is also
a great advantage.

In ASTRO it would be used exactly like you described

   ['XS', 'S', 'M', 'L', 'XL'].map ( 
      (size) => <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">{size}</button>)
Enter fullscreen mode Exit fullscreen mode

No repetitions :-)