DEV Community

loading...
Cover image for CSS class builder

CSS class builder

Alwar G
Web developer, Maths Lover, solving critical use cases in my free time
・1 min read

As a web developers, we need to write the styles for the given classes.

But for lazy people like me, it creates too much frustration. So I decided to make the VS code extension to solve this problem and finally, I succeed in it.

My extension name is CSS class builder. It will generate the styles from your given classes in the HTML.

For example, we have the following code

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Web Page</title>
</head>
<body>
    <section class="w_40px">
      <div class="mR_auto mL_auto">
        red
      </div>
      <button class="display_block">test</button>
    </section>
</body>
Enter fullscreen mode Exit fullscreen mode

After running this extension, the above file changed into

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Web Page</title>
   <style is-from-builder>
      .w_40px {
         width: 40px;
      }

      .mL_auto {
         margin-left: auto;
      }

      .mR_auto {
         margin-right: auto;
      }

      .display_block {
         display: block;
      }

   </style>
</head>
<body>
   <section class="w_40px">
      <div class="mR_auto mL_auto">
        red
      </div>
      <button class="display_block">test</button>
    </section>
</body>
Enter fullscreen mode Exit fullscreen mode

For more information kindly refer to this.

PS: I know we have a lot of good CSS frameworks like bootstrap. But it will be helpful for the people who are in the process of learning CSS styles.

Repo Link: https://github.com/AlwarG/css-class-builder
Extension Link: https://marketplace.visualstudio.com/items?itemName=AlwarG.css-class-builder

Thank you for reading this post 🙏. I Just tried what I know. Feel free to post your comments if you want to share something.

Discussion (3)

Collapse
malteschwitters profile image
Malte Schwitters

Take a look at Tailwind CSS. It generates utility css classes like mr-auto, mx-4, flex... automatically from a config using PostCSS including variants for responsiveness like md:mx-8 and pseudo variants like hover:text-blue-500. They also got an experimental update, that allows to generate pretty much any style just in time when you need it.
tailwindcss.com/

Collapse
bodnya29179 profile image
Yevhen Bodnia

What about web development methodologies? Style preprocessors (Less/SASS/SCSS) won't be easy to use here
I would not say that using such methodology is good writing code/clean code and generally professionalism.
But, it is just my point of view. So, others decide for themselves.

Collapse
hornet67 profile image
hornet67

Btw can it also be used in extension other editors