لماذا اضيف أكثر من class للعنصر

نضيف العديد من الكلاسات للعنصر للمزيد من التميز نفترض أنك لديك مجموعة من الأزرار لهم خصائص مشتركة ولكن كل منهم له خاصية مميزة له كاللون مثلا هنا يأتى الدور لإضافة أكثر من كلاس للتمييز بينهم

تستطيع عمل ذلك بإمكانك اضافة بعض الخصائص لكلاس معين ووضعه لكل الأزرار وعمل كلاس أخر مميز لبعض الخصائص الأخرى

نعطى خصائص للكلاسات في ال style كالأتى

/*الكلاس الأساسي لبعض الأزرار */
.btn {
    width: 60px;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
}
/*كلاس مخصص لإضافة بعض الخصائص المميزة*/
.btn-red {
    background-color: red;
    color: #fff;
    border-color: orangered;
    font-size: 16px;
}
/*كلاس مخصص أخر لإضافة بعض الخصائص المميزة*/
.btn-blue {
    background-color: blue;
    color: #cecece;
    border-color: yellowgreen;
    font-size: 20px;
}

ويتم تطبيقهم فى ملف ال html كالأتى

  <button class="btn btn-red">red</button>
  <button class="btn btn-blue">blue</button>

وتستطيع بالطبع إضافة ماتريد من كلاسات لإضافة المزيد من التميز

إذا كان لدينا فى الموقع عدة مجموعات من الأزرار.