5 ترفند CSS که در زمان شما صرفه جویی می کند

کار با CSS همیشه یک کابوس برای توسعه دهندگان بک اند است. در اینجا اجازه می‌دهیم علیه برنامه‌نویس‌های فرانت‌اند توطئه کنیم و از ترفندهای CSS استفاده کنیم که حتی توسعه‌دهندگان فرانت‌اند هم از آن غافل هستند.

1. ترفند مرکزی در Flexbox

بیایید با مشکل معروف مرکز divs شروع کنیم. در اینجا ما از یک فلکس باکس استفاده خواهیم کرد. نیازی به تنظیم موقعیت مطلق یا کار با حاشیه نیست، این کار را انجام دهید:

  .flex-center-demo {
    display: flex;
    justify-content: center;
    align-items: center;
  }

2. Quick Grid Auto-placement

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

.auto-grid-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

به طور خودکار ردیف ها را با کادرهایی با حداقل عرض 120 پیکسل پر می کند.

3. انتخابگر خواهر و برادر مجاور

این زمانی مفید است که شما عناصر مجاور دارید، عناصری که بعد از عنوان می آیند، به عنوان مثال نام نویسنده در زیر عنوان.

h2 + p {
    font-style: italic;
    color: blue;
  }

در اینجا یک تصویر است:

4. از Pseudo-Class not() استفاده کنید

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

.box:not(.special) {
    background-color: #3498db;
    color: #fff;
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 4px;
  }

5. انیمیشن CSS ناخن مانند یک حرفه ای

دریافت درست انیمیشن های CSS برای اولین بار کمی مشکل است. استفاده از این فریم کلیدی برای ساده سازی انیمیشن های پیچیده در یک قانون واحد که تنظیم یا استفاده مجدد آن آسان است.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-demo {
  animation: fadeIn 3s forwards;
  background-color: #e67e22;
  color: #fff;
  padding: 1rem;
  text-align: center;
  border-radius: 4px;
}

نکته پاداش!

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

/* Debug: Outline every element with a red border */
* {
  outline: 1px solid red !important;
}

امیدوارم این مقاله برای شما مفید واقع شود. نام من Sreedeep است و روی ابزاری به نام LiveAPI کار می کنم – به مردم کمک می کنم اسناد API را به طور کارآمد با هوش مصنوعی تولید کنند.