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?
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.