I often do my job by:

1. Writing out all of the html based on the designs I'm sent.
2. Writing out all of the empty css selectors for that html.
3. Adding the styling to that css.

My question is can I automate the second part?

Is there any way of generating a <style> tag with every possible combination of css selectors for the html inside? I'm working in VSCode and any suggestions would be welcome. Example html below:

<div class="section1">
  <h1>heading</h1>
  <p>text​</p>
  <div class="gift-dropdowns">
    <div class="dropdown1">
      <span>text</span>
      <span class="arrow"></span>
      <div class="dropdown-content">
        <p>text</p>
        <p>text</p>
        <p>text</p>
      </div>
    </div>
    <div class="dropdown2">
      <span>text </span>
      <span class="arrow"></span>
      <div class="dropdown-content">
        <p>text</p>
        <p>text</p>      
      </div>
    </div>
  </div>
  <a class="cta-gift-header">text</a>
  <img src="" alt="" class="gift-star1">
  <img src="" alt="" class="gift-star2">
  <img src="" alt="" class="gift-star3">
</div>

CodePudding user response：

Generating every possible combination of css selectors wouldn't be very useful, but generating a list selectors for elements you wish to style would be helpful.

You can do this by giving each element you wish to style a class attribute, and using the eCSStractor extension for VSCode to generate a stylesheet with your classnames.

Also, if you aren't already using emmet I would highly recommend you start using it to generate your html structure more quickly. This makes assigning ids and classes much simpler.

CodePudding user response：

No. It make no sense to create something that will generate all the combinations of styles, there could be only for this example over then 1000 style combinations. Why would you want to generate automatically the styles for all the elements? create style only for the elements that you need.