First post about Master CSS
Tags: mastercss, css
Published: 2023-08-16 12:43:37

Let's see the first example on the site :

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.master.co/css"></script>
  </head>
  <body class="bg:#121212">
    <div class="flex jc:space-around">
      <article>
        <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="https://css.master.co/images/clothes.jpeg" 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>
              <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>
              <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>
              </button>
            </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>
            </div>
            <a class="font:gray-66 font:12 text:underline mt:20 inline-block color:white" href="/"> Get delivery dates </a>
          </div>
        </div>
      </article>
    </div>
  </body>
</html>
```
You can test it here : [DEMO](https://flems.io/#0=N4IgtglgJlA2CmIBcA2ALAOgBxoDQgGd4EBjAF3imRAwAsyxYR8CSAnAe1iaQG0AGXPwC6+AGYQEBZL1AA7AIZhESGvUbMQJDnIq7qAHgCEAEQDyAYQAqATQAKAUQAE62AD4AOnIOunsBXIA5gC8HiDwcmGeck5OPvAKUNGxsQbKZApOJLQKbERkoSAArmRiALRYUV4pcemZisqFAG4Q8ADuAA4cbGRhWTp6BWFt0GS0wVDwLSTwZSNQY7hOEHIQZBAKsGWsm-DBAIxVMSkGrGwQHWROBGwkhfRkHQRIAPQvJFByGGAKBBRsGG07wIBCiBheZwuZGScRetASSWqcQARhwoABPLL+EGFZGBJAAYn2ACYSSSjjUDFAIE0sb8CIUxAgAB5OABWJCQBA6ChmZVyHCKcigFJqcVy6xICBhYri1NpUvpuPxgTYCnRZWJxKcHSQ+34TjYeoNP2ZcyQAGYAKwG5F6gA+BC40HtbVoa3gotlqQgYECdJxYQ4yLZ8HISG0TXgbCcbSQYiK3GuAEcirl4IakFa+jc7mEHk9XsCCN9fv9ARwXr6FIF4AR3rAOGM6xg2R14IE+o3EisQmF-AAvdF9TZDLSN5ugkBOF4y71UmkBhlhMBkY06vVW-qNo1uj1e72peVLxkDJDEtBOMRn1GwKBZBQdNabCADz0gNwUZlkIpsDPsdprjaBJ-nBeU50PBcFWxZcQGvXQ9UveC11VdUyhQFAnFXLMohMOsIECORKCvbonB0JxmywjgozAmkIPnY9FUDcA1xJEiEKISBbxFD8ABISX4DADQAVQAZRMWimno2UoJPFdWO1Jl4FZQJHyQSoPyRQ9KWREoyHIpjYIIVN01jJA0ANWhzINZCkANTghXvO19kdZ0oHtVCNWJLANwtJw7QtVzYBdQIuCgJBaGo6MD20k5GJg5UkD3Cgr0TWBDUFYUomS+BJOk+cXl0sh9LkfKZKKkq5MIEy-zMiyXGs9i13szKnIdJ1gvczzNR83ULRi2K5UXQzEoJABOCbUqTByso-HK8q0wbwQqnQyrFAwVpiEawmMtNarjeqrPq2yWsc-z2rcjy1S83rLQG2LZO2kA8UJC03qm9KZp4tx5pecDFoewq9NWgGCv+44HvipV5PPGyzzY2zOIgbi-HgYro22HkSF7c8mqQbqMKcIoOnbW5fnfNwCFfXK-ro0GZKh5jsIRlknFU3UNLWnTga2hKwl1fV7X2LcjT82z9iQs8kZR5ygpC66eqiAANUTlp5rmTk2qqBf4IWRctPGJbx6Wwv8lUFe8qJVaB4qQYhpataenW9czMX4cljj4C403ZY6+W0Mtj8AFk1dt0r6fnR2+ZAZ3hddw2PbXE273Oly-a6i3OYAGVDkqNdSKPoZj40XdFhPja95GfYuzqroDzmlZzm284jylaak1uTkyJ7bIJzDxe1L810c6NgqIrC12JA0VjH2ZkUbEgAGtt26JL3QoPpaD-MRCheKInAAcTRpxJmCqM2ExKAFAoAhYQUNaFvttvwZkl4JQgKV4DnR-UkKtF0WiOCVwbhNBEFIOsHQ0hVBoH2EgAA7GUfgdkQAAF9cDyCUCoGgbJpD4G0LoCIZBqCoPQSABoWDAQgk0PgwYxCUHCBQUAA)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl3ytnasynz8ykq5cp74.png)

Very easy to read, isn't it ?

Without any optimisations, here is the lighthouse score [OnlineDemo](https://master-css.surge.sh/):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a338gkxamx3aak88qdzf.png)

Not bad, for a first draft...

Cherry on the cake, VStudio Code intellisense is also provided


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rb8mxcwhfrnn028tjpa.png)


What do you think?

Stay tuned...