متفرقه

گوشه‌های گرد

تو CSS برای اینکه گوشه‌ها رو گرد کنیم، می‌تونیم از border-radius استفاده کنیم. به طور کلی دو مقدار می‌تونیم در نظر بگیریم:

1. 50%
2. یه مقدار خیلی بزرگ مثل 999rem

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

border-radius: 50%

border-radius: 999rem

همونطور که مشخصه، زمانی که Width و Height یکسان نباشن، استفاده از 50% خیلی ظاهر خوبی ایجاد نمی‌کنه. بنابراین بهتره همیشه از یه مقدار خیلی بزرگ برای Rounded Corners استفاده کنیم که همیشه ظاهر خوبی داشته باشیم.

استایل اضافه

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

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

به‌عنوان مثال، تو کد زیر، نوشتنِ justify-content: flex-start اضافه‌ست؛ چون مقدار پیش‌فرض این Property همین Value ئه.

.chiz {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

برای اینکه متوجه بشید یه Declaration اضافه‌ست یا نه، می‌تونید DevTools رو باز کنید، بعد داخل تبِ Styles، تیکِ Declaration مورد نظر رو روشن/خاموش کنید. اگه تغییری تو صفحه مشاهده نکردید و همه چی مثل سابق بود، یعنی این Declaration کاری انجام نمیده و می‌تونید پاکش کنید.

هشدار

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