خرید اینترنتی کتاب

جستجو در تک بوک با گوگل!

تابعيت پايگاه تك بوك از قوانين جمهوري اسلامي ايران

فرادرس!



چطور!




تبلیغات!


غلبه بر کم رویی

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

امتیاز به این مطلب!

352 views

بازدید

 


نکاتی برای بهتر نوشتن کدهای 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 برای فشرده سازی استفاده کنید.
۱۲٫ در سبک کاری ثابت قدم باشید

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

 

دانلود کتاب






مطالب مشابه با این مطلب

    ساخت ساده بک گراند ماتریکس در فتوشاپ

    ساخت ساده بک گراند ماتریکس در فتوشاپ / Adobe Photoshop را میتوان بدون شک قدرتمندترین نرم افزار ساخت و ویرایش تصاویر گرافیکی دانست. توانایی هایی که این نرم افزار دارد گاهی شما را به حیرت وا میدارد. حتی ممکن است تصویر گرافیکی را مشاهده […]

    خاموش کردن ویندوز ۱۰ بدون موس

    خاموش کردن ویندوز ۱۰ بدون موس تا به حال به این فکر کرده اید که کامپیوتر خود را بدون موس خاموش، به حالت خواب و یا ری استارت کنید؟! در اینجا می خواهیم میانبرهایی را برای ویندوز ۱۰ معرفی کنیم که آن را خاموش […]

    فعال سازی رمزهای حرفه ای در ویندوز ۱۰

    فعال سازی رمزهای حرفه ای در ویندوز ۱۰ / ویندوز ۱۰، آخرین نسخه از سیستم‌عامل ویندوز است که در طول زمان به‌روزرسانی‌های متعددی برای آن منتشر می‌شود، اما نسخه اصلی آن همچنان روی ۱۰ باقی می‌ماند و احتمالا هیچ نام جدیدی به ویندوز اختصاص […]

    صفر تا ۱۰۰ فتوشاپ

    صفر تا ۱۰۰ فتوشاپ : فتوشاپ نرم افزاری است که غریب به اتفاق مردم از آن استفاده می‌کنند. این نرم افزار همراه با ویژگی‌های پیچیده و قابلیت‌های گسترده‌ای که دارد همواره یکی از مورد استفاده‌ترین برنامه‌ها نزد عکاسان حرفه‌ای دنیا است. بنابر‌این یاد گرفتن […]

    حل مشکل پر شدن درایو C

    شاید برای شما پیش اومده باشه گاهی اوقات درایو C یا حتی درایو های دیگه شما خود به خود پر میشن تا جایی این مشکل پیش میره که دیگه جایی تو درایو c شما باقی نمی مونه و باعث میشه سیستم کند بشه حتی […]

    اجرای برنامه‌ها در دسکتاپ‌های مجازی

    بالاخره مایکروسافت قابلیت ایجاد دسکتاپ‌های مجازی را به‌عنوان یکی از امکانات پیش‌فرض در ویندوز ۱۰ در اختیار کاربران قرار داده و به کمک این قابلیت، مدیریت آسان‌تر و منظم‌تر محیط کاربری ویندوز را برای کاربران فراهم کرده است. تابه‌حال از این قابلیت استفاده کرده‌اید؟ […]




هو الکاتب


پایگاه اینترنتی دانلود رايگان كتاب تك بوك در ستاد ساماندهي سايتهاي ايراني به ثبت رسيده است و  بر طبق قوانین جمهوری اسلامی ایران فعالیت میکند و به هیچ ارگان یا سازمانی وابسته نیست و هر گونه فعالیت غیر اخلاقی و سیاسی در آن ممنوع میباشد.
این پایگاه اینترنتی هیچ مسئولیتی در قبال محتویات کتاب ها و مطالب موجود در سایت نمی پذیرد و محتویات آنها مستقیما به نویسنده آنها مربوط میشود.
در صورت مشاهده کتابی خارج از قوانین در اینجا اعلام کنید تا حذف شود(حتما نام کامل کتاب و دلیل حذف قید شود) ،  درخواستهای سلیقه ای رسیدگی نخواهد شد.
در صورتیکه شما نویسنده یا ناشر یکی از کتاب هایی هستید که به اشتباه در این پایگاه اینترنتی قرار داده شده از اینجا تقاضای حذف کتاب کنید تا بسرعت حذف شود.
كتابخانه رايگان تك كتاب
دانلود كتاب هنر نيست ، خواندن كتاب هنر است.

دانلود کتاب , دانلود کتاب اندروید , کتاب , pdf , دانلود , کتاب آموزش , دانلود رایگان کتاب


تمامی حقوق و مطالب سایت برای تک بوک محفوظ است و هرگونه کپی برداری بدون ذکر منبع ممنوع می باشد.


فید نقشه سایت

تمامی حقوق برای سایت تک بوک محفوظ میباشد