NameSpacing CSS classes
Published: 2021-09-14 11:09:15

When writing custom elements, and don't want to use 'shadow DOM', it's not obvious to avoid name clashing.

A way to solve this problem is to 'namespace' your class names.
But how to dynamically apply this namespace ?

In the following code, I use the nice little function [ustyler](https://github.com/WebReflection/ustyler).

I also use DML, but feel free to use (or no) whatever framework you want.

you can test it here [NSCss](https://flems.io/#0=N4IgtglgJlA2CmIBcBWAnAOgIxYDQgGd4EBjAF3imRAwAsyxYR8CSAnAe1iaQG0AGXCgBMGAOxpJk4QGYx-AGz8UKALr4AZhAQFkvUADsAhmERIa9RsxAkOBiveoAeS7AAEsIwYDmAXgA6IFDwgQB8-gZubi7wRlDhkdGmZEZuJLRGbERkASAArmQaALQAHGERUVFOZBBkCKE1dfBOAPSN9RWVTsmpxqa5AG4Q8ADuAA4cbGSBaXYOOYEj0GS0vsFDJPBFS1AruG4QBrUQRrBFrKfwvlgY-OWJVaxsEGNkbgRsJLn0ZGMESC0WvANGMjN54Bhgi0ACIAWQAMjCEQB9WgcUyg8EtWAQABGSPhRUgBgwACsCGFWk8XmQElUWrRYvFOk4oBABmlPAQCN8mfA2PdKm5YQBPTlGbluPrwA4ENwAckZcX58v2wS0Bkobm8sA4uNOsBFLJabIGdOitDYbha5tZ7IOUFyYBFRjGY0FlWNpoSLNxHCgItCbhZ1NeQc6GjyBnIEDsaW5AAoKGAxp4KABKNzATpRAaZNwUAAeb18BZFY3gHA0BfgKbTMt8pflBDIzx88rcAH43Lxk6mjBRVG4kD2+-WBKpVABuYMPNwaSZuBN5q0QNylvAeeA+FbrtyZbx5Uz2AgYBA72gztdOLcXq8Aanvmezc6iRbIGDGeQItATB6P25kAQvAQOoNZ1gO8Agao6ZTjmbgAL7wSu7xkCKCB7lAHAkAB9gYOwsQUAAoggx5kAmzZoQg8qwfBLboRCaEVnu8rvi0JDcvKcFzvRCAYK6FYGFAADCtDaFACZYThZH4WwhHwAAKvAxYAHL+vASbKR+pIcIcFE0emtFznJZB5GwkRSbhH5KlA-FutuIlibAEm8fARlREhDy2AYLZSiY8AAMqgpslSloEACCboqf5gTcTmCBvNkwlcnKe4JiQKXSrgti6mwma+EGWazkKUQJVKcqlgABgAJMA0pBUYmwIUUtUZRKBDSghlXwVEHEEJVGC1T5CFZj1lQ5YuI6tVwkwIdxJWVAu9jnBAABe8AjsIAAsYyFvNJVdcVJUmWZkQ+ftiHwZ0RCkGQABCEoac6AnpmNYxtuRlUuFg4rcrktVJSlFE2SquDynJUA0UhIChKKv1ytKsrDgqQ3+Q1TVFCDbCqm46qHFqAZ9BAJAGiKrS0FgoSVa9iRRjd8DkA9RAJjTnTGqGtLGn6AYJOTDCwKE1j0zGdi6OY-BIPwRRbSgSBiCACG4IY-nUGSuj4N58zUArSsgNKqt9dYmuAarWOjYkS1kCt62bTte2dBNbAjrisB5PA3EIULxAMzUovUMISBYFtCvqHrKvmH1hzkgrQA)

Here is the main function : 

```js
   const nameSpace   = "AppName";

   let setClass  = (classname,color) =>  { 
      let ns = `${nameSpace}-${classname}`
      css`.${ns} {
        color : ${color};
        font-size: 24px;
      }` 
      return ns;
   }
```


```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>
  </head>
  <div class="header">
    My class name is 'header', defined globally
  </div>
  <hr />
  <div id="myapp">
    
  </div>

  <body> 
  <script> 
  function css(template) {
    var text = typeof template == 'string' ? [template] : [template[0]]; 
    for (var i = 1, length = arguments.length; i < length; i++) {
      text.push(arguments[i], template[i]);
    }
    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(text.join('')));
    return document.head.appendChild(style);
  }
   const nameSpace   = "AppName";

   let setClass  = (classname,color) =>  { 
      let ns = `${nameSpace}-${classname}`
      css`.${ns} {
        color : ${color};
        font-size: 24px;
      }` 
      return ns;
   }
    
  selectBase(myapp)
      print(`<h1 class="${setClass('header','red')}">My class name is : '${nameSpace}-header', defined dynamically</h1>`)
  unselectBase()

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


```
You can see the result in the inspector :

![NameSpace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3i8ep2eu4mibigkjzeg.png)