Question

we pass CSS class name in an element to apply that class on that element but what is purpose of passing CSS class name more then once in one element?

Answer 1

By combining two or more classes on one element, it allows you to write less CSS. Here’s a simplified example:

<p class="error message small">Error!</p>
<p class="success message">Success!</p>

.message {
     margin:0 0 1em;
     position:relative;
     padding:1em;
     border-radius:4px;
 }
 .small {
     font-size:80%;
    padding:.5em;
 }
 .error {
     background-color:#FBE3E4;
     color:#8a1f11;
 }
 .success {
     background-color:#dfffe5;
     color:#264409;
 }

With this, we can still use each class independently, or combine them with any other combination of class names to inherit the style declarations of each.

If you meant using the same class name repeatedly on one element, then there is no purpose.