اکنون CSS خود را بازسازی کنید! – انجمن DEV 👩‍💻👨‍💻

هنگام کار با CSS، شیوه نامه user-agent به طور خودکار روی عناصر HTML اعمال می شود. قبل از ایجاد سبک های خود برای پروژه، تنظیم مجدد این شیوه نامه بسیار مهم است. یکی از روش های رایج این است که مقادیر حاشیه و padding را به 0 بازنشانی کنید.

چرا؟
برای جلوگیری از تکرار خط کدها

 * {
    margin: 0;
    padding: 0;
  }

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

به عنوان مثال، اگر نیاز به به روز رسانی یک رنگ در CSS خود دارید، می توانید این کار را در یک مکان با استفاده از متغیرهای CSS انجام دهید.

:root{ 
  --primary-color: #999;
}

h2{ 
  color: var(--primary-color)
}

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

برای محاسبه عرض یک عنصر با مدل جعبه، باید عرض آن را به حاشیه و بالشتک آن اضافه کنید:

عرض عنصر = عرض + حاشیه + بالشتک

با نگاهی به تصویر بالا، می بینیم که عرض div 150 پیکسل است. با این حال، به دلیل وجود padding و حاشیه، عرض واقعی عنصر به 170px افزایش یافته است.

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

div { 
  width: 150px;
  height: 150px;
  background: #eee;
  padding: 10px;
  border:2px solid #999;
  box-sizing: border-box;
}

* {
    box-sizing: box-model;
 }

با تنظیم ویژگی box-sizing روی border-box، می‌توانید از زمان و ناامیدی زیادی که برای رفع مشکلات چیدمان صرف می‌کنید، اجتناب کنید، مانند شکستن عناصر یا اضافه شدن پیکسل‌های اضافی به ظرفی با عرض ثابت. این تکنیک ساده می تواند در درازمدت زمان و سردرد زیادی را برای شما کاهش دهد.

is() یک تابع شبه کلاس CSS است که به شما امکان می دهد تست کنید آیا یک عنصر با یک انتخابگر خاص مطابقت دارد یا خیر. بسته به اینکه عنصر با انتخابگر مشخص شده مطابقت داشته باشد، مقدار بولی درست یا نادرست برمی گرداند.

این به نوشتن کمتر، انجام بیشتر و سهولت خوانایی کمک می کند.

 <input type="text">
 <input type="email" >

 input[type=text], input[type=email] { ... } 

section h1,
section h2,
section h3 { ... }

به جای موارد بالا این کار را انجام دهید:

input:is[ [type=text],[type=email]]{ ...}
section:is [h1, h2, h3]{...}

در حالی که px رایج ترین واحد مورد استفاده در CSS است، محدودیت های خود را دارد. یکی از مسائل مهم این است که بر اساس اندازه صفحه نمایش تنظیم نمی شود، که می تواند ایجاد طرح بندی های پاسخگو و حفظ کد را در طول زمان دشوار کند. خوشبختانه واحدهای دیگری مانند em و rem نیز وجود دارند که می‌توانند ایجاد طرح‌های واکنش‌گرا و حفظ کد را آسان‌تر کنند.

هنگام انتخاب واحدها برای CSS خود، مهم است که این دستورالعمل ها را دنبال کنید:

• ثبات را در سراسر کد خود حفظ کنید.

• واحدهایی را انتخاب کنید که به اندازه های مختلف صفحه نمایش پاسخگو باشند.

• واحدهایی را انتخاب کنید که در طول زمان به راحتی قابل تغییر و نگهداری هستند.

برای فونت ها استفاده از rem و برای فاصله گذاری بهتر است از em استفاده کنید. با این حال، شما همچنان باید بر اساس الزامات طراحی خود در صورت لزوم از واحدهای px استفاده کنید.

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

برای مثال می توانید استفاده کنید :has() به همه استایل div عناصری که حاوی یک H3 و H4 عنصر متفاوت:

یادگیری مبارک!!

توییتر

لینکدین