20 نکته برای نوشتن CSS مدرن

بخش: توسعه وب 90 بار مشاهده شده دوشنبه ۱۳ شهریور ۹۶ 0 نظر ارسال شده
20 نکته برای نوشتن CSS مدرن

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

 

1. مراقب Margin Collapse باشید

بر خلاف بسیاری از خاصیت های دیگر، marginهای عمودی هنگامی که با آنها ملاقات می شوند collapse می کنند. این بدان معنی است که وقتی bottom margin یک المان به top margin دیگری وارد می شودو تنها بزرگتر از دو ها باقی می مانند. در اینجا یک مثال ساده وجود دارد:

کد html:

 
 

کد css:

.square {
    width: 80px;
    height: 80px;
}

.red {
    background-color: #F44336;
    margin-bottom: 40px;
}

.blue {
    background-color: #2196F3;
    margin-top: 30px;
}

به جای فاصله px 70 بین مربع قرمز و آبی تنها px40 وجود دارد، margin مربع آبی به هیچ وجه مورد توجه نیست. راه هایی برای مبارزه با این رفتار وجود دارد، اما بهتر است تنها با آن کار کنید و از margin ها فقط در یک جهت و ترجیحا margin-bottom استفاده کنید.

 

2. استفاده از Flexbox برای Layoutها

مدل flexbox تنها برای یک دلیل به وجود آمده است. Floatها و inline-blockها کار می کنند، اما همه آنها اساسا ابزاری برای یکپارچه سازی اسناد هستند و برای وب سایت ها مناسب نمی باشند. از سوی دیگر Flexbox به طور خاصی طراحی شده تا هر گونه طرح بندی را به سادگی و دقیقا به همان شیوه ای که پیش بینی شده ایجاد نماید.

مجموعه ای از خاصیت هایی که با مدل flexbox ارائه می شوند، انعطاف پذیری زیادی را برای توسعه دهندگان به همراه خواهند داشت (بدون استفاده از pun) و با استفاده از آن انجام responsive layout بسیار آسان است. امروزه پشتیبانی مرورگر تقریبا کامل شده، بنابراین هیچ موردی مانع از استفادۀ کامل flexbox نمی شود.

.container {
    display: flex;
    /* Don't forget to add prefixes for Safari */
    display: -webkit-flex;
}

پیش از این در softskill تعدادی راهنمایی و ترفندی با flexbox را ارائه نموده ایم. می توانید از آن ها دیدن نمایید.

 

3. انجام CSS Reset

با وجود بهبود یافتن وضعیت در این سال ها، مرورگرها همچنان به صورت متفاوتی رفتار می کنند در نتیجه تغییرات فراوانی وجود دارد. بهترین راه برای حل این مسئله اعمال reset CSS است که مقادیر پیش فرض جهانی را برای تمام المان ها تنظیم می کند و به شما امکان شروع کار بر روی یک style sheet پاک را می دهد، همچنین در جاهای دیگر نیز دارای نتایج مشابه است.

کتابخانه هایی مانند normalize.css، minireset و ress وجود دارند که این کار را بسیار خوب انجام می دهند و تمامی تناقض های قابل تصور مرورگر را تصحیح می کنند. اگر نمی خواهید از یک کتابخانه استفاده کنید، می توانید با استفاده از این style ها، تنظیمات CSS بسیار ساده خود را انجام نمایید:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

این امر ممکن است کمی سخت به نظر برسد ، اما حذف margin هاو paddingها در واقع باعث قرار دادن بسیار آسان تر المان ها می شود، زیرا فضاهای پیش فرضی میان آنها برای توجه به account وجود ندارد. box-sizing: border-box; از دیگر خاصیت های پیش فرض مفید است، که در ترفند بعدی بیش تر در رابطه با آن صحبت می کنیم.

 

4. Border-box برای همه

اکثر مبتدیان درباره خاصیت box-size نمی دانند اما واقعا با اهمیت می باشد. بهترین راه برای فهمیدن آن مشاهده این دو مقدار ممکن است:

  • content-box (به طور پیش فرض) : هنگامی که عرض / ارتفاع را برای یک المان تعیین می کنیم، این تنهااندازه آن محتوا است. تمام paddingها و borderها در بالای آن قرار دارند. به عنوان مثال. یک دارای width 100 و padding 10 است و المان ما 120 پیکسل (100 + 2 * 10) را می گیرد.
  • border-box : padding و border در عرض / ارتفاع گنجانده شده است. یک
    با width: 100px; و box-sizing: border-box; بدون در نظر گرفتن paddingها یا borderها 100 پیکسل گسترده تر می شوند.
    تنظیم border-box به تمام المان ها، باعث آسانی استایل می شود.

 

5. تصاویر به عنوان پس زمینه

هنگام افزودن تصاویر به طرح خود، به ویژه در زمانی که responsive است، به جای المان های از تگ با خاصیت background استفاده کنید.

این امر ممکن است به نظر کار بیشتری ببرد، اما در واقع باعث آسانی استایل دادن خاصیت های image شده که با تشکر از background-size ، background-position و دیگر خاصیت ها باعث حفظ اندازه اصلی و aspect-ratio می شود.

کد HTML:

Img element

bicycle

Div with background image

 

کد CSS:

 

img {
    width: 300px;
    height: 200px;
}

div {
    width: 300px;
    height: 200px;
    background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');
    background-position: center center;
    background-size: cover;
}

section{
    float: left;
    margin: 15px;
}

نقص این تکنیک این است که دسترسی به وب از صفحه شما یک حرکت کوچک می خواهد تا تصاویر منظم برای خوانندگان صفحه نمایش و موتورهای جستجو خسته کننده نشوند. این مسئله را می توان با استفاده از object-fit بسیار جذاب حل نمود اما هنوز دارای پشتیبانی کامل نسبت به مرورگر نمی باشد.

 

6. Borderهای بهتر جدول

جداول در HTML سرگرم کننده نیستند. آنها عجیب و غریب بوده و تقریبا برای responsive غیرممکن و مشکل می باشند. برای مثال، اگر می خواهید border های ساده را به جدول و ستون های آن اضافه کنید، احتمالا به این نتیجه می رسید:

table html 1

همانطور که مشاهده می کنید، در همه جا border های تکرار زیادی وجود دارد که خوب به نظر نمی رسد. در اینجا یک راه سریع و بدون هک برای حذف تمام borderهای دوگانه موجود است: به سادگی ؛border-collapse: collapse را به جدول اضافه کنید.

table html 1

 

7. نوشتن بهتر Commentها

CSS ممکن است یک زبان برنامه نویسی باشد اما هنوز باید مستند شود. برخی از نظرات ساده، همه موارد را برای سازماندهی style sheet ، همکاران یا آینده شما قابل دسترس تر می کند.

برای بخش های بزرگتر CSS مانند کامپوننت های اصلی یا نمایش های رسانه (media-queries)، از stylized comment استفاده کرده و چند خط جدید را بعد از آن بیافزایید:

/*---------------
    #Header
---------------*/
header { }

header nav { }

/*---------------
    #Slideshow
---------------*/
.slideshow { }

جزئیات در طراحی و یا کامپوننت ها با اهمیت کمتر را می توان با یک single-line comment مشخص کرد.

/*   Footer Buttons   */
.footer button { }

.footer button:hover { }

همچنین، به یاد داشته باشید که CSS نظر تک خط // ندارد، بنابراین هنگام نظر دادن چیزی لازم است که از دستور syntax / / استفاده کنید.

/*  Do  */
p {
    padding: 15px;
    /*border: 1px solid #222;*/
}

/*  Don't  */
p {
    padding: 15px;
    // border: 1px solid #222;  
}

 

8. همه kebab-case را دوست دارند

زمانی که nameها و idهای کلاس بیش از یک کلمه داشته باشند، باید با یک خط (-) نوشته شوند. CSS حساس به case-insensitive است بنابراین camelCase یک گزینه نیست. مدت ها پیش، تاکیداتی که مورد استفاده قرار نگرفتند (امروزه استفاده می شوند) که دش ها را به طور پیشفرض ایجاد می کند.

/*  Do     */
.footer-column-left { }

/*  Don't  */
.footerColumnLeft { }

.footer_column_left { }

هنگامی که اسم نام گذاری می آید، می توانید BEM را در نظر بگیرید که به دنبال مجموعه ای اصولی است که انسجام را اضافه می کنند و رویکرد component-based را برای توسعه ارائه می دهند. می توانید مقاله فوق العاده CSS-Tricks را برای کسب اطلاعات بخوانید.

 

9. خودتان تکرار نکنید

مقادیر برای بیشتر خاصیت های CSS از المان یک سطح در DOM tree به ارث می برند، از این رو نام آن ها را Cascading Style Sheets گذاشته اند. برای مثل خاصیت font را بدست آورید - تقریبا همیشه از parent (پدر) به ارث می برد و مجبور به تنظیم جداگانۀ مجددا برای هر المان در صفحه نمی باشد.

استایل های شایع font به المانیاافزوده می شوند و به آنها اجازه جاری شدن را می دهیم. در اینجا چند پیش فرض خوب وجود دارد:

html {
    font: normal 16px/1.4 sans-serif;
}

همیشه می توانید استایل های هر المان را تغییر دهید. آنچه می گوییم تنها برای جلوگیری از تکرار و استفاده از ارث در حداکثر مواقع می باشد.

 

10. انیمیشن CSS با transform

المان ها را با تغییر دادن width و height یا left/top/bottom/right تغییر ندهید. ترجیح می دهیم از خاصیت ()transform استفاده کنیم، زیرا آن انتقال را به صورت صاف تر انجام داده و هنگام خواندن کد، درک اهداف شما را آسان تر می نماید.

در اینجا یک مثال وجود دارد که می خواهیم یک توپ را متحرک کرده و به سمت راست اسلاید کنیم. به جای تغییر مقدار چپ، بهتر است از ()translateX استفاده کنید:

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}

/* Not Cool*/
.ball.slide-out {
    left: 500px;
}

/* Cool*/
.ball.slide-out {
    transform: translateX(450px);
}

Transform و تمام توابع آن (translate،rotate، scale و غیره) تقریبا با مرورگرهای جهانی سازگار است و می تواند آزادانه استفاده شود.

 

11. DIY نکنید،از کتابخانه استفاده نمایید

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

دفعه بعد که با مشکل CSS روبرو می شوید، سعی کنید پیش از استفاده نمودن از تمام توان و هک خود، راه حل های موجود در GitHub یا CodePen را بررسی کنید.

 

12. تعداد Selector را پایین نگه دارید

تمام انتخابگرهای CSS برابر نیستند. هنگامی که طراحان تازه کار CSS را می نویسند، معمولا انتظار دارند که selectorها همیشه تمام موارد را از آنها بازنویسی کنند. با این حال، همانطور که در مثال زیر نشان داده شده این طور نمی باشد:

کد HTML:

Active Button 

کد CSS:

 

a{
    color: #fff;
    padding: 15px;
}

a#blue-btn {
    background-color: blue;
}

a.active {
    background-color: red;
}

می خواهیم قادر به افزودن کلاس فعال به هر دکمه و قرمز شدن آن باشیم. این کار در اینجا کار نمی کند زیرا دکمه ما دارای background-color با ID selector هستند که خاصیت selector بالاتری دارند. این قانون چنین است:

(به عنوان مثال هدر) ID (#id) > Class (.class) > Type

خاصیت نیز باعث می شود تا a#button.active رتبه بالاتری از a#button داشته باشد. استفاده از انتخابگرها با خاصیت بالا سبب می شود که به طور دائم selectorهای قدیمی را با موارد حتی بالاتر بالا ببرید و در نهایت در نتیجه مهم باشید. این کار ما را به ترفند بعدی هدایت می کند:

 

13. از !important استفاده نکنید

جدا این کار را انجام ندهید، رفع سریع مشکل ممکن است موجب ایجاد بسیاری از مشکلات در آینده شود. در عوض علت تغییر نکردن آن را پیدا کنید.

تنها زمانی که قوانین !important قابل قبول است هنگامی است که می خواهید استایل های inline را از HTML حذف کنید، که به خودی خود یک عمل بد دیگر است که باید از آن اجتناب نمود.

 

14. Caps Lock برای معنی، text-transform برای استایل

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

Employees MUST wear a helmet!

اگر به دلایل استایل، باید متن را در تمام capهای خود داشته ، متن را به طور معمول در HTML نوشته و آن را به -caps با CSS تبدیل کنید. این یکسان به نظر می رسد، اما اگر محتوا را خارج از context قرار دهیم، محتوا بیشتر حس می شود.

Star Wars: The Force Awakens
.movie-poster {
    text-transform: uppercase;
}

این کار برای حروف کوچک و بزرگ نمودن حروف رشته ها نیز کاربرد دارد و text-transform آن ها را نیز به خوبی مدیریت می نماید.

 

15. Em، Remو Pixel

بسیاری از بحث ها در حیطه اینکه آیا مردم باید از مقادیر em، rem یا px برای تنظیم اندازه از المان ها و متن استفاده نمایند، وجود دارد. حقیقت این است که هر سه گزینه قابل قبول هستند و جوانب مثبت و منفی خود را دارند.

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

  • em : مقدار em 1 نسبت به font-size پدر مستقیم است. اغلب در media-querie ها استفاده می شود، em برای حساسیت عالی است، اما می تواند واقعا برای ردیابی نرخ مبادله emها به پیکسل برای هر المان (em 1.25 از em 1.4از px = ? 16) گیج کننده باشد.
  • rem : وابسته به نسبت font-size از المانمی باشد و مقیاس آن را برای تمام سرفصل ها و پاراگراف های صفحه آسان می نماید. با خروج ازبا fontsize پیش فرض و تنظیم هر مورد دیگری با rem یک رویکرد عاقلانه در دسترس است.
  • px : پیکسل مقیاس دقیق تر را به شما می دهد اما زمانی که در طرح های responsive استفاده می شود هیچ مقیاس سازی را ارائه نمی دهد. آنها قابل اعتماد و آسان به درک می باشند و در حال حاضر یک ارتباط بصری خوب میان مقدار و نتیجه واقعی (px15 نزدیک، شاید تنها یک یا دو پیکسل است).از آزمایش کردن نترسید، تمام آنها را امتحان کرده و بهترین موارد را بشناسید. گاهی اوقات emو rem قادر به انجام کارهای زیادی در هنگام ساخت صفحات responsive می باشند.

 

16. در پروژه های بزرگ از یک پیش پردازنده استفاده کنید

شما حتما دربارۀ Sass، Less، PostCSS، Stylus شنیده اید. پیش پردازنده گام بعدی در تکامل CSS است. آنها ویژگی هایی مانند variableها (متغیرها)، function ها (توابع) CSS، selector nesting (تخصیص انتخابی) و بسیاری از موارد دیگر را فراهم می کنند که باعث آسان شدن مدیریت کد CSS به ویژه در پروژه های بزرگ می شود.

به عنوان مثالی کوتاه، در اینجا یک قطعه از استفادۀ مستقیم متغیرها و توابع CSS در یک style sheet با Sass را مشاهده می نمایید:

$accent-color: #2196F3;

a {
    padding: 10px 15px;
    background-color: $accent-color;
}

a:hover {
    background-color: darken($accent-color,10%);
}

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

برای کسب اطلاعات بیشتر در مورد پیش پردازنده ها، از آموزش های ما در دو مورد محبوب ترین سیستم های Sass و Less استفاده کنید.

 

17. Autoprefixerها برای سازگاری بهتر

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

خوشبختانه، ابزارهایی وجود دارد که به صورت خودکار اینکار را برای شما انجام می دهند و حتی به شما اجازه می دهد تا پشتیبانی مرورگرهای مورد نیاز خود را انتخاب کنید:

 

18. استفاده از کدMinified در تولید

برای بهبود page load وب ها و برنامه ها باید همیشه از منابع minified استفاده کنید. نسخه minified کد شما تمام فضای خالی و تکرار را حذف خواهد کرد و حجم کلی فایل را کاهش می دهد. البته این فرایند همچنین style sheet ها را کاملا غیر قابل خواندن می کند بنابراین همیشه نسخه .min را برای تولید و نسخه معمولی برای توسعه را نگه می دارد.

راه های مختلفی برای جلوگیری از کد CSS وجود دارد:

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

 

19. Caniuse دوست شماست

مرورگرهای مختلف وب دارای تناقضات سازگاری زیادی می باشند. از caniuse يا سرويس مشابه استفاده کنيد تا موارد استفاده شما و در صورت نياز آن به prefixe ها و يا در زمانی که باعث ايجاد اشکال در يک پلت فرم را پشتیبانی می کند.

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

 

20. تأیید اعتبار

معتبر بودن CSS ممکن است به اندازه اعتبار دادن کد HTML یا جاوا اسکریپت مهم نباشد، اما اجرای کد از طریق CSS Linter بسیار مفید است. این کار اگر هر گونه اشتباهی را ساخته باشید به شما اطلاع می دهد و در مورد رفتارهای بدتان هشدار می دهد و راهنمایی های کلی را برای بهبود کد ارائه می دهد.

درست مثل minfiers و autoprefixers، بسیاری از validator های رایگان در دسترس وجود دارد:

گروه تحقیقات سافت اسکیل
گروه تحقیقات سافت اسکیل

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

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

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

لطفا چند لحظه منتظر بمانید ...