آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

سوالاتی برای ساختن و برقرار کردن راهنمای FrontEnd (جلسه 7) : CSS - قسمت 3

0 199 ۲۵ بهمن ۹۵

frontend

ابزارهای CSS

  • راهنمای شما برای استفاده از Preprocessor ها چی هست؟

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

  • آیا شما از CSS Base استفاده میکنید؟

همونطور که میدونین هر مرورگری بصورت پیش فرض یک سری استایل برای هر المنت قرار میده و اگر اونا رو بازنویسی نکنیم، بیشتر وقتا به مشکل میخوریم. مثلا اگر دقیقا یک کد رو بنویسیم و اون رو درون مرورگرهای مختلف باز کنیم، خواهیم دید که همه جا به یک شکل نمایش داده نمیشه و فاصله و حاشیه و ... ناخواسته زیادی وجود داره. حالا شما میتونین با کدهای از پیش تعریف شده که نقش CSS Base دارن این مشکل رو برطرف کنید و کاری کنید که این موارد در همه مرورگرها به یک صورت و یک شکل در بیان و دیگه نگرانی از این بابت وجود نداشته باشه. در اینجا تعدادی کد معروف که وجود داره رو بهتون معرفی میکنم.meyer css reset

این تصویر مربوط به Eric Meyer’s “Reset CSS” 2.0 هست که تقریبا معروفترین کد برای این موضوع به حساب میاد. این مورد رو به نام CSS Reset میشناسیم و کار اصلی اون اینه که همه ویژگی ها رو به حالت اولیه و 0 برمیگردونه و اونا رو Reset یا بازنشانی میکنه و باعث میشه که استایلهای مرورگر رو بازنویسی یا override کنه. کد اون بصورت زیر هست:

از این کد میتونین درون سایت خودتون استفاده کنید و همه ویژگی ها رو Reset کنید.normalize

این تصویر مربوط به Normalize.css هست. به احتمال زیاد با این مورد هم باید آشنایی داشته باشید. کاری که CSS Reset میکرد، همه چیز رو 0 میکرد ولی در اینجا همه چیز Normalize میشن. یعنی همه استایلها طوری تغییر داده میشن که در همه مرورگرها ظاهر و استایلی ثابت و یکپارچه داشته باشند. کد این مورد رو میتونین در اینجا ببینید.yui

مورد بعدی Yahoo! (YUI 3) Reset CSS هست که این مورد هم ویژگی های مربوط به خودش رو داره. کدهای این مورد هم بصورت زیر هست:

html5 doctor reset css

مورد آخری هم که در مورد اون صحبت میکنیم HTML5 Doctor CSS Reset هست که توسط سایت html5doctor تهیه شده و شما میتونین از اون استفاده کنید. کدهای این مورد هم بصورت زیر هست:

پس شما بسته به نیازتون میتونین یکی از این موارد رو انتخاب کنید. پس با پاسخ به این سوال هم تکلیف کدهای CSS Base مشخص میشه.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram