DML and CSS in JS
Published: 2021-07-29 21:10:27

Using DML and a CSS in JS library seems to be a perfect match.
Here I am using [bss](https://github.com/porsager/bss).

You can test it here [DML&BSS](https://flems.io/#0=N4IgtglgJlA2CmIBcA2AzAOgJwHYA0IAzvAgMYAu8UyIGAFuWLCAYaQE4D2szSA2gAY8AgLoEAZhASFkfUADsAhmERJaDJixClO8ynpoAdeQB4NsAASxF8gOYBeQyCjwnAPmMWz8RVA-yLQK8VckULUjpFdmJyRxAAV3JxAFoADndPIJNyCHIENxy8+BMAekL8zMCTELClFTiANwh4AHcAB052cidw3X1Ypxbocjp7FybSeGShqBG8Cwh5XIhFWGS2Vfh7AEYMAQyArLZ2CDbyC0J2UjiGcjbCJBKS+HE2xVt4DBcSgBEAWQAMr9AQB9OicFRvD4lWAQABGwIByUg8gwACtCO5SsdTuR-EEvDizhcrjdyHcHk94vI2gBrWwYHRgEpwwiYkBubEcXH40p0Hx+TwmOGcKAAT3xR25Z0lQXE1IoEF0Fj+8Hk8QsAApYYRyABKCzAYyVAmBBDncENeDsADCsEIFnsFjhAAMTabAnDFKR6VxqVAkBYXPA2m1FrSANzuj06WCdQMtOi5eBRw4eoKkeLReMWDqLSjsVPpwJu+TRoLmiycRJ2h1O13lglen22P3yAMWRPJovFwKZ7PsQN5vTWnvp0uNqzwc4qdW1x3O0u9z2dFyDiwAJjaAA8LtxoLnw2PizMRoGNwIBDvj+mwFFbItAwBWHeTwJvGCLWyBgQ3j068h1nIMUEGSYC2ngQN5F0FNJxdCxjTTf9pwWSgwHnesl2XD8oC-JBtivbcI1jeM4VgeJXCQ00Jyogl5XkRVlXIThbFsBBa01Eh5l8KBa3mdh4DATgrVrA0jVo00SEZaw2QBCBdT4JweKcERNR40SIwQiSCSk0gZMIOSFKcAShKtFTNRM4T4FErTewAX0Q3t6MYgJInbBAAAkrPYAB5RItRIMS3wsKTdCE+JiG8hdNQNew3ECYALGY1j2PtTjYHmS1rT4qsa3tPU7IsP9JNgDAwurSL-KdGLHXixLkrY6y0q43LyHnTLvJsuzisCByy20qcZzVDUnXiWBtXk8h5iNbR9J6QNZ3iWs7L1VNJ3ETotUrZMwCrcQLAAQXYdhFDFDBxC4MBNUWxkk1gKAADlRXgQg9TE2zlx26TFFkyaMB4zUdtE4K3LgeAvKtXzEkBtC9UnPrJwE8gszTRbNPdBGqLobZNScf4AQsAAyCwACE2S1UhycWCwACkAGU4ZYBCQEobdANWCBbHkJBJhHdgnDh-rTVVdVNUUkAdu2Jw8CcHaN2l2W0LQFTBfdEX4jFxXBO2KWWC1sAN3lvWJaV5Wmf1gAWC2VccrISiJPEhRZUUJWMPlGFgfxjC0YgyByXQZDUJ8LdQEA7LwBRlFUWgMS0HQRwMNQw4jkA6mjxk2Tjvo1XIGgRXFQ1MjvdgHwCH8exwr8LHL4w+owXdxJXdg10DAidz3WEoAsASoFTOyfZIeAXMDkAnyQDcnzDsRU6jmhFrDoA)

```html

<html lang="de">
 <head>
    <meta charset="utf-8">
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
    <script src="https://unpkg.com/bss"></script>
 </head>
 <body>
    <script>
     function Menu (list) {

         let hoverCls = b`
           background: deeppink;
           color: white;
           cursor: pointer;
         `

         let outCls = b`
           background: white;
           cursor: pointer;
         `

         let menuCls = b`
           border: 2px solid pink;
           width: 200px;
           margin: 5px
           padding: 0;
           list-style-type: none;
         ` 

         let itemCls = b`
           padding:10px;color:blue
         `

         function toggleCls(el, addCls, removeCls) {
           el.classList["add"](addCls); 
           el.classList["remove"](removeCls) 
         }

         function handleHoverOut (el) {
           el.onmouseover = () =>  { toggleCls(el, hoverCls, outCls)} ;
           el.onmouseout = () => { toggleCls(el, outCls , hoverCls) };
         }

         let menu = ul(list, {"class" : menuCls});

         for (let item of Array.from(menu.childNodes)) { 
           item.classList.add(itemCls)
           handleHoverOut(item)
         }

         return   menu; 
     }

     h1("DML & Bss (css in JS)", "text-align:center")

     Menu(["item1","item2","item3"])

     Menu(["item11","item22","item33", "item44"])

    </script>
 </body>
</html>


```