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

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

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

با استفاده از css3، می توانیم media query ها را مدیریت کنیم، تصاویر پس زمینه را بهتر به کار ببریم و حتی از انیمیشن هایی استفاده کنیم که سرعت بارگیری بالایی در نسخه موبایل وب سایت دارند. این ویژگی ها برای توسعه دهندگان وب، و طراحان وب سایت بسیار کارآمد است.

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

حتی اگر مدت زیادی است که به طراحی وب مشغول هستید، ممکن است بعضی از این عادت های  اشتباه در شما مانده باشد که بهتر است فراموش شوند. همچنین در ادامه این مطلب، روش هایی را برای استفاده بیشتر از css و زیبا نویسی و قابل مدیریت بودن کد مطرح خواهیم کرد.

کاربرهای غلط

استفاده مکرر از یک صفت

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

به طور مثال به جای :

#intro1 {color: blue; font-size: 10px; font-weight: bold;}

header {color: blue; font-size: 20px; background-color: green;}

#banner {color: blue; font-size: 30px; background-image: url(images/static.jpg);}

بنویسید:

.blue {color: blue;}

 

استفاده از انتخابگر id برای المان های مختلف

هنگام نوشتن css، دقت داشته باشید که  هر id  فقط یکبار باید در فایل html تکرار شود. همواره از کلاس برای المان های مختلف استفاده کنید.

برای مثال، به جای :

<p id="big">This is a great heading.</p>

<p id="big">This is absolutely a greater heading.</p>

باید بنویسید:

<p class="big">This is a great heading.</p>

<p class="big">This is absolutely a greater heading.</p>

استفاده بیش از حد از !important

این کد برای باطل کردن کدهای نوشته شده در فایل  css توسعه دهندگان در اواخر دهه 90 به کار گرفته شد. به زبان ساده این کد می گوید که "من مهم هستم، بقیه کد ها را در نظر نگیر و از من استفاده کن". استفاده از این کد از روی تنبلی باعث سختی مدیریت css خواهد شد. همواره سعی کنید طوری کد بزنید که نیازی به استفاده از این ابزار نداشته باشید، هرچند برخی اوقات استفاده از آن حس می شود، مخصوصاً هنگام به کار گیری media query ها برای نسخه موبایل و تبلت.

استفاده ناکارآمد از انتخابگر های css

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

به طور مثال به جای استفاده از انتخابگر به صورت زیر:

#header #intro h1.big a {... }

#header #intro h1.big a.normal {... }

می توانید به این صورت استفاده کنید:

.big a {... }

.big .normal {... }

به کار گیری فونت های وبی متنوع

واضح است که تایپوگرافی، یکی از ضروری ترین و مهمترین نکات برندینگ و اعتماد سازی است.

اما در نظر داشته باشید که هر فونت به معنای اضافه شدن چند فایل در هنگام لود شدن صفحه وب است و ممکن است همه فونت ها، به درستی نتوانند متن را نمایش دهند.

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

بهتر است که از یک یا دو فونت ( نهایتاً سه ) استفاده کنید و نسخه مناسب برای مرورگرهای مختلف را به کار گیرید.

استایل دادن درون خطی

استایل دادن درون خطی همواره یکی از بدترین شیوه های آراستن صفحات وب سایت است که یک طراح یا توسعه دهنده ممکن است از آن استفاده کند. در ابتدا این کار، هدف از به کارگیری فایل css ( که جدا سازی استیال ها از html است) را زیر سوال می برد.

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

اما به خاطر داشته باشید برای ارسال خبرنامه ها، تنها راه استفاده از استایل ها، شیوه درون خطی است، زیرا بسیاری از کلاینت های ایمیل، از فایل های css پشتیبانی نمی کنند.

در نهایت باید به خاطر داشت که استایل های درون خطی، آبشاری بودن  css را مخدوش می کنند و تمام استایل های دیگر را باطل می کنند، پس حواستان را جمع کنید.

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