cssperformance-testingweb-performance

Does adding many css classes to an element lead to any performance impact?


In our project we have base css file which contains classes for most of the common css properties (like .p10 -> padding:10px, vam -> vertical-align:middle).

If I use many of these classes in a single DOM, does it lead to any performance impact?


Solution

  • You're adding 7 bytes of HTML, this is effectively 0 impact on your site, and the CSS processes that so fast again, effectively 0 impact on your site.

    There are plenty of CSS frameworks that utilize a modular approach like that, and your code may look something like this:

    <main>
      <div class="p10 vam d_ib blk internal bigshadow"></div>
      <div class="p10 vam d_ib blk internal bigshadow"></div>
      <div class="p10_20 vam d_ib blk accent-blue internal bigshadow"></div>
    </main>
    
    .p10 { padding: 10px; }
    .p10_20 { padding: 10px 20px; }
    .vam { vertical-align: middle; }
    .d_ib { display: inline-block; }
    .internal { background: #fff; }
    .blk { color: #000; }
    .bigshadow { box-shadow: 0 10px 15px -8px rgba(0,0,0,.5); }
    

    Without using a framework, (or developing an internal one) you may want something a little less modular, and more element oriented:

    <main>
        <div class="container"></div>
        <div class="container"></div>
        <div class="container accent"></div>
    </main>
    

    with the accompanying CSS:

    /* This or main > div */
    main .container {
        padding: 10px;
        display: inline-block;
        color: #000;
        box-shadow: 0 10px 15px -8px rgba(0,0,0,.5);
    }
    
    .container.accent {
        padding: 10px 20px;
        border: 2px solid #0095ee;
    }
    

    To reiterate an answer to the question at hand, there is effectively zero impact of stacking classes on elements.