بازدید
زبان 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 برای فشرده سازی استفاده کنید.
۱۲٫ در سبک کاری ثابت قدم باشید
وقتی روی چند تا پروژه وب کار می کنید، بهتره سعی کنید در نحوه چیدن و فرمت دهی کدها از یه روال مشخص استفاده کنید. البته به موازات بالا رفتن تجربه این موضوع خودش حل می شه.
-
آموزش های عمومی برای ورود به بازار کار
آموزش های عمومی برای ورود به بازار کار ۱٫۳۳/۵ (۲۶٫۶۷%) ۳ امتیازs موضوع : آموزش های عمومی برای ورود به بازار کار کسب مهارت برای ورود به بازار کار امروز در تک بوک میخواهیم سایتی رو به شما معرفی کنیم که میتونید توش […]
ترفندهای جدید در پاورپوینت ۳٫۰۰/۵ (۶۰٫۰۰%) ۱ امتیاز PowerPoint ابزاری ساده و پرکاربرد برای ارائه کنفرانس، سخنرانی و تحقیقات است و با امکاناتی که روز به روز به آن افزوده میشود، کار با این ابزار ساده تر از گذشته شده است.
۱۱ روش آوردن کنترل پنل در ویندوز ۱۰ ۳٫۰۰/۵ (۶۰٫۰۰%) ۱ امتیاز تمام قسمت های ویندوز ۱۰ بهینه شده است از ابزارها گرفته تا قسمت هایی که مربوط به تنظیمات این سیستم عامل می باشد.
۱۱ امتیاز برای مهاجرت به ویندوز ۱۰/ با عرضه ویندوز ۱۰ بررسی امکانات و ویژگیهای آن آغاز شده است. اگر چه این ویندوز به علت برخی قابلیت هایش از توانمندی بیشتری برای جمع آوری اطلاعات شخصی کاربران برخوردار است، اما مزایای زیادی هم دارد.
اندازه مناسب و قابل حمل بودن سیستمعاملهای مختلف، حافظه فلش مموری را به دستگاهی بسیار پرکاربرد برای انتقال اطلاعات تبدیل میکند.
همزمان با افزایش بدافزارها، کرمهای اینترنتی و تروجانها، هکرها و سارقان اطلاعات همواره به دنبال راههایی به منظور سرقت اطلاعات و دسترسی به حسابهای بانکی و گاهی بوجود آوردن اختلالات الکترونیکی بوده اند.
به نکات زیر توجه کنید