10 نکته ی ساده و مهم در CSS

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

1. از ابتدا CSS خود را طبقه بندی کنید

فرض کنید میخواهید نوشتن استایل یک سایت را شروع کنید، باید از ابتدا طبقه بندی کردن رو در نظر داشته باشید تا به سرعت به همه ی کلاس ها و استایل ها دسترسی داشته باشید، به این صورت شروع کنید که فایل های CSS مختلف برای قسمت های مختلف بسازید، به عنوان نمونه استایل های خود را با فایل های global.css ، reset.css ، flash.css ، pages.css بسازید و استایل ها را اینگونه طبقه بندی کنید.

2. از استایل های Reset استفاده کنید

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

3. استایل ها را کوتاه تر بنویسید

بعضی از Property های CSS را میتوان به صورت خیلی کوتاه و راحتتر نوشت، به دو نمونه ی زیر توجه کنید که هر دو یک نتیجه دارند اما اولی کوتاه تر است:

margin: 1em 0 2em 0.5em;

margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;
پس بهتره که Property ها را بهتر بشناسیم. Property های دیگر مثل border ، background و font نیز این چنین هستند.

4. شما میتوانید به صورت مستقیم حروف رو بزرگ و یا کوچک کنید

با استفاده از text-transform میتوانید بزرگ و یا کوچک بودن حروف رو تغییر دهید، این Property سه مقدار uppercase و lowercase و capitalize را میپزیرد که به ترتیب حروف بزرگ ، حروف کوچک و حرف اول بزرگ را نتیجه میدهد.

5. قدرت پیدا کردن المنت ها را در خود تقویت کنید

به عنوان مثال div > strong تمام تگ های Strong که در یک Div قرار دارند را مشخص میکند، شاید تا حالا چنین Selectorی ندیده بودید، اما خیلی از این راهکار ها هستند که ما هنوز آنها را پیدا نکردیم، این Selector میتواند خیلی بیشتر و طولانی تر نیز باشد به عنوان مثال div > p > strong > b به تگ های b ای که در یک strongی که در یک p محدود شده به یک div هستند اشاره میکند.

یا یک مثال دیگر input[type=text] است! این Selector به تمام input هایی که type آنها برابر text باشد اشاره دارد.

6. از after و before استفاده کنید

همانطور که از نام این دو پیداست به بعد و قبل یک المنت اشاره دارد، به مثال زیر دقت کنید که بعد از لینک ها آیکون Technorati را قرار میدهد:

a:before{content: url(http://www.technorati.com/favicon.ico);}

7. شما میتوانید برای فید های خود نیز استایل تعریف کنید

به کد زیر توجه کنید که فایل CSS را به فید RSS شما اضافه میکند، این کد باید در فید شما باشد:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>

8. استایل پرینت صفحه ی خود را مشخص کنید

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

<link rel="stylesheet" type="text/css" href="print.css" media="print">

9. به سادگی المنت خود را به وسط صفحه ببرید

شاید تاکنون برای اینکه یک المنت مثل یک div رو به وسط صفحه ببرید بالا و پایین اون از تگ center استفاده میکردید و یا به تگ بالایی text-align=’center’ میدادید، اما حال میخواهیم یک راه ساده تر با نتیجه ی بهتر را بیان کنیم، از این پس کافیست که استایل margin: 0 auto; را به المنت خود بدهید، به عنوان مثال کد زیر یک div با سایز 400 در 600 را در وسط صفحه نمایش میدهد:

<div style="width:400px;height:600px;margin: 0 auto;">Hello World!</div>

10. برای IE یک CSS جدا بسازید

اکثر مواقع طرح های ما در IE با همه مرورگرها فرق دارد، برای اینکه در IE نیز سایت شما درست نمایش داده شود کافیست تغییراتی را که با آنها سایت شما درست نمایش داده میگردد را در یک فایل مثلا به نام ieFixes.css ذخیره کنید و سپس با استفاده از کد زیر این فایل را فقط در IE فراخوانی کنید:

<!--[if IE]><link rel="stylesheet" type="text/css" href="ieFixes.css" /><![endif]-->

 

نکات بسیار است و وقت کم است،اگه یک طراح هستید همیشه سعی کنید با CSS بازی کنید. اگر مشکلی در این موارد داشتید خوشحال میشم بتونم کمکتون کنم.