اهمیت یادگیری CSS • Josh W. Comeau

به عنوان توسعه دهندگان جاوا اسکریپت، مقدار زیادی چیزها انتظار می رود بدانیم که بزرگ است و هر روز بزرگتر می شود.

با بسیاری از زبان‌ها، ابزارها و فن‌آوری‌های مختلف که برای زمان و توجه ما رقابت می‌کنند، دشوار است که بدانیم چه چیزی را در اولویت قرار دهیم. آیا باید در TypeScript بهتر شویم؟ شاید Svelte بگیرید؟ آیا در آینده حتی در حال نوشتن JS خواهیم بود یا این “WebAssembly” واقعی است؟

به نظر من اگر ما در واقع ما می خواهیم بازده سرمایه خود را به حداکثر برسانیم، یکی از بهترین چیزهایی که می توانیم روی آن تمرکز کنیم این است CSS.

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

من در چند ماه گذشته با بسیاری از توسعه دهندگان صحبت کرده ام که به تازگی CSS را پیدا کرده اند ناراضی. من در این مورد یک فرضیه دارم.

CSS زیاد است به طور ضمنی زبان؛ به شدت به مکانیسم هایی که در اعماق مشخصات CSS دفن شده اند متکی است. وقتی این مکانیسم‌ها به گونه‌ای کار می‌کنند که ما انتظارش را نداریم، ما در تاریکی رها می‌شویم و مطمئن نیستیم که چه اتفاقی می‌افتد. ما چیزی را که نمی دانیم نمی دانیم.

این را با زبانی مانند TypeScript مقایسه کنید: وقتی اشتباه می کنیم، یک راهنمای ابزار مفید ظاهر می شود تا به ما اطلاع دهد که چه اشتباهی انجام داده ایم. حتی در جاوا اسکریپت ضعیف، استثناها ما را در جهت درست راهنمایی می‌کنند (و سپس ما دارای پرده‌ها، نقاط شکست، گزارش‌ها…) هستیم.

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

بیایید به یک مثال سریع نگاه کنیم.

در CSS، z-index از ویژگی می توان برای جابجایی یک عنصر در بالا یا پایین عنصر دیگر استفاده کرد. در این قطعه، جعبه صورتی در مقابل یک خاکستری قرار دارد زیرا مقدار z-index آن بزرگتر است:

style>
  .box {
    position: relative;
  }
  .first.box {
    z-index: 2;
    background: hotpink;
  }
  .second.box {
    z-index: 1;
    margin-top: -20px;
    margin-left: 20px;
  }
style>
div class="container">
  div class="first box">div>
div>
div class="second box">div>

با این حال: در شرایط دیگر، حتی آنهایی که آنها واقعا شبیه به هم هستند، به نظر می رسد این قانون شکسته شده است. مقادیر z-index تغییری نکرده اند، اما اکنون کادر صورتی پشت جعبه خاکستری قرار دارد:

style>
  .box {
    position: relative;
  }
  .first.box {
    z-index: 2;
    background: hotpink;
  }
  .second.box {
    z-index: 1;
    margin-top: -20px;
    margin-left: 20px;
  }
  .container {
    opacity: 0.9;
  }
style>
div class="container">
  div class="first box">div>
div>
div class="second box">div>

همانطور که اغلب در مورد CSS اتفاق می افتد، موارد بیشتری وجود دارد z-index دارایی بیش از آنچه به چشم می آید.

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

ناامید کننده است زیرا تصادفی و غیرقابل پیش بینی به نظر می رسد. عنصری از “رولت روسی” وجود دارد: هر بار که از z-index استفاده می کنیم، امیدواریم آنچه را که ما انتظار داریم انجام دهد.

مهم است که تاکید شود: تقصیر تو نیست! اکثر منابعی که CSS را آموزش می دهند، به جای اینکه عمیق تر شوند و در مورد چیزهایی مانند زمینه های چیدمان یاد بگیرند، روی ویژگی های سطح و “ترفندهای خالص” تمرکز می کنند.

(من هم در این مورد کاملاً مقصر هستم 😅 لطفا عصبانی نشوید!)

خواص مانند z-index یا position به عنوان ورودی برای الگوریتم های طرح بندی مختلف استفاده می شود. به جای یادگیری در مورد ویژگی های فردی، باید یاد بگیریم که این الگوریتم ها چگونه کار می کنند!

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

من در سال گذشته با صدها توسعه دهنده جاوا اسکریپت در مورد CSS صحبت کرده ام. من متوجه یک موضوع مشترک شده ام: بسیاری از توسعه دهندگان JS احساس می کنند مغز آنها برای درک CSS سیم کشی نشده است. آنها فرض می کنند که CSS به طور طبیعی برای دیگران می آید و به سادگی برای آن ساخته نشده اند.

من به شما قول می دهم، اینطور نیست. هیچ کس با مهارت های CSS متولد نمی شود. شما می توانید مطلقا در CSS مهارت پیدا کنید.

و شما باید! سخت است که اغراق کنیم که چگونه می توان مهارت های CSS را قوی کرد، زمانی که شما از قبل HTML و JS را می دانید. این تثلیث را کامل می کند: شما همه ابزارها را جمع آوری کرده اید و اکنون می توانید هر چیزی بسازید. ✨

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

درست است که کارفرمایان تمایل دارند مهارت های JS را در اولویت قرار دهند، به خصوص برای موقعیت های ارشدتر. اما یک پویایی جالب اینجا وجود دارد.

کارفرمایان در واقع یک نیاز توسعه دهندگانی که در JS، CSS و HTML مهارت دارند. هر 3 فن آوری برای ساخت یک جلو مورد نیاز است! و از آنجایی که بسیاری از توسعه دهندگان JS دارای یک “حفره CSS” در مجموعه مهارت های خود هستند، مهارت های CSS تمایل به کمبود دارند.

من اخیراً یک قسمت فوق العاده از Indie Hackers را گوش کردم پادکست(در برگه جدید باز می شود) با دیو گدس دیو Flexbox را ایجاد کرد زامبی ها(در برگه جدید باز می شود)یک بازی که اصول CSS Flexbox را آموزش می دهد. از قسمت:

یکی به من گفت، او برای من نامه نوشت و گفت که او یک مهندس جوان است، او تازه اولین کار خود را پیدا کرده است. او با یک مهندس ارشد کار می کرد که گفت: “تو از کجا اینقدر در مورد فلکس باکس می دانی؟”… او آنقدر تحت تاثیر این بچه قرار گرفت که از او پرسید: “چطور این کار را کردی؟”

یکی از بهترین راه ها برای برجسته شدن و پیشرفت در حرفه خود این است که در رشته خود به عنوان بالاتر از حد متوسط شناخته شوید. سطح مهارت متوسط وقتی صحبت از جاوا اسکریپت می شود این است خیلی لعنتی بالا، زیرا بسیاری از توسعه دهندگان به طور انحصاری روی آن تمرکز می کنند. در همین حال، میانگین سطح مهارت CSS کمی پایین تر است*همه چیز ممکن است در خارج از اکوسیستم چارچوب React / JS متفاوت باشد. این یک مشاهده حکایتی از تجربه خودم است و احتمالاً جهانی نیست. این میوه کم آویزان است.

پیوند به این عنوانCSS و جستجوی کار

روند کاریابی بد است. اما من فکر می کنم شاید کمی بهتر شود.

چند سال پیش یک فرآیند طاقت فرسا از 8 مصاحبه را پشت سر گذاشتم. 4 تا از آن مصاحبه ها فنی بود، حتی اگر از من 0 سوال در مورد React، یا جاوا اسکریپت، یا CSS، یا هر چیز مرتبط با توسعه وب پرسیده شد. این یک نوع “شکستن مصاحبه کدگذاری” بود. الگوریتم ها و ساختارهای داده چیزهایی که در مورد کار جلویی اصلا اهمیتی ندارند.*عملکرد مهم است، اما پیچیدگی الگوریتمی به ندرت باعث ایجاد گلوگاه در قسمت جلویی می شود.

خوشبختانه، به نظر می رسد جزر و مد در حال تغییر است. شرکت‌های بیشتر و بیشتری نور را می‌بینند و سعی می‌کنند از مشاغل معمولی روزانه در مصاحبه‌های شغلی و فرآیندهای استخدام تقلید کنند. وقتی در گتسبی مصاحبه کردم شرکت(در برگه جدید باز می شود)، شرکتی که پشت چارچوب Gatsby.js قرار دارد، از من خواسته شد که یک جزء Modal/Dialog ایجاد کنم.

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

در ابتدای این مقاله، به چند قطعه کد نگاه کردیم و نحوه انجام آن را دیدیم z-index می تواند غیر قابل پیش بینی به نظر برسد با این حال، از آنجایی که من با زمینه های انباشته آشنا بودم، توانستم آن دانش را در راه حل خود پیاده سازی کنم و مودال بهتری ایجاد کنم.

برای واضح بودن، نمی گویم که CSS به تنهایی بلیط شما برای یک کنسرت پردرآمد است. در این مصاحبه، من روی یک سری مهارت های دیگر از جمله React و JavaScript نیز آزمایش شدم. اما اگر در حال خواندن این مطلب هستید، گمان می‌کنم که در JS و اکوسیستم فریم‌ورک‌ها و ابزارهای مدرن آن کاملاً آشنا هستید. افزودن CSS به آن مجموعه مهارت می تواند یک مزیت رقابتی بسیار قوی ایجاد کند.

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

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

در مورد من، من در CSS با هزینه کردن بهتر شدم خیلی بیشتر زمان در اسناد MDN و گهگاه وارد مشخصات CSSWG. هر زمان که چیزی برای من معنی نداشت، از فرصت استفاده کردم و در مورد سیستم های مربوطه اطلاعات بیشتری کسب کردم. دیگر نیازی به کپی/پیست کردن از StackOverflow و ادامه بدون درک واقعی نیست! این روند سال ها طول کشید، اما سرمایه گذاری ارزشمندی بود.

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

هدف نهایی شغلی من اکنون این است که رهبر شوم و به دیگران کمک کنم مهارت هایی را که برای رسیدن به اهدافشان نیاز دارند بیاموزند. از زمان راه‌اندازی، بیش از 18000 توسعه‌دهنده CSS را برای جاوا اسکریپت گذرانده‌اند توسعه دهندگان(در برگه جدید باز می شود)، و بازخورد بسیار مثبت است.

در اینجا می توانید اطلاعات بیشتری در مورد دوره کسب کنید: