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>
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>
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)
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 likemd:mx-8and pseudo variants likehover: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/
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.
Btw can it also be used in extension other editors