CSS Reset تکنیکی در طراحی وب است که استایل‌های پیش‌فرض مرورگرها را حذف یا هماهنگ می‌کند تا نمایش عناصر در مرورگرهای مختلف یکسان باشد.

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

۱. چرا از CSS Reset استفاده می‌کنیم؟

✅ حذف تفاوت‌های پیش‌فرض مرورگرها → مرورگرها استایل‌های پیش‌فرض متفاوتی دارند که باعث ناهماهنگی در نمایش وب‌سایت می‌شود.
✅ یکپارچه‌سازی استایل‌های اولیه → با CSS Reset، تمامی عناصر HTML با یک استایل پایه شروع می‌شوند.
✅ کنترل کامل بر روی طراحی → بدون تأثیر مقادیر پیش‌فرض، طراحان می‌توانند استایل‌های دلخواه خود را اعمال کنند.
✅ افزایش سازگاری در نمایش وب‌سایت → وب‌سایت در تمام مرورگرها به یک شکل نمایش داده می‌شود.

۲. روش‌های پیاده‌سازی CSS Reset

✅ ۱. استفاده از یک CSS Reset ساده

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

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

🔹 نتیجه: تمام عناصر حاشیه و فاصله داخلی پیش‌فرض را از دست می‌دهند و مقداردهی آن‌ها به صفر می‌رسد.

✅ ۲. استفاده از CSS Reset استاندارد (Eric Meyer’s Reset)

یکی از محبوب‌ترین CSS Resetها، توسط Eric Meyer ایجاد شده است که بسیاری از توسعه‌دهندگان از آن استفاده می‌کنند.

/* CSS Reset – Eric Meyer */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

🔹 نتیجه:
✅ تمام حاشیه‌ها و فاصله‌های داخلی حذف می‌شوند.
✅ لیست‌ها بدون استایل پیش‌فرض نمایش داده می‌شوند.
✅ جدول‌ها بدون فاصله بین سلول‌ها نمایش داده می‌شوند.

✅ ۳. استفاده از Normalize.css به‌جای CSS Reset

Normalize.css یک جایگزین برای CSS Reset است که به‌جای حذف همه استایل‌ها، فقط مقادیر پیش‌فرض مرورگرها را یکسان‌سازی می‌کند.

✅ تفاوت بین Normalize.css و CSS Reset:

📌 نصب و استفاده از Normalize.css:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

۳. بهترین روش برای پیاده‌سازی CSS Reset

✅ اگر قصد دارید طراحی را از صفر انجام دهید و کنترل کامل روی استایل‌ها داشته باشید، از CSS Reset استفاده کنید.
✅ اگر می‌خواهید مرورگرهای مختلف نمایش یکسانی داشته باشند بدون حذف کامل استایل‌ها، از Normalize.css استفاده کنید.
✅ بهترین روش، ترکیب CSS Reset با تنظیمات شخصی‌شده است.

🎯 ترکیب CSS Reset و Normalize.css برای بهترین نتیجه:

/* CSS Reset پایه */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* تنظیمات شخصی‌شده */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
}

۴. نتیجه‌گیری

✅ CSS Reset تمام استایل‌های پیش‌فرض مرورگرها را حذف می‌کند و یک بستر یکسان برای طراحی ایجاد می‌کند.
✅ Normalize.css جایگزینی است که فقط تفاوت‌های مرورگرها را هماهنگ می‌کند و برخی استایل‌های پیش‌فرض را حفظ می‌کند.
✅ ترکیب CSS Reset با تنظیمات شخصی‌شده باعث می‌شود طراحی شما یکدست، خوانا و حرفه‌ای باشد.