DEV Community

Cover image for CSS class builder
Alwar G
Alwar G

Posted on

CSS class builder

#css #vscode #html #codequality

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.

Top comments (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