Use duplicate class name on an element?

前端 未结 3 1810
[愿得一人]
[愿得一人] 2021-01-19 17:21

I found that there are many frameworks will check the duplicate class name before adding the new class name on the element that i think will slow down the performance.

相关标签:
3条回答
  • 2021-01-19 18:06

    There is nothing "wrong" with having a duplicate class name, it's just redundant. There's probably a small performance impact, but that'll only really make much difference if you have a lot of duplication.

    Also, preventing duplicates just helps to keep things tidy.

    0 讨论(0)
  • 2021-01-19 18:18

    ES6 provides a convenient API for adding and removing and testing class-names of DOM-elements: classList.add(name) and classList.remove(name) and classList.contains(name).

    In the ES6 context the question could perhaps be rephrased as:

    "If I use .classList.add() to add the same className more than once, and then want to remove that class with classList.remove(), do I need to call classList.remove() multiple times?

    Luckily the answer seems to be a single call to .classList.remove() is enough to remove a given class no matter how many times you have added it.

    I couldn't find an easy answer to this by Google so I wrote the following test to tell me that is how it behaves. Calling the below function with DOM-element as argument does NOT throw an error:

    function testClassListRemove (dem)
    {
      dem.classList.add ("hello");
      dem.classList.add ("hello");
      dem.classList.add ("hello");
      ok (dem.classList.contains ("hello") );
    
      dem.classList.remove ("hello");
      ok (!  dem.classList.contains ("hello") );
    
      function ok (b)
      { if (! b)
        { throw new Error ('not ok ');
        }
      }
    }
    
    0 讨论(0)
  • 2021-01-19 18:19

    Semantic UI heavily uses attribute selectors

    like here

    .ui.grid [class*="left floated"].column {
      margin-right: auto;
    }
    .ui.grid [class*="right floated"].column {
      margin-left: auto;
    }
    

    If you want margin-left and margin-right to have the auto value, you must have a duplicate of the classname segment floated (ex. <div class="left floated right floated">Lorem</div>)

    0 讨论(0)
提交回复
热议问题