۲۰ تکنیک برای نوشتن کدهای CSS پیشرفته
20 تکنیک برای نوشتن کدهای CSS پیشرفته : در این مقاله، تکنیک هایی برای نوشتن پیشرفته CSS را آموزش می دهیم. مانند: استفاده از Flexbox، CSS reset، خاصیت border-box، خاصیت border-collapse، ایجاد انیمیشن css توسط transform، کدهای فشرده CSS (Minified)، استفاده از وب سایت Caniuse.com و غیره...

آموزش ۲۰ تکنیک برای نوشتن کدهای CSS مدرن

۲۰ Protips For Writing Modern-CSS

آموزش تکنیک‌های پیشرفته CSS

 

در این مقاله، قصد داریم ۲۰ تکنیک و تمرین مفید در زمینه نوشتن کدهای CSS پیشرفته را تحلیل و بررسی کنیم.

 

۱- مراقب margin های بالا و پایین باشید

اولویت مارجین با مقدار بیشتر:

هنگامیکه دو المان بصورت عمودی (vertical) در یک صفحه وب نمایش داده می شود، اگر المان بالایی دارای margin-bottom برابر ۴۰ پیکسل باشد و المان پایینی دارای margin-top:30px باشد، در ابتدا تصور می شود که مارجین نهایی بین این دو المان برابر ۷۰پیکسل شود، اما در عمل، margin بیشتر یعنی ۴۰ پیکسل بر دیگری غالب می شود.

»»» کد HTML

<div class="square red"></div>

<div class="square blue"></div>

»»» کد CSS

.square {

    width: 80px;

    height: 80px;

}

.red {

    background-color: #F44336;

    margin-bottom: 40px;

}

.blue {

    background-color: #2196F3;

    margin-top: 30px;

}

خروجی به شکل تصویر زیر خواهد بود:

 

margin های بالا و پایین بین دو المان

 

همانطور که مشاهده شد، در صورتی که از margin به شکل فوق استفاده شود، margin با مقدار بیشتر اعمال می شود و margin کمتر بی اثر خواهد شد. بنابراین بهتر است برای جلوگیری از این تداخل، در نوشتن کدهای css دقت کنید که از margin در یک جهت استفاده شود (مثلا فقط margin-bottom).

 

۲- استفاده از Flexbox در طراحی

دلایل استفاده از فلکس‌باکس در CSS:

خاصیت Flexbox به این دلیل تعریف شده است که دو خاصیت Float و inline-block را پیاده سازی کند. برای پیاده سازی المان هایی که بصورت افقی و با ارتفاع های مختلف در کنار هم قرار می گیرند، Flexbox گزینه مناسبی می باشد.

مجموعه ای از property هایی که Flexbox برای طراحان وب فراهم می کند باعث می شود کدهای ما قابلیت انعطاف و شخصی سازی بیشتری داشته باشد. اگر به استفاده از Flexbox ها عادت کنیم و المان های وب سایت مان را توسط این خاصیت پیاده سازی کنیم، بتدریج تسلط مان به Flexbox بیشتر خواهد شد. نمونه ای از کدهای css بصورت زیر است:

.container {

    display: flex;

    /* Don't forget to add prefixes for Safari */

    display: -webkit-flex;

}

برای تکمیل دانش خود در زمینه Flexbox به این مقاله رجوع شود.

 

۳- از CSS reset استفاده کنید

لزوم ریست کردن استایل‌های CSS:

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

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

برای اعمال css reset به تمام المان ها و مشاهده سایر تنظیمات، به وب سایت cssreset.com مراجعه کنید:

 

ز CSS reset استفاده کنید

 

تعریف کردن عدد صفر برای margin و padding و نیز عبارت box-sizing: border-box; بعنوان cssreset ساده و پیش فرض می تواند مفید باشد.

 

۴- تعریف border-box برای تمام المان ها:

اکثر طراحان مبتدی، از border-box استفاده نمی کنند و با آن آشنا نمی باشند. اما در حقیقت border-box خاصیت مهمی می باشد.

 

مقادیر خاصیت border-box:

دارای دو مقدار زیر می تواند باشد:

  • Content-box (پیش فرض): اگر border-box تعریف نشود، مقدار پیش فرض آن یعنی content-box برای آن اعمال می شود. هنگامیکه width و height برای یک باکس (مانند div) تعریف می شود، در واقع، طول و عرض محتوا و داخل باکس را تعریف کرده ایم. Border و padding جزء این مقدار نمی شود. بعنوان مثال، اگر طول (width) یک div را برابر ۱۰۰پیکسل در نظر بگیریم و border برابر ۱۰ پیکسل به آن بدهیم، طول واقعی این div برابر ۱۰۰+۲*۱۰=۱۲۰ خواهد بود (۱۰۰پیکسل طول محتوای div و ۱۰ پیکسل در سمت چپ و ۱۰پیکسل برای border راست در نظر گرفته می شود)
  • Border-Box: در این حالت، خاصیت های padding و border جزء width و height المان محسوب می شوند. بعنوان مثال، اگر width:100px و box-sizing: border-box تعریف شده باشند، دیگر مهم نیست padding و border این div چقدر باشد. طول div از ۱۰۰پیکسل بیشتر نخواهد شد.

 

بنابراین تعریف box-sizing: border-box برای تمام المان ها، می تواند کار طراحی المان های وب سایت را ساده تر کنند. زیرا دیگر نیاز نیست محاسبات ریاضی برای اندازه طول و عرض المان ها انجام دهیم.

 

۵- استفاده از تصاویر بعنوان بک گراند:

اگر می خواهید از تصاویر در صفحه وب خود استفاده کنید، بخصوص اگر می خواهید از این تصاویر بعنوان پس زمینه المان استفاده کنید، بهتر است بجای استفاده از تگ img از یک div با استایل background استفاده شود. در نگاه اول، ممکن است تعریف div بیهوده بنظر برسد اما در واقع، با استفاده از خواص background-image براحتی می توانید اندازه تصویر پس زمینه را (با حفظ اندازه اصلی تصویر) تغییر دهید. توسط خواص background-size و background-position و…


»»» کدهای 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>

»»» کد SCS

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;

}

تصویر زیر، نمایانگر تفاوت بین این دو روش (img و div) می باشد:

 

تفاوت بک گراند div و تگ img

 

۶- استفاده بهتر از border برای جداول:

 

سفارشی‌سازی جداول HTML:

جدول های پیش فرض HTML کاربرپسند و واکنش گرا نمی باشند و سفارشی سازی (customize) آنها نیز کار دشواری است. بعنوان مثال، اگر شما بخواهید یک border برای تمام جدول و سلول های آن تعریف کنید، در نهایت با شکل زیر مواجه خواهید شد:

 

TABLE 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-collapse:

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

 

TABLE BORDER

 

۷- نوشتن کامنت های بهتر برای کدهای css

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

ممکن است CSS یک زبان برنامه نویسی نباشد، اما با اینحال، نیاز است داکیومنت نویسی شود. این داکیومنت نویسی، باعث می شود تا کدهای CSS ای که شما نوشته اید، برای همکارانتان و یا حتی خودتان در آینده خواناتر و واضح تر باشند.

برای بخش های اصلی وب سایت (مانند فوتر، هدر و یا اسلایدشو) بهتر است کامنتی با عنوان آن بخش نوشته شود. کد CSS زیر را در نظر بگیرید:

/*—————
    #Header
—————*/
header { }

header nav { }

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

 

جزئیاتی که در هر بخش وجود دارند (مانند دکمه ای در فوتر) را می توان با یک خط کامنت، داکیومنت نویسی کنیم. کد CSS زیر را در نظر بگیرید:

/*   Footer Buttons   */
.footer button { }

.footer button:hover { }

نکته: دقت کنید که CSS از کامنت تک خطی پشتیبانی نمی کند، بنابراین شما مجبورید در مواردی که می خواهید کامنت تک خطی تعریف کنید، از همان ساختار /* */ استفاده کنید. کد CSS زیر را در نظر بگیرید:

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

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

 

۸-  استفاده از خط فاصله در کلاس‌های چندکلمه‌ای (kebab-case)

تعریف نام کلاس و آیدی های CSS بصورت Kebab-case:

نام کلاس و id المان های وب سایت در صورتی که دو یا چندکلمه ای هستند، بهتر است بصورت kebab-case تعریف شوند. تعریف بصورت camelCase نمی تواند منطقی باشد زیرا css زبانی است که حساس به حروف بزرگ و کوچک نیست (case-insensitive) بنابراین معنی ندارد نام کلاس یا id المان را مثلا بصورت footerLeftColumn تعریف کنیم. و همچنین استفاده از underline  در کلاس های چندبخشی، جالب نیست. زیرا تا چند سال پیش، underline پشتیبانی نمی شد (مثلا کلاس footer_Column غیرمجاز بود) پس بهتر است نام های کلاس و id های المان ها بصورت kebab-case تعریف شوند:

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

/*  Don't  */
.footerColumnLeft { }

.footer_column_left { }

۹- از تکرار استایل‌های CSS بپرهیزید

ارث‌بری المان فرزند از استایل های والد:

المان های HTML ، استایل های خود را از parent خود می گیرند. بنابراین اگر در level بالاتر، بعنوان مثال اندازه فونت را تعریف کرده اید، دیگر نیازی نیست استایل font-size را برای فرزند آن تعریف کنید. پیشنهاد می شود استایل هایی مانند font-size و font-family و… را بصورت کلی (general) در بالای فایل css وب سایت تان و در زیر css reset تعریف کنید:

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


بنابراین توصیه ما اینست که تا جایی که ممکن است از خاصیت ارث بری css استفاده کنید و از تکرار کدهای css خودداری کنید.

 

۱۰- ایجاد انیمیشن css توسط transform

لزوم تعریف transform:

نباید برای ایجاد انیمیشن های css اندازه width و height و یا left و right و… را تغییر دهید. بلکه برای داشتن یک انیمیشن نرم و smooth بهتر است از transform() استفاده شود.

بعنوان مثال، می خواهیم یک توپ (ball) را با انیمیشن css از سمت چپ به راست ببریم. بجای اینکه خاصیت left را تغییر دهیم، بهتر است برای داشتن یک انیمیشن نرم و smooth از translateX استفاده کنیم. کد css زیر را خواهیم داشت:

.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 و… و توسط تمام مرورگرهای موجود نیز پشتیبانی می شود و استفاده از آن رایگان می باشد!

 

۱۱- خودتان انجام ندهید، از یک Library استفاده کنید

لزوم استفاده از کدهای آماده:

تعداد اعضای جامعه css کارها بسیار زیاد است و بطور مداوم، کتابخانه ها و تکنولوژی های css در حال پیشرفت می باشند که اکثر آنها کد-باز (open-source) می باشند. دفعه بعدی که با یک مشکل و چالش در زمینه css روبرو شدید، بجای اینکه وقت خود را هدر دهید و مساله را حل کنید، ابتدا در تالارهای گفتگو و بلاگ های دو وب سایت github و codepen سرچ کنید.

 

۱۲- به اولویت سلکتورها دقت کنید

اولویت سلکتور آیدی نسبت به کلاس:

یک طراح آماتور وب سایت، گمان می کند کلاس هایی که برای هر سلکتور می نویسد، استایل های بالای آن را overwrite می کند. در حالیکه اینگونه نیست. بعنوان مثال به کدهای html زیر دقت کنید:

<a href='#' id='blue-btn' class="active">Active Button </a>

و استایل های زیر را برای آن در نظر بگیرید:

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

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

a.active {
    background-color: red;
}

در این مثال قصد ما اینست که لینک هایی که کلاس active را دارند، دارای بک گراند قرمز شوند. درحالیکه در عمل، خروجی این دکمه اینگونه نیست. سلکتورهایی که با آیدی (id) المان تعریف می شوند، اولویت بالاتری دارند. بنابراین استایل a#blue-btn یعنی رنگ پس زمینه آبی در خروجی نمایش داده می شود و a.active بی اثر است.

اولویت سلکتورها در css بصورت زیر می باشد:

ID (#id) > Class (.class) > Type (e.g. header)

سلکتور a#myBtn.active از سلکتور a#myBtn اولویت بالاتری دارد. پس هر چقدر سلکتورها بصورت جزئی تر تعریف شوند، اولویت بالاتری خواهند داشت.

 

۱۳- از !important استفاده نکنید:

همانطور که می دانید توسط !important می توانید استایل های قبلی را overwrite کنید. بهتر است از این قابلیت در css کمتر استفاده شود. بجای اینکار، دنبال مشکل بگردید و آنرا برطرف سازید. تنها جایی که استفاده از !important منطقی می باشد و راه دیگری ندارد، برای overwrite کردن استایل های inline می باشد. که البته نوشتن کدهای css بصورت inline نیز کار درستی نیست و باید جلوگیری شود.

 

۱۴- استفاده بجا از Caps Lock (حروف بزرگ-uppercase)

حروف بزرگ در متن HTML:

در HTML هنگامیکه می خواهید بر روی کلمه ای تاکید کنید، از حروف بزرگ (Upper-Case) استفاده کنید. به مثال زیر دقت کنید:

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

اگر بنا به دلیلی می خواهید تمام حروف یک کلمه و یا عبارت با حروف بزرگ نمایش داده شوند، توصیه می شود در html آن متن را با حروف کوچک بنویسید و در نهایت توسط استایل css عبارت موردنظر را Uppercase کنید. بعنوان مثال:

»»» کد html

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

»»» کد css

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

 

۱۵- استفاده از Em و Rem و Pixel:

بحث های زیادی در زمینه استفاده و یا عدم استفاده از واحدهای em و rem و pixel برای المان ها و متون وب در css وجود دارد. در واقع، هریک از این واحدها، مزایا و نقایص خود را دارند. توسعه دهندگان وب و پروژه های تحت وب تنوع زیادی دارند. بنابراین هیچ اجباری در استفاده از هیچیک از این واحدها وجود ندارد. اما با اینحال، در این بخش، موارد استفاده هر واحد را بررسی می کنیم.

 

درباره واحدهای em و rem و pixel:

۱- واحد em: مقدار واحد em به مقدار اندازه فونت (font-size) والد مستقیم آن المان بستگی دارد. غالبا در مدیا-کوئری (media-query) کاربرد دارند و در ایجاد طراحی های ریسپانسیو مفید می باشند. اما گاهی پیش می آید که محاسبه em و تبدیل آن به px گیج کننده می شود.

۲- واحد rem: به مقدار font-size المان html بستگی دارد. استفاده از واحد rem کار را برای مقیاس و scale تیترهای صفحات وب و پاراگراف ها راحت تر می کند.

۳- واحد px: واحد پیکسل (px) بالاترین دقت را پیشنهاد می دهد اما در طراحی های واکنش گرا هیچ تغییر اندازه ای در آن رخ نمی دهد. بعنوان مثال اگر تگ های h2 در اندازه دسکتاپ دارای font-size:28px باشند، در دستگاه های موبایل نیز همان ۲۸px باقی می ماند و مسلما این اندازه در اندازه موبایل بسیار بزرگ و زمخت می باشد. از مزایای واحد pixel می توان به این موارد اشاره کرد: قابل اعتماد بودن، قابل فهم بودن، ارتباط بصری خوب بین واحد px و نتیجه خروجی صفحه وب و…

 

شما بعنوان طراح وب، سعی کنید از تمام سه واحد فوق استفاده کنید و نتیجه آنها را بصورت عملی در خروجی مشاهده کنید. واحدهای rem و em در طراحی های responsive می توانند بسیار مفید باشند و باعث شوند استایل های کمتری نوشته شود.

 

۱۶- استفاده از پیش‌پردازنده (PreProcessor) در پروژه های بزرگ

لزو م استفاده از SASS و LESS:

احتمالا تابحال اسامی Less و Sass و PostCSS و Stylus را شنیده اید. این پیش پردازنده ها انقلابی در نوشتن کدهای css به پا کرده اند. آنها امکانات و ویژگی هایی نظیر: تعریف متغیر در css، ایجاد تابع (function)، تو در تو نویسی استایل ها (nested styles) و بسیاری دیگر را دارند. بنابراین، نوشتن کدهای css و مدیریت آنها توسط Preprocessor ها بویژه در پروژه های بزرگ، ساده تر می باشد.

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

$accent-color: #2196F3;

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

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

موردی که در استفاده از پیش پردازنده ها مانند Sass و Less وجود دارد اینست که باید مثال کدهای sass را قبل از استفاده در پروژه خود، به کدهای css تبدیل کنید. زیرا مرورگرها نمی توانند کدهای sass و یا less را تفسیر کنند.

برای دریافت دانش بیشتر در زمینه زبان Less به آموزش Less مراجعه کنید.

برای دریافت دانش بیشتر در زمینه زبان Sass به آموزش Sass مراجعه کنید.

 

۱۷- استفاده از Autoprefixer برای پشتیبانی از مرورگرهای مختلف:

نوشتن کدهای css برای مرورگرهای مختلف (مانند chrome,ie,Mozilla,safari) می تواند خسته کننده و گاهی آزاردهنده باشد! بعنوان مثال استایل display: flex دارای دو prefix دیگر بصورت زیر می باشد:

display: -webkit-box; display: -ms-flexbox;

 

استفاده از Autoprefixer برای پشتیبانی از مرورگرهای مختلف

 

تعریف پیشوند تمام مرورگرها در استایل ها:

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

 

۱۸- استفاده از کدهای فشرده CSS (Minified) در پروژه نهایی

لزوم فشرده‌سازی کدهای css:

به منظور افزایش سرعت لود صفحات وب، باید از منابع فشرده شده (minified resources) استفاده شود. فایلی که توسط ابزارهای فشرده سازی minify می شوند، تمام فاصله ها و فضاهای خالی (whitespaces) در آنها حذف شده است. بنابراین در نهایت فایل خروجی حجم کمتری خواهد داشت. هنگامیکه یک فایل css را فشرده می کنید، بدلیل حذف فاصله های خالی بین استایل ها، خوانا نمی باشد و نمی توان آنرا توسعه داد. پس بهتر است قبل از فشرده سازی (minifying) یک کپی از فایل غیرفشرده را نگه دارید تا بعدا در صورت لزوم بتوانید کدهای css خود را ویرایش کنید. اما فایلی را که در پروژه خود استفاده می کنید آن فایل فشرده باشد (مانند sample.min.css)

راه های فشرده سازی فایل های css:

راه های گوناگونی برای فشرده سازی فایل های css وجود دارد:

 

با توجه به پلتفرم پروژه شما، می توانید از هر یک از این سه روش برای فشرده کردن کدهای CSS اقدام کنید.

 

۱۹- استفاده از وب سایت Caniuse.com

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

مرورگرهای وب کماکان تناقضات زیادی در تطابق باهم دارند. اگر از وب سایت caniuse.com استفاده کنید، متوجه می شوید که فلان استایل و یا اسکریپت در کدام مرورگر پشتیبانی می شود و کدام یک از نسخه های این مرورگرها از ویژگی موردنظر ما پشتیبانی می کند.

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

 

۲۰- اعتبارسنجی (Validate)

اهمیت اعتبارسنجی استایل های سی-اس-اس:

اعتبارسنجی کدهای css به اندازه اعتبارسنجی کدهای html و javascript دارای اهمیت نمی باشد. اما استفاده از یک ابزار اعتبارسنجی کدهای css می تواند مفید باشد. اگر جایی در استایل های css شما خطایی وجود داشته باشد، متوجه خواهید شد و با توصیه هایی که این ابزارها به شما می دهند، می توانید کدهای css خود را بهبود ببخشید.

ابزارهای اعتبارسنجی کدهای css:

دقیقا مانند Autoprefixer و Minifier ، در این بخش نیز برای اعتبارسنجی کدهای css ابزاری وجود دارند:

 

منبع: https://tutorialzine.com/2016/08/20-protips-for-writing-modern-css


برچسب‌ها:

آموزش cssآموزش پیشرفته cssتعریف transformتکنیک cssخاصیت BORDER-BOXخاصیت border-collapseدرباره css resetطراحی flexbox


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

19 + 10 =