یک CSS Reset مدرن

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

در عصر کنونی مدرن توسعه‌ وب، ما اصلاً نیازی به reset مجدد نداریم، زیرا احتمال بروز مشکلات سازگاری CSS در اکثر مرورگرها‌ بسیار کمتر از 6 IE‌ قدیمی است. آن دوره زمانی بود که resetهایی مانند normalize.css بوجود آمده بود و کارهمه ما را ساده‌تر کرد. آن روزها دیگر سپری شده‌اند و ما می‌توانیم به مرورگرهای‌مان اعتماد کنیم که عملکرد بهتری داشته باشند‌, بنابراین به نظر من ‌resetها بیشتر اوقات اضافی هستند‌.

یک reset منطقی

البته من هنوز مواردی از reset دوست دارم، و خودم در طول سال‌ها به آرامی و به طور مداوم با reset شخصی به شیوه کدنویسی وسواسی سر و کار داشتم من تمام مطالب را توضیح خواهم داد، اما قبل از آن reset کامل زیر را نگاهی بیندازید:

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

ما با box-sizing شروع می کنیم. من فقط همه المنت‌ها و شبه المنت‌ها را برای استفاده box-sizing: border-box مرتب کرده‌ام.

*,
*::before,
*::after {
  box-sizing: border-box;
}

برخی فکر می‌کنند که عناصر شبه المنت باید box sizing را به ارث ببرند، اما این موضوع اشتباه است. اگر می‌خواهید از box-sizing دیگری استفاده کنید، آنرا دقیق تنظیم کنید - به هر حال حداقل این کاری است که من انجام می‌دهم.

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

بعد از box-sizing‌، به سراغmargin و padding میرویم، جایی که توسط style مرورگر تنظیم می‌شود. این موضوع کاملا مشخص است‌، بنابراین زیاد وارد آن نمی‌شوم.

هر چند من وضعیت را با لیست‌ها ذکر می‌کنم. من فقط لیست‌هایی را انتخاب می‌کنم که دارای یک ویژگی کلاس باشند زیرا اگر یک ol ساده <ul> یا <ol> مورد استفاده قرار گیرد‌، می‌خواهم آن مانند یک لیست باشد. بسیاری از reset ها‌، از جمله مورد قبلی من‌، به سرعت این موضوع را حذف می‌کنند.

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

بعدی: body style. من این را خیلی ساده می‌گویم. برای پر کردن نمای <body> حتی در صورت نبودن محتوا مفید است‌، بنابراین این کار را با تنظیم min-height روی 100vh انجام می‌دهم. من اسکرول نرم را دوست دارم‌، بنابراین نوع اسکرول را تنظیم می‌کنم.

من فقط دو استایل متن را تنظیم کردم. line-height را 1.5 تنظیم کردم زیرا 1.2 پیش فرض به اندازه کافی بزرگ نیست تا متن قابل خواندن و قابل دسترس باشد. همچنین text-rendering را برای optimizeSpeed تنظیم کردم. استفاده از optimizeLegibility متن شما را زیباتر نشان می‌‌دهد‌، اما می‌تواند دارای مشکلات جدی عملکردی مانند تاخیرهای بارگیری سایت باشد، بنابراین سعی می‌کنم اکنون از آن استفاده نکنم. هر چند گاهی اوقات آن را به بخش‌های microcopy اضافه می‌کنم.

ul[class],
ol[class] {
  list-style: none;
}

درست مانندmargin و padding, تنها list-style را تنظیم می‌کنم که در آن یک المنت لیست نسبت به یک ویژگی کلاس ارجحیت دارد‌.

a:not([class]) {
  text-decoration-skip-ink: auto;
}

برای لینک‌های بدون ویژگی کلاس, من متن text-decoration-skip-ink: auto را ست می‌کنم‌: به طوری که underline در یک استایل بسیار خوانا باشد‌. البته ممکن است این موضوع برای شما باعث تناقض شود، ولی من آن را اینگونه حفظ می‌کنم.

img {
  max-width: 100%;
  display: block;
}

در یک ol خوب، استایل‌های روان در مرحله بعدی قرار می گیرند. البته من تصاویر را به عنوان یک المنت بلوک در نظر می‌گیرم.

article > * + * {
  margin-top: 1em;
}

من این ترفند CSS را خیلی دوست دارم، به این خاطر آن را به reset اضافه میکنم. سلکتور owl المنت‌های فرزند را هدف قرار می‌دهد و em1 به top margin آنها اضافه می‌کند. این یک ریتم مشخص برای روند محتوا است. در واقع اکنون در هر پروژه‌ای از این ابزارها استفاده می‌کنم.

input,
button,
textarea,
select {
  font: inherit;
}

مورد دیگری که من در نهایت به عنوان پیش فرض تنظیم کردم‌، فونت است: ارث بری در المنت‌های ورودی‌.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

درآخر، کد بالا یک ‌‌media query@ است که در صورت ترجیح برای کاهش animation‌ها‌، transition‌ها، و اسکرول‌ها می‌توان همه آنها را reset کرد.

منبع