احمقانه ترین اشتباهات من در CSS

همه ما در کد خود اشتباه می کنیم. اتفاق می افتد! می‌دانم که اگر یکی از آن علامت‌های «روزهای پس از آخرین اشتباه» روی میز کارم آویزان بود، یک تخم غاز بزرگ همیشه بالای سرم معلق بود. لازم نیست این اشتباهات بزرگ نیز باشد. خود دست و پا چلفتی من مرتکب اشتباهات کوچکی در مخازن مخروطی شده است که از اشتباهات تایپی تا تکمیل دایرکتوری های ماژول npm را شامل می شود.

اوووووف

این یکی از چیزهایی است که من واقعاً در مورد CSS دوست دارم: بخشنده است. اگر اشتباه تایپی را متوجه نشود، در جستجوی یک مطابقت به دنبال آبشار است. هیچ یک از آن چیزهایی که در آن یکی از شخصیت های نامناسب سایتی را می شکند و هیچ زندانی نمی کند، نیست. اما هنوز هم وقتی اشتباهات CSS ظاهر می شود شرم آور است!

مثل این یکی بیشتر از آن چیزی که بخواهم اعتراف کنم، خودم را درگیر می کنم:

.element {
  display: flexbox; /* 🤦‍♂️ */
}

یا زمانی که سعی می کنم یک گرادیانت را بدون a تنظیم کنم background ویژگی:

.gradient {
  linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}

از این نزدیکی متنفرم X و C روی صفحه‌کلید هستند، زیرا نمی‌توانم شمارش کنم که چند بار از یک چیز و اشتباه سر در می‌آورم px برای pc واحد.

.element {
  font-size: 16pc; /* I meant pixels! */
}

یکی دیگر از اشتباهات CSS که من هر چند وقت یکبار متوجه می شوم، اشتباهی است که می دانم بسیاری از افراد دیگر مرتکب آن می شوند، زیرا اغلب آن را در پست های وبلاگ با قطعه کد مشاهده می کنم:

// This is not a CSS comment.
.element {
  /* This is a CSS comment. */
}

آیا تا به حال فراموش کرده اید که استفاده کنید var() حول یک متغیر CSS؟ حتما دارم

.element {
  color: --primary-color;
}

وقتی صحبت از متغیرهای CSS شد، نامگذاری آنها سخت است (مثل هر چیز دیگری) و من اغلب از نسخه نادرستی متغیری که نام بردم استفاده می کنم!

:root {
  --color-primary: #FF5722;
  --color-secondary: #3E2723;
}

/* Much later on... */

.element {
  color: var(--primary-color); /* 🙃 */
}

بله، من در واقع قبلاً یک قطعه از CSS را کپی کرده‌ام تا نقل قول‌های جذاب مانع کار کردن آن شوند:

.element::before {
  content: “”; /* Should be "" */
}

و، بله، من خیلی وقت صرف کرده ام تا بفهمم آن نقل قول ها مقصر بوده اند.

نگاه کردن به آخرین مورد به من یادآوری می کند که گاهی اوقات فراموش می کنم تنظیم کنم content زمانی که من با آن کار می کنم ::before or ::after. که به من یادآوری می کند که چگونه فراموش کرده ام یک عنصر را تنظیم کنم position قبل از تلاش برای جبران یا تغییر آن z-index. جدی، این اتفاقات می افتد!

صحبت در مورد اشتباهات سخت است

آیا تا به حال خواندن برخی از پست های وبلاگ را که در آن ترفندهای شگفت انگیز به اشتراک گذاشته شده بود، به پایان رسانده اید و نوعی سندروم Imposter را احساس کرده اید؟ من فکر می‌کنم که عمدتاً به این دلیل است که پست‌های وبلاگ اغلب کارهای واقعی و شکست‌ها را پنهان می‌کنند که به ترفندهای شگفت‌انگیز تبدیل می‌شوند. به عنوان کسی که برای امرار معاش چنین پست هایی را می خواند، می توانم به شما بگویم که بسیاری از آنها، اگر نه اکثریت قریب به اتفاق، دورهای زیادی از ویرایش را طی می کنند که در آن اشتباهات بالقوه شرم آور حذف و هموار می شوند.

حتی آن مقالات فوق‌العاده مضحک نیز باید قبل از دریافت همه آن‌ها شکست بخورند اووووس و اههههه.

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

اما اگر من کاملاً با شما صادق باشم، اغلب به این موضوع شگفت زده (و علاقه مندتر) می شوم سفر برای انجام کاری لازم است، زگیل و همه چیز. سفر نگاهی اجمالی به این است که چگونه است مانند یک توسعه دهنده فرانت اند فکر کنید. اینجاست که یادگیری واقعی (و با ارزش ترین) اتفاق می افتد.

و همه اینها صرفاً بر اساس چیزی است که من واقعاً می خواهم بپرسم…

احمقانه ترین اشتباهات CSS شما چیست؟

بیایید، همه ما می دانیم که شما برخی از آنها را ساخته اید! بیایید از آنها یاد بگیریم!