۲۰ ترفند حرفه‌ای جهت نوشتن CSS مدرن

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

 

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

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

CSS

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

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

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

HTML

<div class=”square red”></div>
<div class=”square blue”></div>

 

به جای فاصله ۷۰px بین مربع قرمز و آبی تنها ۴۰px وجود دارد، 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;
}

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

 ۳.     انجام 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ها در بالای آن قرار دارند. به عنوان مثال. یک <div> دارای width 100 و padding 10 است و المان ما ۱۲۰ پیکسل (۱۰۰ + ۲ * ۱۰) را می گیرد.
• border-box:   در عرض / ارتفاع  padding و border  گنجانده شده است. یک <div> با ;width: 100px و ;box-sizing: border-box بدون در نظر گرفتن paddingها یا borderها ۱۰۰ پیکسل گسترده تر می شوند.

تنظیم border-box به تمام المان ها، باعث آسانی استایل می شود.

 

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

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

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

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;
}

HTML

<section>
<p>Img element</p>
<img src=”https://tutorialzine.com/media/2016/08/bicycle.jpg” alt=”bicycle”>
</section>

<section>
<p>Div with background image</p>
<div></div>
</section>

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

 

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

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

HTML

<table>
<thead>
<tr>
<th >Title</th>
<th >Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href=”https://tutorialzine.com/2016/07/take-a-selfie-with-js/” target=”_blank”>Take a Selfie With JavaScript</a></td>
<td>A quick tutorial that covers a pure-JavaScript way to take photos directly in the browser using various native APIs and interesting JS techniques.</td>
</tr>
<tr>
<td><a href=”https://tutorialzine.com/2016/08/20-awesome-php-libraries-for-summer-2016/” target=”_blank”>20 Awesome PHP Libraries</a></td>
<td>A handcrafted collection of 20 open-source libraries containing some of the most useful and top-quality PHP resources.</td>
</tr>
</tbody>
</table>

CSS

table {
width: 600px;
border: 1px solid #505050;
margin-bottom: 15px;
color:#505050;
}

td{
border: 1px solid #505050;
padding: 10px;
}

نتیجه زیر را تولید می کند:

 

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

HTML

<table>
<thead>
<tr>
<th >Title</th>
<th >Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href=”https://tutorialzine.com/2016/07/take-a-selfie-with-js/” target=”_blank”>Take a Selfie With JavaScript</a></td>
<td>A quick tutorial that covers a pure-JavaScript way to take photos directly in the browser using various native APIs and interesting JS techniques.</td>
</tr>
<tr>
<td><a href=”https://tutorialzine.com/2016/08/20-awesome-php-libraries-for-summer-2016/” target=”_blank”>20 Awesome PHP Libraries</a></td>
<td>A handcrafted collection of 20 open-source libraries containing some of the most useful and top-quality PHP resources.</td>
</tr>
</tbody>
</table>

CSS

table {
width: 600px;
border: 1px solid #505050;
margin-bottom: 15px;
color: #505050;
border-collapse: collapse;
}

td{
border: 1px solid #505050;
padding: 10px;
}

نتیجه زیر را تولید می کند:

 

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 نظر تک خط // ندارد، بنابراین هنگام نظر دادن چیزی لازم است که از دستور نگارش / / استفاده کنید.

/*  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> یا <body> افزوده می شوند و به آنها اجازه جاری شدن را می دهیم. در اینجا چند پیش فرض خوب وجود دارد:

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

<a href=’#’ id=’blue-btn’ class=”active”>Active Button </a>

CSS

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

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

a.active {
background-color: red;
}

می خواهیم قادر به افزودن کلاس active. به هر دکمه و قرمز شدن آن باشیم. این کار در اینجا کار نمی کند زیرا دکمه ما دارای 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، حروف بزرگ را زمانی که می خواهید معنای متداول مورد نظر خود داشته باشید،استفاده کنید، مانند زمانی است که می خواهید اهمیت یک کلمه را تاکید کنید.

<h3>Employees MUST wear a helmet!</h3>

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

 

<div class="movie-poster">Star Wars: The Force Awakens</div>

.movie-poster {
    text-transform: uppercase;
}

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

 

15. Em، Remو Pixel

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

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

• em : مقدار em 1 نسبت به font-size پدر مستقیم است. اغلب در media-querie ها استفاده می شود، em برای حساسیت عالی است، اما می تواند واقعا برای ردیابی نرخ مبادله emها به پیکسل برای هر المان (em 25 از em 1.4از px = ? 16) گیج کننده باشد.

·  rem :  وابسته به نسبت font-size از المان <HTML> می باشد و مقیاس آن را برای تمام سرفصل ها و پاراگراف های صفحه آسان می نماید. با خروج از  <HTML> با 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 است. آنها سازگار نیستند و شما هرگز نمی دانید  که به کدامیک از آن ها نیاز دارید، حتی اگر روند واقعی قرار دادن آنها را در استایل را بدانید باز هم یک کابوس خسته کننده محسوب می شود.

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

• Autoprefixer : ابزارهای آنلاین
• Sublime Text، Atom : پلاگین ویرایشگر متن
• (Autoprefixer (PostCSS : کتابخانه ها

 

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

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

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

• ابزارهای آنلاین – (CSS Minifier (API included ، CSS Compressor
• پلاگین های ویرایشگر متن:  Sublime Text،  Atom
• کتابخانه ها:  Minfiy (PHP)،  CSSO و (CSSNano (PostCSS, Grunt, Gulp

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

 

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

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

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

 

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

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

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

• ابزارهای آنلاین: W3 Validator،  CSS Lint
• پلاگین ویرایشگر متن: Sublime Text، Atom
• کتابخانه ها: (stylelint (Node.js, PostCSS)،  css-validator(Node.js

 

لطفا از دیگر موارد نیز دیدن نمایید:

• آشنایی با خطای ۴۰۴ و نحوه طراحی صحیح آن برای سایت!
• تکه کد های کاربردی وردپرس
• فایل functions.php چیست و در کجا قرار دارد؟