۱۲ اشتباه رایج css توسط طراحان وب

۱۲ اشتباه رایج css توسط طراحان وب
میانگین 5 از 1 رای

تا آنجا که به زبان های وب مربوط می شود، CSS مسلما ساده ترین زبان می باشد. منظور این است که واقعا چه چیزی می تواند ساده تر از یک لیست ساده از ویژگی های تاثیر گذار بر یک عنصر باشد؟ و اینکه نوشتار آن همان زبان انگلیسی است. آیا می خواهید اندازه فونت را تغییر دهید؟ ویژگی font-size وجود دارد. در مورد رنگ چطور؟ ویژگی color مهیاست.

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

در این مطلب لیستی از اشتباهات رایج css که ممکن است به آنها کم توجه باشیم را ارایه می کنم.

12 اشتباه رایج css توسط طراحان وب

1- عدم استفاده از استایل css reset

مرورگرهای وب دوستان بی ثبات ما هستند! گاهی ناسازگاری های آنها باعث می شود حسابی عصبانی شویم. اما اگر با آنها واضح سخن بگوییم تا حد زیادی به ما گوش خواهند داد.

شاید یکی از بدترین کارهایی که مرورگرها انجام میدهند تهیه یک ساختار پیش فرض برای عناصر html باشد! اما نمی توانیم به آنها خرده بگیریم … تصور کنید یک توسعه دهنده وب هیچ استایلی برای html یا صفحه وب سایتش استفاده نکند. باید یک سیستم پشتیبان برای چنین توسعه دهندگانی مهیا باشد.

استایل reset چه میکند؟ تنظیم تمام استایل های عناصر html به یک مقدار پایه. برای مثال می خواهیم یک مقدار پیش فرض برای تمامی فاصله ها تعیین کنیم:

* { margin:0; padding:0; }

قطعه کد بالا تنها بخشی از reset (بازنشانی) استایل های css می باشد و باید ویژگی های دیگر از جمله border، line-height و … را نیز تنظیم نمایید. نسخه های تقریبا کاملی از فایل های reset در سراسر وب یافت می شود حتما از آنها استفاده کنید.

 

2- استفاده بیش از حد از انتخابگرها (همان selector)

استفاده زیاد از انتخابگرها بصورت زنجیرهای پی در پی فقط کد شما را شلوغ خواهد کرد!

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

ul#navigation li a { ... }

عموما این ساختار برای نمایش یک فهرست در صفحه وب استفاده می شود. اشکال در کجاست؟ قطعا درون یک عنصر ul عناصر li لیست می شود و عناصر li در یک فهرست لینک ها منو (تگ <a>) را در خود جای می دهند. بنابراین بهتر است به شکل زیر ویرایش شود:

#navigation a { ... }

پس همیشه سعی کنیم ساختار css را در خلاصه ترین حالت ممکن بنویسیم.

 

3- تکرار ویژگی ها برای یک انتخابگر

به قطعه کد زیر توجه نمایید:

#selector {
     margin-top: 50px;
     margin-right: 0;
     margin-bottom: 50px;
     margin-left 0;
}

امیدوارم خیلی سریع مشکل را پیدا کرده باشید!

خوشبختانه یک راه حل ساده برای این تکرار بی مورد وجود دارد و در عین حفظ ویژگی ها، کد css را کوتاه تر خواهد کرد:

#selector {
     margin: 50px 0;
}

یک مثال رایج دیگر در مورد ویژگی font :

font-family: Helvetica;
font-size: 14px;
font-weight: bold;
line-height: 1.5;

تبدیل شود به :

font: bold 14px/1.5 Helvetica;

و الی آخر … برای بسیاری از ویژگی های css می توانیم این خلاصه سازی را انجام دهیم و عملکرد وب سایت را بالاتر ببریم.

 

4- استفاده از 0px بجای 0

مثلا اگر بخواهیم 20 پیکسل به پایین یک عنصر فاصله دهیم احتمالا این کد را می نویسیم:

#selector { margin: 20px 0px 20px 0px; }

در کد بالا اصلا نیازی به نوشتن px بعد از اعداد 0 نیست!

در نظر بگیرید در فایل های css سنگین و طولانی این مساله چقد می تواند برای ما صرفه جویی کند.

 

5- استفاده از نام رنگ بجای کد رنگ

سعی کنیم به جای استفاده از نام رنگ ها مثلا ( color: red ) کد مبنای 16 آن را بنویسیم :

color: #FF0000;

بجای آنکه هر مرورگر تصمیم بگیرد مثلا رنگ با نام red چه رنگیست، با استفاده از کد رنگ بصورت واضح رنگ مورد نظرمان را به تمام مرورگرها اعلام می کنیم.

این مورد ممکن است خیلی بدیهی بنظر برسد ولی مطمئن باشید هر جز کوچکی تاثیر مثبت خود را خواهد داشت.

 

ممکن است ۱۰ کلید نوشتن مقاله با سئو عالی نیز برای شما جذاب باشد

 

6- انتخابگرهای تکراری

اگر بصورت ساختارمند شروع به نوشتن کدهای html و سپس استایل نماییم تا حد زیادی می توانیم از نوشتن selector های اضافی و یا تکراری خودداری کنیم. نظم در نوشتن کدها به عنوان یک اصل مهم می تواند قابل توجه باشد.

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

 

7- نوشتن ویژگی های تکراری

همانطور که ممکن است ویژگی های تکراری برای یک انتخابگر وارد کنیم(مورد 3)، امکان نوشتن ویژگی های همسان برای چند selector نیز وجود دارد! برای روشن شدن مطلب به مثال زیر توجه کنید:

#selector-1 {
    font-style: italic;
    color: #e7e7e7;
    margin: 5px;
    padding: 20px
}
.selector-2 {
    font-style: italic;
    color: #e7e7e7;
    margin: 5px;
    padding: 20px
}

در صورتیکه می توانیم قطعه کد بالا را به شکل دیگری بنویسیم و آنها را ترکیب نماییم:

#selector-1, .selector-2 {
    font-style: italic;
    color: #e7e7e7;
    margin: 5px;
    padding: 20px
}

امیدوارم به اهمیت این موارد پی برده باشید چراکه این خلاصه سازی ها در زمان بارگذاری یک صفحه (page-load speed) تاثیر زیادی دارد.

 

8- عدم استفاده از فونت پشتیبان

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

#selector {
    font-family: 'Yekan' ;
}

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

#selector {
    font-family: 'Yekan', Arial, sans-serif;
}

فونت های Arial, sans-serif بصورت پیش فرض برای مرورگرهای مختلف قابل نمایش هستند و بعنوان پشتیبان فونت اصلی عمل خواهند کرد.

 

9- فضاهای سفید اضافی

زمانی که قصد داریم برای بهبود عملکرد فضاهای سفید(فضاهای خالی) را حذف کنیم یک space هم به حساب می آید. پس تا آنجا که بتوانیم باید از فضاهای سفید، فاصله ها، space ها و Enter های اضافی دوری کنیم.

همچنین می توانیم پس از اتمام نوشتن فایل css، آن را توسط ابزارهای آنلاین فشرده سازی با عناوین css compressor یا CSS Minifier کم حجم و فشرده نماییم.

 

10- عدم استفاده از ساختار مشخص

تصور کنید یک فایل پر از کدهای css را نوشته اید، پس از یک یا چند ماه دوباره قصد ویرایش فایل را دارید؛ آیا جایگاه کدها و ساختار آن را به یاد خواهید آورد؟

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

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

 

11- استفاده از یک فایل css برای همه چیز

چقدر همه چیز مرتب خواهد بود اگر فایل های css را بصورت ماژول های جدا تقسیم کنیم. برای reset ، پلاگین ها و … فایل های جداگانه ای تعریف نماییم.

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

می توانید از فراخوانی فایل ها درون یک فایل css استفاده کنید:

@import url("reset.css");
@import url("ie.css");
@import url("typography.css");
@import url("layout.css");

هیچ چیز به اندازه نظم در یک پروژه آرامش بخش نیست.

 

12- عدم استفاده از استایل مجزا برای Print

ممکن است برخی صفحات سایت نیاز به پرینت داشته باشند. تنها کار لازم، اضافه کردن قطعه کد زیر به بخش head صفحه می باشد:

<link rel=”stylesheet” href=”printStyle.css” media=”print” />
در فایل printStyle.css بخش هایی از سایت را که قصد نمایش در حالت پرینت ندارید، مخفی نمایید. مثلا  نیازی نیست فهرست و یا بنرهای تبلیغاتی در حالت پرینت مشاهده شوند. به این فکر کنید سایت شما در زمان پرینت چطور نمایش داده می شود.

 

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