نحوه استفاده درست و غلط از css بخش دوم

 نحوه استفاده درست و غلط از css بخش دوم

نحوه استفاده درست و غلط از css بخش دوم

کابردهای صحیح

استفاده از فهرست محتویات css

پیشنهاد می شود که یک فهرست در ابتدای فایل css خود از محتویات آن داشته باشید. این کار به رهگیری هرچه بهتر کدها کمک می کند. با منظم نگه داشتن کدها، مدیریت آنها بهتر و راحت تر انجام خواهد شد.

به مثال زیر توجه کنید:

/* Project Meta */

/* reset  */

/* general */

/* typography */

/* grid */

/* header */

/* footer */

/* Page template A */

/* Page template B */

/* Media Queries */

Css خود را خوانا کنید

خوانایی کد با تمیز نویسی به دست می آید. داشتن css خوانا نگهداری آن را راحت تر می کند و اعمال تغییرات در آینده را سهولت می بخشد.

دو راه برای تمیز نویسی وجود دارد:

نوع اول فرم تک خطی:

.box {background: green; border: 1px solid black;}

نوع دوم فرم استاندارد:

.box {

background: green;

border: 1px solid black;

}

انیمیشن های css را در آخر قرار دهید

پیشنهاد می شود که انیمیشن ها را در انتهای فایل قرار دهید. با اینکا مرورگر را مجبور می کنید تا کلاس های پایه را زودتر به کارگیرد.

المان ها را ترکیب کنید

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

h1, h2, h3 {font-family: 'Lato', sans-serif; color: #dadada;}

از صفات کوتاه شده استفاده کنید

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

#div {

margin-top: 10px;

margin-right: 10px;

margin-bottom: 3px;

margint-left: 4px;

}
#div {

margin: 10px 10px 3px 4px; // top, right, bottom left 

}

از کامنت استفاده کنید

یکی از کارهای صحیح در هنگام نوشتن css، استفاده از کامنت در کد است. این کار کمک می کند تا به سادگی به قسمتی که می خواهید دسترسی پیدا کنید.

/* GENERAL RULE */

html,

body {

font-family: 'Lato', sans-serif;

height: 100%;

background: #ecf0f1;

overflow: hidden;

}

h1 {

color: #3498db;

text-align: center;

font-size: 35px;

margin: 100px 0px;

font-weight: 700;

}

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

شما وب سایت را برای تمامی مرورگرها باید طراحی کنید. بنابراین نیاز است تا پیشوندهای مرورگرهای مختلف را بلد باشید و از آنها هنگام نیاز استفاده کنید. این پیشوند ها عبارتند از:

Chrome: -webkit-

Firefox: -moz-

iOS: -webkit-

Opera: -o-

Safari: -webkit-

برای مثال برای افزودن transition در فایل css خود باید آن را 5 بار به صورت زیر بنویسید:

-webkit-transition: all 6s ease;

-moz-transition: all 6s ease;

-ms-transition: all 6s ease;

-o-transition: all 6s ease;

transition: all 6s ease;

فایل css را فشرده کنید

یکی دیگر از راههای دستیابی به سرعت بارگیری بهتر وب سایت، کاهش حجم فایل های css است. ابزارهای آنلاین مختلفی برای این کار وجود دارند. این فشرده سازها عمدتاً فضاهای خالی و کلاس های تکراری را حذف می کنند.

بیشتر از رنگ HEX استفاده کنید

در حدود 16.7 میلیون رنگ وجود دارد که می توانیم از بین آنها انتخاب کنیم. استفاده از اسم رنگ ها به جای کد hex، خیلی مناسب نیست. زیرا html و css تنها دارای 140 نام رنگ هستند.پس این کار معقول به نظر می رسد.

اعتبار سنجی

از وب سایت w3c استفاده کنید و کد خود را چک کنید. اشکالاتی همچون براکت بسته نشده و قرار ندادن ; می تواند به راحتی پیدا شود.

به اشتراک گذاری این مطلب :
آیـا به مشـاوره نیـاز دارید؟
021-88171021
ارتـباط از طریـق تـلگرام