گروه بندی کردن قوانین

برای اینکه شیوه نامه هایی که ایجاد می کنیم را بتوانیم به آسانی و با سرعت ویرایش کنیم می توانیم قوانین مشابه را در یک گروه قرار دهیم (گروه بندی کنیم - grouping). با استفاده از گروه بندی می توانیم مجموعه ای از قوانین مربوط به یکدیگر را مشخص کنیم. به عنوان مثال اگر بخواهیم برای دو نوع تیتر (h1, h2) به صورت همزمان سبکی را تعیین کنیم که رنگ متن قرمز و پسزمینه آن مشکی باشد می توانیم این کار را به چهار روش انجام دهیم:
قوانین به صورت گروه بندی نشده
هر قانون را می توانیم به صورت جداگانه بنویسیم؛ با این کار می توانیم هر سیک را به صورت جداگانه به عنصر انتخاب شده اعمال کنیم:

h1{ color: red; }
h1 { background: black; }
h2{ color: red; }
h2 { background: black; }

انتخاب کننده های گروه بندی شده
می توانیم انتخاب کننده ها (selector) را با یکدیگر گروه بندی کنیم، برای این کار چند انتخاب کننده که مورد نظرمان هستند را می نویسیم و بین انتخاب کننده ها از علامت ویرگول استفاده می کنیم. با این کار اعلان به تمام انتخاب کننده هایی که انتخاب کرده ایم اعمال می شود:

h1, h2 {color: red;}
h1, h2 { background: black; }

اعلان ها به صورت گروه بندی شده
اعلان ها را می توان با یکدیگر گروه بندی کرد؛ برای این کار فقط لازم است بین اعلان ها علامت نقطه ویرگول قرار دهید. در مثال زیر برای اینکه کدها، ظاهر بهتر و قابل درک تری داشته باشند، هر اعلان را در یک خط جداگانه قرار داده ایم:

h1{
color: red;
background: black;
}
H2{
color: red;
background: black;
}

انتخاب کننده ها و اعلان ها به صورت گروه بندی شده
ما می توانیم هم انتخاب کننده ها و هم اعلان ها را با یکدیگر گروه بندی کنیم. با این کار یک قانون یکجا و کلی به دست می آید که مشخص می کنیم چه اعلان هایی به چه انتخاب کننده هایی اعمال شود:

h1, h2{
color: red; 
background: black; 
}

هرجا که امکان داشته باشد باید قوانین به صورت گروه بندی شده نوشته شوند؛ این کار باعث می شود که فایل مربوط به شیوه نامه ها کوتاه و مختصر شود؛ در نتیجه عملکرد سایت شما هم بهتر خواهد شد، چون کوتاه تر بودن قوانین یعنی کوچک ترو در نتیجه کم حجم تر شدن فایل شیوه نامه؛ این مساله باعث می شود که زمان بارگذاری فایل شیوه نامه کوتاه تر شود. همچنین باعث می شود که ویژگی های مورد نظر شما فقط در یک محل نوشته شوند، و در نتیجه ویرایش کدها نیز در آینده آسان تر خواهد شد.