آموزش مقدماتی HTML و CSS (جلسه ۲۳: نوشتن بهترین کد ممکن)
1398/04/04 09:29 , میلاد صاحب نظر

آموزش مقدماتی HTML و CSS (جلسه ۲۳: نوشتن بهترین کد ممکن)

برای اینکه بتوانید به زبان HTML و CSS کد بزنید، باید خیلی چیزها را یاد بگیرید (عنصرهای مختلف، اتریبیوت‌ها، ویژگی‌ها، مقادیر و غیره).

تمام جلساتی که تا الآن پشت سر گذاشتید یک هدف اصلی و مشترک داشتند: اینکه این اجزای مختلف HTML و CSS را توضیح دهند، با این امید که به شما کمک کنند اساس و اصول اولیه هر دو زبان را بیاموزید.

این جلسه یک قدم به عقب برمی‌گردد و افق دید مختصر‌تری از HTML و CSS دارد.

منظور اینکه، این جلسه بر تمرین‌ برای نوشتن بهترین کد ممکن برای HTML و CSS تمرکز دارد. این تمرین‌های کد نویسی به عنوان یک چارچوب کلی برای نوشتن با زبان‌های HTML و CSS عمل می‌کند.

نکاتی که در این جلسه بیان خواهند شد برای تمام جلساتی که تا الآن گفته شد صدق می‌کنند و باید همیشه آن‌ها را به خاطر بسپارید.

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

برای مثال، استفاده از کامنت‌ها برای منظم کردن کد (که در این جلسه به آن خواهیم پرداخت) در تمام زبان‌های برنامه‌نویسی یک امر مفید است.

پس افق دیدتان را گسترش دهید و ببینید چگونه می‌توانید به بهترین شکل از هر عمل بهره ببرید. با ما همراه باشید!

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد 
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

اعمال کد نویسی در HTML

بسیاری از بهترین اعمال کد نویسی بر تمیز و مرتب نگه داشتن کدها تأکید دارند. این اعمال در HTML نیز همین‌طور هستند و تفاوتی ندارند. هدف این است که کدها و نشانه‌های دارای ساختار مناسب و استاندارد بنویسیم.

دستورالعمل‌های توضیح داده شده در این جلسه یک مقدمه خیلی مختصر راجع به اعمال کد نویسی در HTML فراهم می‌کنند.

این لیست به هیچ عنوان یک لیست تکراری و خسته کننده نیست.

نوشتن نشانه‌های استاندارد و سازگار

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

علاوه بر این، کد بی‌نوا یک کد غیر قابل پیش‌بینی است و شما نمی‌توانید مطمئن باشید که وقتی رندر می‌شود، چه اتفاقی می‌افتد.

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

کدی که در زیر مشاهده می‌کنید دارای چند ارور است، به خصوص استفاده از اتریبیوت ID با مقدار intro که چندین بار به کار رفته است، در حالی که این مقدار باید یکتا باشد، بستن عنصرهای <p> و <strong> در ترتیب اشتباه درون اولین پاراگراف و نبستن عنصر <p> در دومین پاراگراف.

کد بد

<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.

کد خوب

<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
استفاده از عنصرهای معنایی

کتابخانه عنصرها در HTML بسیار بزرگ است، که دارای بیش از 100 عنصر برای استفاده است. تصمیم‌گیری اینکه از کدام عنصرها باید برای توضیح محتوای مختلف استفاده کنیم، ممکن است مشکل باشد، اما این عنصرها ستون فقرات معناها هستند.

باید تحقیق کنیم و بارها کدمان را بررسی کنیم تا مطمئن شویم که از عنصرهای معنایی مناسبی استفاده می‌کنیم. کاربران در بلند مدت به خاطر ساخت یک وبسایت کاربر پسند و در دسترس از ما ممنون خواهند شد و همچنین استایل‌بندی کد HTML شما نیز به شدت آسان‌تر خواهد شد.

اگر زمانی از کدتان مطمئن نبودید، یک دوست پیدا کنید تا به شما کمک کند و به صورت روتین و منظم کد خود را بررسی کنید.

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

کد بد

<span class="heading"><strong>Welcome Back</span></strong>
<br><br>
It has been a while. What have you been up to lately?
<br><br>

کد خوب

<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
از ساختار متنی مناسب استفاده کنید

همان‌طور که قبلاً گفته شد، HTML یک زبان بخشنده است و در نتیجه، صفحات بدون استفاده از doctype یا نوع متن <! DOCTYPE html> یا عنصرهای <head>، <html> و <body> رندر می‌شوند.

بدون یک doctype و این عنصرهای ساختاری، صفحات به صورت مناسب در هر مرورگر رندر نمی‌شوند.

همیشه باید اطمینان حاصل کنیم که از ساختار متنی مناسب (به خصوص doctype یا نوع صفحه <! DOCTYPE html> یا عنصرهای <head>، <html> و <body>) استفاده می‌کنیم.

این امر باعث می‌شود صفحات ما استاندارد و سازگار بوده و از لحاظ معنایی کاملاً صحیح باشند و در نتیجه این امر تضمین می‌کند که صفحات همان‌طور که ما انتظار داریم خوب رندر شوند.

کد بد

<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>

کد خوب

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>
Syntax را مرتب نگه دارید

همین‌طور که صفحات رشد می‌کنند، مدیریت HTML نیز ممکن است به مرور مشکل‌تر شود. خوشبختانه چند قانون کوتاه و سریع وجود دارند که می‌توانند به شما کمک کنند syntax را تمیز و مرتب نگه دارید. این قوانین به شرح زیر هستند:

  • استفاده از حروف کوچک در داخل اسامی عنصرها، اتریبیوت‌ها و مقادیر.

  • عنصرهای تودرتو باید نسبت به کد اصلی دارای تو رفتگی باشند.

  • ترجیحاً از دبل کوتیشن استفاده کنید، نه تک کوتیشن یا کاملاً کوتیشن‌ها را حذف کنید.

  • Forward slash (/) را در انتهای عنصرهای مستقل حذف کنید و قرار ندهید.

  • مقادیر درون اتریبیوت‌های Boolean را حذف کنید.

رعایت این قوانین کمک می‌کند تا کدمان را خوانا و ساده نگه داریم. به دو مجموعه کد HTML در زیر دقت کنید، هضم و درک کد خوب آسان‌تر است.

کد بد

<Aside>
<h3>Chicago</h3>
<H5 HIDDEN='HIDDEN'>City in Illinois</H5>
<img src=chicago.jpg alt="Chicago, the third most populous city in the United States" />
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</ASIDE>

کد خوب

<aside>
  <h3>Chicago</h3>
  <h5 hidden>City in Illinois</h5>
  <img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
  <ul>
    <li>234 square miles</li>
    <li>2.715 million residents</li>
  </ul>
</aside>
استفاده از مقادیر ID و class کاربردی و مناسب

ایجاد مقادیر ID و class ممکن است یکی از مشکل‌ترین بخش‌های نوشتن با کد HTML باشد. این مقادیر باید کاربردی بوده و مرتبط با خود محتوا باشند، نه استایل محتوا. استفاده از یک مقدار red برای توضیح متن قرمز روش ایده آلی نیست، چون ظاهر محتوا را توصیف می‌کند.

حالا اگر زمانی لازم شد استایل متن به رنگ آبی تغییر پیدا کند، نه تنها کد CSS باید تغییر کند، بلکه همچنین کد HTML در هر قطعه کدی که دارای کلاس با مقدار Red هست نیز باید تغییر کند.

کد HTML در اینجا فرض می‌کند که پیغام هشدار قرمز رنگ خواهد بود. به هر حال، اگر لازم شد استایل هشدار به رنگ نارنجی تغییر کند، نام کلاس که red هست دیگر منطقی نیست و باعث گیج شدن شما خواهد شد.

کد بد

<p class="red">Error! Please try again.</p>

کد خوب

<p class="alert">Error! Please try again.</p>
استفاده از اتریبیوت متن جایگزین برای تصاویر

تصاویر باید همیشه دارای اتریبیوت alt باشند. Screen readerها و دیگر نرم‌افزارهای دسترس‌پذیری برای فراهم کردن محتوا برای تصاویر به اتریبیوت alt وابسته هستند.

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

علاوه بر این،  اگر یک تصویر دارای مقدار معناداری نباشد (برای مثال شاید بخشی از واسط کاربری باشد)، در صورت امکان باید به عنوان یک تصویر پشت زمینه CSS درج شود، نه به عنوان یک عنصر <img>.

کد بد

<img src="puppy.jpg">

کد خوب

<img src="puppy.jpg" alt="A beautiful, two-year-old hound mix puppy">
محتوا را از استایل مجزا کنید

هیچ‌وقت و هرگز از استایل‌های inline درون HTML استفاده نکنید. این کار باعث ایجاد صفحاتی می‌شود که بارگذاری آن‌ها زمان بیشتری طول می‌کشد، رسیدگی به آن‌ها خیلی مشکل است و برای طراحان و توسعه‌دهندگان یک دردسر بزرگ به حساب می‌آیند.

در عوض، از صفحات استایل خارجی استفاده کنید، از کلاس‌ها برای هدف قرار دادن عنصرها استفاده کنید و در صورت نیاز استایل‌ها را اعمال کنید.

در اینجا، هر تغییر مطلوبی در استایل‌های داخل کد بد، باید در کد HTML انجام شود. در نتیجه، این استایل‌ها دوباره قابل استفاده نخواهند بود و ثبات استایل‌ها دچار مشکل خواهد شد.

کد بد

<p style="color: #393; font-size: 24px;">Thank you!</p>

کد خوب

<p class="alert-success">Thank you!</p>
بیش از حد از عنصر <div> استفاده نکنید

وقتی با HTML کد می‌نویسید، حس خیلی خوبی دارد که هر جا به استایل نیاز پیدا کردید خیلی راحت یک عنصر <div> اضافه کنید و استایل مورد نظرتان را اعمال کنید.

اگرچه این روش به خوبی عمل می‌کند، اما اضافه کردن بیش از حد این عنصر به یک صفحه باعث به وجود آمدن bloat یا نفخ در صفحه می‌شود و چیزی طول نخواهد کشید که دیگر فراموش می‌کنید که کدام عنصر <div> چه استایلی پیاده‌سازی می‌کرد.

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

کد بد

<div class="container">
  <div class="article">
    <div class="headline">Headlines Across the World</div>
  </div>
</div>

کد خوب

<div class="container">
  <article>
    <h1>Headlines Across the World</h1>
  </article>
</div>
مدام کدتان را بازنگری و اصلاح کنید

وبسایت‌ها و کدها به مرور زمان گسترش یافته و رشد می‌کنند و در نتیجه اضافات بی‌فایده زیادی از خود به جا می‌گذارند. فراموش نکنید که در زمان ویرایش یک صفحه، کد و استایل‌های قدیمی را در صورت نیاز حذف کنید.

همچنین وقت بگذارید و کدتان را بعد از اینکه نوشتید، ارزیابی و بازنگری کنید، به دنبال روش‌هایی برای بهبود آن باشید و کدتان را بیشتر قابل مدیریت و اصلاح کنید.

اعمال کد نویسی CSS

درست مشابه اعمال و قوانینی که برای HTML وجود داشتند، اعمال کد نویسی برای CSS نیز بر تمیز و مرتب بودن کدها تأکید دارند. CSS همچنین دارای چند اصل اضافه‌تر نیز هست که مرتبط با چگونگی کار با ریزه کاری‌های این زبان است.

کدتان را با استفاده از کامنت‌ها سازماندهی کنید

فایل‌های CSS به مرور بسیار گسترده خواهند شد و صدها خط ایجاد می‌کنند. این فایل‌های بزرگ باعث می‌شوند یافتن و ویرایش استایل‌ها تقریباً غیر ممکن باشد. بیایید استایل‌هایمان را در گروه‌های منطقی سازماندهی کنیم.

سپس، قبل از هر گروه، اجازه دهید یک کامنت ایجاد کنیم که بیان کند استایل‌های پس از آن چه کاری انجام می‌دهند.

اگر بخواهیم، می‌توانیم همچنین از کامنت‌ها برای ساختن جدولی از محتوا در بالا فایلمان استفاده کنیم. این کار به ما (و دیگران) یادآوری می‌کند که درون فایل دقیقاً چه کدهایی نوشته شده‌اند و استایل‌ها در کجای کد قرار گرفته‌اند.

کد بد

header { ... }
article { ... }
.btn { ... }

کد خوب

/* Primary header */
header { ... }

/* Featured article */
article { ... }

/* Buttons */
.btn { ... }
نوشتن کد CSS با استفاده از چند خط و space

وقتی با CSS کد می‌نویسید، قرار دادن هر selector و تعریف در یک خط جدید بسیار حائز اهمیت است. سپس، درون هر selector باید تعاریف را با یک تو رفتگی بنویسیم.

بعد از یک Selector و قبل از اولین تعریف، یک آکولاد باز ({) قرار می‌گیرد که باید قبل از آن یک Space بزنیم. درون یک تعریف، باید بعد از دو نقطه (:) یک space بزنیم و سپس ویژگی را بنویسیم  حتماً هر تعریف را با یک سمی کالن پایان دهیم.

انجام این کار باعث می‌شود خوانایی و همچنین ویرایش کد آسان‌تر شود. وقتی همه کد در یک خط بدون وجود Space یا فاصله جمع شود، اسکن کردن و اعمال تغییرات مشکل خواهد شد.

کد بد

a,.btn{background:#aaa;color:#f60;font-size:18px;padding:6px;}

کد خوب

a,
.btn {
  background: #aaa;
  color: #f60;
  font-size: 18px;
  padding: 6px;
}
کامنت‌ها و فاصله‌گذاری

این دو توصیه (یعنی سازماندهی کد با کامنت‌ها و استفاده از چند خط و space) فقط برای CSS کاربرد ندارند، بلکه همچنین برای HTML یا هر زبان دیگری نیز کاربرد دارند. در کل باید کدمان را مرتب نگه داریم و به خوبی سازماندهی کنیم.

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

این کار به افراد دیگری که با همین کد کار خواهند کرد کمک می‌کند، همچنین وقتی خودمان هم می‌خواهیم کدمان را در انتهای کار بازنگری کنیم، بسیار از این کارمان خرسند خواهیم شد.

از اسامی class مناسب استفاده کنید

اسامی (یا مقادیر) کلاس باید ماژولار باشند و همچنین باید تا جای ممکن به محتوای داخل یک عنصر مرتبط باشند، نه ظاهر آن. این مقادیر باید به روشی نوشته شوند که مشابه syntax زبان CSS باشند.

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

کد بد

.Red_Box { ... }

کد خوب

.alert-message { ... }
Selectorهای کارآمد بسازید

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

هر چه یک selector طولانی‌تر باشد و هر چه شامل پیش توصیف‌کننده‌های بیشتری باشد، حساسیت بیشتری خواهد داشت. و هر چه حساسیت بیشتر باشد، احتمال اینکه یک selector جریان یا Cascade را در CSS بشکند و باعث بروز مشکلات نامطلوب شود نیز بیشتر خواهد شد.

همچنین در عین حال که حساسیت selectorهایمان را تا جای ممکن کم نگه می‌داریم، بیایید درون selectorها از IDها استفاده نکنیم. IDها در کل خیلی دقیق و خاص هستند و سریعاً حساسیت یک Selector را افزایش می‌دهند و بسیاری اوقات جریان یا cascade داخل فایل‌های CSS را می‌شکنند.

نکات منفی IDها از نکات مثبتشان خیلی بیشتر است و عاقلانه است که از آن‌ها پرهیز کنید.

بیایید از selectorهای کوتاه‌تر و سرراست‌تر استفاده کنیم، فقط دو یا سه مرحله آن‌ها را به صورت تو در تو بنویسیم و تا جای ممکن هر چند تا selector بیش از حد توصیفی موقعیت محور که می‌توانیم را حذف کنیم.

کد بد

#aside #featured ul.news li a { ... }
#aside #featured ul.news li a em.special { ... }

کد خوب

.news a { ... }
.news .special { ... }
هر وقت لازم شد از کلاس‌های خاص استفاده کنید

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

اگرچه اعمال یک کلاس برای عنصر هدف ممکن است درون HTML کدهای بیشتری ایجاد کند، اما همچنین باعث می‌شود کد سریع‌تر رندر شود و همه موانع مدیریتی را حذف خواهد کرد.

برای مثال، اگر یک عنصر <em> به صورت تو در تو درون یک عنصر <h1> در داخل یک عنصر <aside> نوشته شود و همه آن درون یک عنصر <section> به صورت تو در تو نوشته شده باشد، آن‌گاه Selector ممکن است کدی مانند aside h1 em داشته باشد.

اگر زمانی لازم شد عنصر <em> از عنصر <h1> جا به جا شود، استایل‌ها دیگر اعمال نخواهند شد. یک selector بهتر و انعطاف‌پذیرتر از یک کلاس (مانند text-offset) برای هدف قرار دادن عنصر <em> استفاده می‌کند.

کد بد

section aside h1 em { ... }

کد خوب

.text-offset { ... }
از ویژگی‌ها و مقادیر shorthand استفاده کنید

یکی از ویژگی‌های CSS قابلیت استفاده از ویژگی‌ها و مقادیر shorthand است. اکثر ویژگی‌ها و مقادیر دارای جایگزین‌های shorthand (مختصر) قابل‌قبول نیز می‌باشند.

به عنوان مثال، به جای استفاده از چهار ویژگی margin محور مختلف و تعاریف مقداری برای تنظیم حاشیه‌ها در اطراف هر چهار سمت یک عنصر، می‌توانید از یک ویژگی margin  و تعریف مقدار استفاده کنید که مقادیر را برای هر چهار سمت در آن واحد مشخص می‌کند.

استفاده از جایگزین shorthand به ما اجازه می‌دهد خیلی سریع استایل‌ها را مشخص و شناسایی کنیم.

البته وقتی فقط یک مقدار تنظیم می‌کنیم، جایگزین‌های shorthand نباید مورد استفاده قرار بگیرند. اگر یک جعبه فقط به یک margin پایین نیاز داشته باشد، فقط از ویژگی margin-bottom استفاده می‌شود.

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

کد بد

img {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
}
button {
  padding: 0 0 0 20px;
}

کد خوب

img {
  margin: 5px 10px;
}
button {
  padding-left: 20px;
}
از مقادیر رنگ هگزادسیمال shorthand استفاده کنید

هر موقع امکان داشت، از مقدار رنگ هگزادسیمال shorthand سه کاراکتری استفاده کنید و همیشه در داخل هر مقدار رنگ هگزادسیمالی، از کاراکترها یا حروف کوچک استفاده کنید.

دوباره تکرار می‌کنم، ایده و هدف این است که ثبت کد را حفظ کنیم، از گیج شدن خودمان یا دیگران جلوگیری کنیم و syntax زبانی که کد را با آن می‌نویسیم را نیز رعایت کنیم.

کد بد

.module {
  background: #DDDDDD;
  color: #FF6600;
}

کد خوب

.module {
  background: #ddd;
  color: #f60;
}
واحد‌ها را از مقادیر صفر حذف کنید

یک روش که می‌توانید به آسانی میزان کد CSS را کاهش دهید این است که واحد را از همه مقادیر صفر حذف کنید. مهم نیست از چه واحد طولی استفاده می‌کنید (پیکسل، درصد، em و غیره)، صفر همیشه صفر است. اضافه کردن واحد به صفر غیر ضروری است و هیچ ارزش بیشتری برای کاربر و کد ایجاد نمی‌کند.

کد بد

div {
  margin: 20px 0px;
  letter-spacing: 0%;
  padding: 0px 5px;
}

کد خوب

div {
  margin: 20px 0;
  letter-spacing: 0;
  padding: 0 5px;
}
پیشوندهای vendor گروه و تراز

در CSS3، پیشوندهای vendor خیلی محبوب هستند و کدهای خوبی به فایل‌های CSS اضافه می‌کنند. وظیفه اضافی استفاده از پیشوندهای vendor گاهی ارزش ایجاد استایل‌ها را دارد.

به هر حال، آن‌ها باید مرتب و منظم نگه داشته شوند. برای حفظ هدف نوشتن کدی که خواندن و اصلاح آن آسان باشد، بهترین کار این است که کد را گروه‌بندی کنیم و پیشوندهای vendor مجزا را با تو رفتگی بنویسیم تا نام‌های ویژگی‌ها به صورت عمودی زیر هم قرار بگیرند (همین‌طور هم مقادیر آن‌ها).

بسته به اینکه پیشوند Vendor در کجا قرار می‌گیرد (چه در ویژگی یا در مقدار)، تراز بودن و قرار گرفتن آن‌ها ممکن است متفاوت باشد.

برای مثال، در کد خوب زیر، ویژگی background در سمت چپ قرار گرفته است، در حالی که توابع ()linear-gradient پیشوند شده به صورت تو رفتگی نوشته شده‌اند تا مقادیر آن‌ها به صورت عمودی زیر هم قرار گیرند.

پس، ویژگی پیشوند شده box-sizing در صورت نیاز به صورت تو رفتگی نوشته شده است تا ویژگی‌ها و مقادیر box-sizing به صورت عمودی زیر هم قرار گیرند.

مثل همیشه، هدف این است که خواندن و ویرایش استایل‌ها آسان‌تر شود.

کد بد

div {
  background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
  background: -moz-linear-gradient(#a1d3b0, #f6f1d3);
  background: linear-gradient(#a1d3b0, #f6f1d3);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

کد خوب

div {
background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
background:    -moz-linear-gradient(#a1d3b0, #f6f1d3);
background:         linear-gradient(#a1d3b0, #f6f1d3);
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}
پیشوندهای vendor

وقتی از پیشوندهای Vendor استفاده می‌کنیم، حتماً باید بعد از اینکه ورژن‌های پیشوند شده را نوشتیم، یک ورژن پیشوند نشده از ویژگی و مقادیر خود نگه داریم.

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

خبر خوب این است که مرورگرها عمدتاً از پیشوند‌های vendor پشتیبانی می‌کنند. به مرور زمان این نگرانی به طور کامل از بین خواهد رفت. به هر حال، فعلاً توصیه می‌شود که مجدد بررسی کنید که کدام استایل‌ها به پیشوند Vendor نیاز دارند و آن پیشوند‌ها را مرتب نگه دارید.

استایل‌های ماژولار شده برای استفاده مجدد

CSS ساخته شده است تا امکان استفاده مجدد از استایل‌ها را فراهم کند، که این کار با کلاس‌ها انجام می‌شود. به همین دلیل، استایل‌های اختصاص داده شده به یک کلاس باید ماژولار بوده و در صورت نیاز برای اشتراک گذاری در بین عنصرها آماده باشند.

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

کلاس news در این مورد مناسب نیست. بلکه یک کلاس feat-box برای این وضعیت منطقی‌تر است و می‌توان به صورت گسترده از آن در طول کل وبسایت استفاده کرد.

کد بد

.news {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.events {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
}

کد خوب

.feat-box {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
}

خلاصه

امیدواریم اصول نوشتن کدهای HTML و CSS زیبا را خیلی واضح و خوب بیان کرده باشیم. اگرچه هر زبان دارای پیچیدگی‌های خاص خودش است، اما اکثر این اعمال را می‌توانید برای این دو زبان (و زبان‌های برنامه‌نویسی دیگر) به کار ببرید.

همه ما باید بهترین تلاشمان را بکنیم تا این اعمال را رعایت کنیم و وقتی در یک تیم کار می‌کنیم باید تمام تلاشمان را بکنیم تا به تیممان هم این اعمال را آموزش دهیم. همچنین، تیم‌های ما نیز ممکن است پیشنهاد‌ها و اعمال ارزشمندی داشته باشند که می‌توانیم در کنار این اعمال از آن‌ها نیز بهره‌مند شویم.

به عنوان یک دوره کوتاه و سریع مباحث بیان شده در این جلسه، دوباره می‌گوییم که کد HTML و CSS ما باید همیشه:

  • به خوبی سازماندهی شده باشد، به طوری که به آسانی قابل خواندن، ویرایش و رسیدگی باشد.

  • ماژولار و انعطاف‌پذیر باشد، به ما امکان استفاده مجدد از کد و الگوها (در صورت نیاز) بدهد.

  • طوری باشد که گویی فقط یک نفر تمام کدها را نوشته است، حتی اگر چندین نفر در نوشتن آن دخیل باشند.

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

حالا علم تقریباً کامل و قدرتمندی راجع به چگونگی ساخت وبسایت‌ها با استفاده از HTML و CSS دارید و می‌توانید شروع به ساخت وبسایت خودتان بکنید.

با MUG همراه باشید!

 منبع: learn.shayhowe

  جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
۵ قالب رایگان HTML برای ایجاد سریع و آسان‌ وبسایت‌ها!
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

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

فرم ارسال نظرات