动态生成style代码

我觉得每次写的css代码可复用性不强，
而且写margin、padding、width、height的字母个数太多了
我想有没有办法简便一点比如
宽十个像素直接 类名(w-10)就行
所以我写了一个动态生成css代码得js
虽然 有点呆 但是写一份后 以后引用这个文件就行了
假吧意思写个文档吧还是
aaa：一个像素的红色边框
宽/高 w-数值-单位 （百分号是0）
w-10：十个像素的宽
w-10-0：百分之十的父级宽度
w-10-vw：百分之十的屏幕宽度
wh-10：就是宽高一样的情况 然后第二位一样是数值，第三个是单位
边距
m-10=margin:10px;
mt-10=margin-top:10px;
m-10-vh = margin:10vh;
不想写了 就这样吧
源码给你们参考下
哦对了 createStyle()方法传需要使用这个css的标签名；不传的话默认只有三个"div", “img”, “input”，
不过传的话记得把所有需要使用这个js 的标签名都给过来 不然会被覆盖了
方法第一句哪里 就写了
算了 自己看吧

function createStyle(arr){
    let tagArr = arr || ["div", "img", "input"];
    let _arrDoc = []; //_test(..._div, ..._img, ..._input);
    tagArr.forEach((item) => {
      let tag = document.getElementsByTagName(item);
      _arrDoc.push(...tag);
    });
    //console.log(_arrDoc);
    var _style = document.createElement("style");
    _style.type = "text/css";
    function _test() {
      const array = Array.prototype.slice.call(arguments);
      return array;
    }

    let _cssStr = `.aaa{border: 1px solid red;}*{margin: 0;padding: 0;}`;
    let _classArr = [];
    _arrDoc.forEach((item) => {
      //console.log(item.className);
      let itemName = item.className.split(" ");
      _classArr.push(...itemName);
    });
    _classArr = [...new Set(_classArr)];
    _classArr = _classArr.filter((s) => {
      return s && s.trim();
    });
    //console.log(_classArr);
    _classArr.forEach((item) => {
      let styleAttr = item.split("-");
      let itemStyStr = "";
      switch (styleAttr.length) {
        case 1:
          break;
        case 2:
          switch (styleAttr[0]) {
            case "w":
              itemStyStr += `width:${styleAttr[1]}px;`;
              break;
            case "h":
              itemStyStr += `height:${styleAttr[1]}px;`;
              break;
            case "wh":
              itemStyStr += `width:${styleAttr[1]}px;height:${styleAttr[1]}px;`;
              break;

            case "m":
              itemStyStr += `margin:${styleAttr[1]}px;`;
              break;
            case "mt":
              itemStyStr += `margin-top:${styleAttr[1]}px;`;
              break;
            case "mb":
              itemStyStr += `margin-bottom:${styleAttr[1]}px;`;
              break;
            case "ml":
              itemStyStr += `margin-left:${styleAttr[1]}px;`;
              break;
            case "mr":
              itemStyStr += `margin-right:${styleAttr[1]}px;`;
              break;
            case "p":
              itemStyStr += `padding:${styleAttr[1]}px;`;
              break;
            case "pt":
              itemStyStr += `padding-top:${styleAttr[1]}px;`;
              break;
            case "pb":
              itemStyStr += `padding-bottom:${styleAttr[1]}px;`;
              break;
            case "pl":
              itemStyStr += `padding-left:${styleAttr[1]}px;`;
              break;
            case "pr":
              itemStyStr += `padding-right:${styleAttr[1]}px;`;
              break;

            default:
              break;
          }
          break;
        case 3:
          switch (styleAttr[2]) {
            case "0":
              switch (styleAttr[0]) {
                case "w":
                  itemStyStr += `width:${styleAttr[1]}%;`;
                  break;
                case "h":
                  itemStyStr += `height:${styleAttr[1]}%;`;
                  break;
                case "wh":
                  itemStyStr += `width:${styleAttr[1]}%;height:${styleAttr[1]}%;`;
                  break;
                case "m":
                  itemStyStr += `margin:${styleAttr[1]}%;`;
                  break;
                case "mt":
                  itemStyStr += `margin-top:${styleAttr[1]}%;`;
                  break;
                case "mb":
                  itemStyStr += `margin-bottom:${styleAttr[1]}%;`;
                  break;
                case "ml":
                  itemStyStr += `margin-left:${styleAttr[1]}%;`;
                  break;
                case "mr":
                  itemStyStr += `margin-right:${styleAttr[1]}%;`;
                  break;
                case "p":
                  itemStyStr += `padding:${styleAttr[1]}%;`;
                  break;
                case "pt":
                  itemStyStr += `padding-top:${styleAttr[1]}%;`;
                  break;
                case "pb":
                  itemStyStr += `padding-bottom:${styleAttr[1]}%;`;
                  break;
                case "pl":
                  itemStyStr += `padding-left:${styleAttr[1]}%;`;
                  break;
                case "pr":
                  itemStyStr += `padding-right:${styleAttr[1]}%;`;
                  break;

                default:
                  break;
              }
              break;
            default:
              switch (styleAttr[0]) {
                case "w":
                  itemStyStr += `width:${styleAttr[1] + styleAttr[2]};`;
                  break;
                case "h":
                  itemStyStr += `height:${styleAttr[1] + styleAttr[2]};`;
                  break;
                case "wh":
                  itemStyStr += `width:${styleAttr[1] + styleAttr[2]};height:${styleAttr[1] + styleAttr[2]};`;
                  break;

                  case "m":
              itemStyStr += `margin:${styleAttr[1]+ styleAttr[2]};`;
              break;
            case "mt":
              itemStyStr += `margin-top:${styleAttr[1]+ styleAttr[2]};`;
              break;
            case "mb":
              itemStyStr += `margin-bottom:${styleAttr[1]+ styleAttr[2]};`;
              break;
            case "ml":
              itemStyStr += `margin-left:${styleAttr[1]+ styleAttr[2]};`;
              break;
            case "mr":
              itemStyStr += `margin-right:${styleAttr[1]+ styleAttr[2]};`;
              break;
            case "p":
              itemStyStr += `padding:${styleAttr[1]+ styleAttr[2]};`;
              break;
            case "pt":
              itemStyStr += `padding-top:${styleAttr[1]+ styleAttr[2]};`;
              break;
            case "pb":
              itemStyStr += `padding-bottom:${styleAttr[1]+ styleAttr[2]};`;
              break;
            case "pl":
              itemStyStr += `padding-left:${styleAttr[1]+ styleAttr[2]};`;
              break;
            case "pr":
              itemStyStr += `padding-right:${styleAttr[1]+ styleAttr[2]};`;
              break;

                default:
                  break;
              }
              break;
          }

          break;
      }
      _cssStr += `.${item}{${itemStyStr}}`;
    });
    _style.appendChild(document.createTextNode(_cssStr));
    var _head = document.getElementsByTagName("head")[0];
    _head.appendChild(_style);
  }