نکاتی بهتر برای نوشتن کدهای css

زبان CSS برای برنامه نویس های متوسط خیلی ساده است اما وقتی برنامه بزرگ و پیچیده می شه قضیه کمی فرق می کنه. اینجاست که نداشتن یه رویکرد مناسب می تونه باعث بروز مشکلاتی بشه. برای همین قصد دارم نکاتی رو برای نوشتن CSS های بهتر یادآور بشم.

۱٫ از بازنشانی های سراسری استفاده نکنید

بازنشانی کردن حاشیه های (padding و margin) عناصر HTML به صورت سراسری، اصلا کار خوبی نیست. علت اینه که هم خیلی کنده و هم باعث می شه مجبور بشید برای عناصری که به این حاشیه ها نیاز دارند، مجددا اونها رو تعریف کنید. بجاش می تونید از بازنشانی های زیر مجموعه و مشخص استفاده کنید. مثل کاری که Eric Meyer انجام داده.

این روش خوب نیست :

*{ margin:0; padding:0; }

این بهتره :

html, body, div, dl, dt, dd, ul,  h1, h2, h3,  pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
ul { list-style:none }

۲٫ از هک های اینترنت اکسپلورر استفاده نکنید

هرچند که هک های CSS می تونن برای مدیریت نحوه نمایش وب سایت روی مرورگر های قدیمی (مثل IE6) کارآمد باشن، اما باعث بروز مشکلاتی هم در نسخه های جدید تر می شن. مثلا به بدلیل اینکه IE8 استاندارد های CSS رو در سطح مطلوبی پشتیبانی نمی کنه، استفاده از این هک ها باعث اختلال در طراحی شما می شه.

بجاش می تونید از دستور های شرطی برای هدف قرار دادن مرورگر های مختلف استفاده کنید. به عنوان مثال استفاده از دستور زیر باعث بارگذاری فایل ie-styles.css  در اینترنت اکسپلورر ۶ و یا نسخه های قدیمی تر می شه.

<!–[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />
<![endif]–>

برای کسب اطلاعات بیشتر در خصوص این دستورات شرطی به سایت quirksmode مراجعه کنید.
۳٫ از شناسه و کلاس های معنادار استفاده کنید

فرض کنید برای پنل کناری وب سایت کلاس .rightboxرو انتخاب کردید. حالا به هر دلیل لازم شده این پنل رو به سمت چپ شناور کنید. در این صورت استفاده از کلاس .rightbox  کمی گیج کننده است. بهتره قبل از انتخاب شناسه و کلاس ها کمی در مورد نام اونها فکر کنید و نامی رو انتخاب کنید که در آینده به خوانایی بیشتر برنامه کمک کنه.
۴٫ وارثت رو در CSS به کار بگیرید

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

این روش خوب نیست:

#container li{ font-family: IranianSans, serif; }
#container p{ font-family: IranianSans, serif; }
#container h1{ font-family: IranianSans, serif; }

این بهتره:

#container{ font-family: IranianSans, serif; }

۵٫ گزینشگر های چندگانه رو ادغام کنید

گاها پیش میاد که یه گروه خاص از گزینش گر ها (Selectors) از یه استایل مشابه استفاده می کنن. اینجا هم ادغام کردن اونها صرفه جویی در زمان و فضا رو به همراه داره.

این روش خوب نیست:

h1{ font-family: Tahoma, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family: Tahoma, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family: Tahoma, Helvetica, sans-serif; font-weight:normal; }

این بهتره :

h1, h2, h3{ font-family: Tahoma, Helvetica, sans-serif; font-weight:normal; }

۶٫ تا حد امکان خلاصه نویسی کنید

خیلی از خصیصه های CSS مثل margin, padding, border, font, background و همینطور رنگ ها رو می شه به صورت خلاصه نوشت.

این روش خوب نیست :

li{
    font-family: Tahoma, sans-serif;
    font-size: 1.2em;
    line-height: 1.4em;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
}

این بهتره :

li{
    font: 1.2em/1.4em Tahoma, sans-serif;
    padding: 5px 0 10px 5px;
}

می تونید یه راهنمای خوب رو هم درباره خصیصه های کوتاه و مختصر CSS بخونید.
۷٫ کدهای CSS رو سازماندهی کنید

با قرار دادن توضیحات هرچند مختصر در کدهای CSS می تونید اونها رو سازماندهی کنید. این باعث می شه در مراجعه های بعدی راحت تر برید سراغ تکه کدی که مد نظرتونه. اینم یه مثال از سازماندهی که ممکنه بخوایید ازش استفاده کنید :

/*————————-
    بازنشانی ها
————————-*/

/*————————-
    کلاس های عمومی
————————-*/

/*————————-
    استایل های قالب
————————-*/

/*————————-
    بعضی کلاس های خاص
————————-*/

۸٫ خوانا بنویسید

سعی کنید دندانه دار بودن کد ها رعایت بشه. برای خوانایی بیشتر می تونید هر خصیصه و مقدارش رو در یک سطر و یا همه خصیصه ها رو در یه سطر قرار بدید. البته استفاده ترکیبی هم می تونه کارآمد باشه.

/*————————
هر خصیصه در یک سطر
———————*/
div{
    background-color: #3399cc;    
    color: #666;
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    height: 300px;
    margin: 10px 5px;
    padding: 5px 0 10px 5px;
    width: 30%;
    z-index: 10;
}

/*————————
ترکیبی
———————*/
div{
         background-color: #3399cc; color: #666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
         height: 300px; margin: 10px 5px; padding: 5px 0 10px 5px; width: 30%; z-index: 10;
}

۹٫ خصیصه ها رو بر اساس الفبا مرتب نگه دارید

البته این مورد کمی دشواره ولی می تونه در پیدا کردن خصیصه ها کمک زیادی بکنه.

div{
    background-color: #3399cc;    
    color: #666;
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    height: 300px;
    margin: 10px 5px;
    padding: 5px 0 10px 5px;
    width: 30%;
    z-index: 10;
}

۱۰٫ فایل های CSS رو تا حد امکان تقسیم کنید

اگر روی یه پروژه بزرگ با ماژول های مختلف کار می کنید و هر ماژول استایل های متفاوتی داره، بهتره فایل های CSS رو تا جایی که می تونید به فایل های بیشتری تقسیم کنید. معمولا بر اساس کاربرد استایل ها می تونیم اونها رو توی فایل مجزایی قرار بدیم. مثلا یه فایل برای بازنشانی، یکی برای چهارچوب قالب و یکی هم برای نوشتار.

البته در پروژه های بزرگ تعداد در خواست های HTTP اهمیت زیادی داره و طبعا زیاد شدن تعداد فایل ها یعنی زیادتر شدن درخواست ها. برای همین می تونیم از یه فایل برای Import کردن بقیه فایل ها استفاده کنیم. به عنوان مثال من اینجا یه فایل import.css  ایجاد کردم که محتواش به این شکله :

@import "css/reset.css";
@import "css/typography.css";
@import "css/layout.css";

۱۱٫ فایل ها رو فشرده کنید

ابزار های زیادی وجود داره که فایل های CSS شما رو فشرده می کنن. این کار باعث کوچک تر شدن فایل و در نتیجه افزایش سرعت وب سایت می شه. بخصوص توی پروژه های بزرگ سعی کنید از ابزاری مثل CSS Compressor برای فشرده سازی استفاده کنید.
۱۲٫ در سبک کاری ثابت قدم باشید

وقتی روی چند تا پروژه وب کار می کنید، بهتره سعی کنید در نحوه چیدن و فرمت دهی کدها از یه روال مشخص استفاده کنید. البته به موازات بالا رفتن تجربه این موضوع خودش حل می شه.