هنگامی‌که به دنبال یک شغل جدید هستید، در حوزه‌ی پرطرفدار فناوری اطلاعات با طیف متنوعی از موقعیت‌های شغلی برخورد می‌کنید. توسعه‌دهنده‌ی وب، برنامه نویس فرانت‌اند، توسعه‌دهنده‌ی UX، توسعه‌دهنده‌ی UI، نویسنده‌ی فنی، حامی توسعه‌دهنده (برای شرکت‌هایی که مخاطبین آن برنامه‌نویس‌ها و توسعه‌دهندگان هستند)؛ این‌ها تنها چند نمونه از عناوین شغلی هستند که ممکن است مشاهده کنید که به‌نوعی به آشنایی با CSS نیاز دارند. اگر قصد شرکت در یک مصاحبه‌ی فنی یا آزمون استخدامی در این زمینه‌ها را دارید، باید قبل از شرکت در مصاحبه پاسخ‌های لازم به سوال‌های احتمالی را مرور کنید. در این مقاله با 7 سوال مهم و پرتکراری که ممکن است از شما در مورد CSS پرسیده شود تا میزان تسلط شما را بسنجند، آشنا می‌شوید تا بتوانید پاسخ‌های خود را پیش از جلسه مصاحبه، مرور و تمرین کنید.
مصاحبه‌ی شما می‌تواند به‌صورت رسمی (پرسش و پاسخ) یا به‌صورت ارزیابی یا پروژه محور باشد. فارغ از اینکه با کدام نوع از مصاحبه مواجه شوید، شما باید به سوالات پاسخ دهید و دانش و توانایی خود را در برنامه‌نویسی CSS اثبات کنید. برای آمادگی بیشتر با هفت سوال رایج و پاسخ‌های آن‌ها که در ادامه آمده‌اند توجه کنید.
سوال 1: چه چیزی باعث می‌شود که شما یکی از انواع طرح‌بندی Box یا Flexbox یا Grid را به دیگری ترجیح دهید؟
این سوال جالبی است؛ زیرا از شما می‌خواهند به پروژه‌های قبلی که روی آن‌ها کارکرده‌اید فکر کنید. قبل از رفتن به یک مصاحبه‌ی فنی، حتما پروژه‌های قبلی را که انجام داده‌اید مطالعه کنید تا دلیل انتخاب‌های انجام‌شده را به خاطر بیاورید. هدف از این پرسش آشنایی بیشتر با روند فکری و سرعت عمل شما است. یک برنامه‌نویس فرانت اند حرفه‌ای باید بتواند بهترین و سریع‌ترین مسیر را برای انجام یک پروژه پیدا کند. مصاحبه‌گرها مشتاق‌اند تا روند فکری شما برای انجام پروژه را بدانند؛ زیرا این موضوع به آن‌ها نشان می‌دهد که شما تا چه اندازه در حل یک مشکل حرفه‌ای هستید و نحوه‌ی برخوردتان با مشکالات احتمالی چطور است. شما لزوما مجبور نیستید تمام مراحل انجام کار را بازگو کنید؛ اما صحبت با استدلال در رابطه با روند انجام کار می‌تواند برای مصاحبه‌گر بسیار ارزشمند باشد و توانایی شما را اثبات کند.
در مورد طرح‌بندی یا layout در CSS چه چیزی را باید مطالعه کنید؟
وقتی صحبت از تفاوت‌های Flexbox، Box و Grid می‌شود، باید با توجه به اهداف و قابلیت‌های هر چیدمان بهترین گزینه را انتخاب کنید. برای آشنایی بیشتر با این سه نوع چیدمان به توضیحات مختصر زیر توجه کنید.
- مدل جعبه یا Box اولین و قدیمی‌ترین سبک چیدمان معرفی‌شده است. باکس‌های بلوکی انواع اصلی کانتینرهای مورداستفاده در مدل جعبه هستند. هر باکس یا کانتینر از حاشیه، بوردر، پدینگ و محتوا تشکیل‌شده است. مدل باکس به دلیل ماهیت ایستا و ثابتش شامل محدودیت‌هایی در رابطه با مسائل طرح‌بندی پاسخگویی و تطبیقی است.
- مدل Flexbox بعد از مدل جعبه معرفی شد تا برخی از محدودیت‌های مدل جعبه را در مورد موقعیت‌یابی بهبود ببخشد. این مدل از نظر عملکردی هم‌پوشانی زیادی با مدل جعبه دارد اما برای طراحی تطبیقی یا واکنش‌پذیرتر، توسعه‌یافته‌تر است. بهتر است بدانید که flexbox زمانی استفاده می‌شود که شما بیشتر به جریان محتوا اهمیت می‌دهید تا بتواند کارآمدتر از طراحی واقعی صفحه باشد.
- مدل گرید Grid آخرین مورد از سه نوع چیدمان بود که معرفی شد. این نوع طرح‌بندی به دلیل توانایی در کنترل کامل محتوا، در حال محبوب شدن است. بااین‌حال، هنوز هم فلکس باکس محبوب‌ترین طرح‌بندی موجود است.
شما به‌عنوان یک فرد حرفه‌ای در CSS باید به اهداف هرکدام از این چیدمان‌ها مسلط باشید. هنگامی‌که در مورد استدلال خود در رابطه با انتخاب Flexbox، Box و Grid بحث می‌کنید، مطمئن شوید که روی هدف چیدمان تمرکز کرده‌اید. به‌طور مثال اگر جریان محتوا اهمیت بیشتری دارد از CSS Flexbox استفاده کنید اما اگر استقرار محتوا از اهمیت بیشتری برخوردار است، CSS Grid انتخاب بهتری است. چون یک برنامه‌نویس خبره به راحتی می‌تواند بهترین چیدمان را انتخاب کند. پاسخ به این سوال تا حد زیادی یک برنامه‌نویس CSS معمولی و حرفه‌ای را تفکیک می‌کند. پیشنهاد میکنیم در همین راستا مقاله چرا CSS Grid Layout بهتر از Bootstrap است؟ را نیز مطالعه کنید.
سوال 2: CSS واقعا چگونه کار می‌کند؟
یک برنامه‌نویس باید تسلط کاملی بر جزییات فنی کار داشته باشد. این سوال توانایی شما را به‌عنوان برنامه‌نویس CSS برای توصیف ماهیت CSS از نقطه نظر فنی آزمایش می‌کند. برای پاسخگویی به این سوال اطلاعات پایه و ضروری را از همان ابتدا بیان کنید و رفته‌رفته توضیحاتتان را تکمیل کنید. در ابتدا توضیح دهید که CSS مخفف Cascading Style Sheets است و از سه روش برای استایل دادن به سند HTML استفاده می‌کند که inline، internal، external از روش‌های استایل دادن به اسناد هستند. سپس توضیح دهید که ما از این استایل سازها برای تزیین صفحات وب استفاده میکنیم. هم‌چنین از انتخابگرهای CSS (CSS selectors) برای ایجاد مشخصات ظاهری صفحات وب استفاده میکنیم. زمانی که شما از توضیحات پایه‌ای به سمت توضیح جزییات پیش می‌روید، مصاحبه‌گر می‌تواند دانش فنی و میزان تسلط شما را به‌خوبی بسنجد.اگر نیاز به مرور این مباحث پایه‌ای دارید؛ بخش رایگان ساختار CSS از دوره آموزش کاربردی CSS و CSS3 ، مناسب شماست.
سوال 3: تفاوت‌های شبه عناصر و شبه کلاس‌ها (pseudo-elements and pseudo-classes) در CSS چیست و بگویید برای چه استفاده می‌شوند؟
شبه عناصر و شبه کلاس‌ها اغلب باهم اشتباه گرفته می‌شوند. آن‌ها دو مفهوم متمایز در CSS هستند. این سوال برای این طراحی‌شده است که مصاحبه‌گر متوجه شود که آیا شما این تفاوت را می‌دانید یا خیر؟! شباهت بین کلاس و عناصر در این است که هر دوی آن‌ها کلمات کلیدی هستند که به یک انتخابگر اضافه می‌شوند و امکان سفارشی کردن استایل انتخابگر را فراهم می‌کنند. اگر بخواهید به انتخابگر خود یک جلوه خاص بدهید، باید از شبه کلاس ها یا همان سودو کلاس ها استفاده کنید اما در صورتی که می‌خواهید قسمت خاصی از عنصر انتخاب‌شده را استایل دهید، یک شبه عنصر به انتخابگر اضافه می‌شود.
در رابطه با تفاوت این دو باید بدانید که در CSS ما از شبه عناصر استفاده میکنیم تا برای بخش یا قسمت خاصی از یک تگ استایل تعریف کنیم. به‌طور مثال اگر بخواهیم کلمه‌ی خاصی را به قبل یا بعد از متن داخل تمامی تگ‌های p موجود در صفحه اضافه کنیم، می‌توانیم از شبه عناصر استفاده کنیم. از طرف دیگر، شبه کلاس زمانی به یک انتخابگر اضافه می‌شود که یک عنصر در یک حالت خاص تعریف‌شده است و شما می‌خواهید استایل کلی آن را کنترل کنید.
تنها چیزی که باید به خاطر بسپارید این است که شبه عنصر بخش‌های خاصی از یک عنصر را سبک‌دهی می‌کند و شبه کلاس حالت خاصی از یک عنصر را ایجاد می‌کند. دانستن همین توضیحات می‌تواند قانع‌کننده‌ترین پاسخ برای این سوال باشد.
سوال 4: مفهوم CSS Specificity را توضیح دهید.
CSS Specificity به نحوه‌ی اعمال قوانین استایل (style) در یک سند HTML مربوط می‌شود. وقتی چندین قانون CSS برای یک عنصر تعیین می‌شود، انتخابگر تعیین می‌کند که کدام قانون باید اجرا شود. هر نوع انتخابگر دارای یک عدد مربوط به خود است. هر چه این عدد بیشتر باشد، اختیارات انتخابگر بیشتر است. CSS Specificity می‌تواند به‌عنوان یک موتور رتبه‌بندی عمل کند و اولویت پیاده‌سازی دستورات را مشخص کند. تسلط به مفهوم Specificity می‌تواند بسیاری از مشکلات مربوط به اولویت‌بندی و پیاده‌سازی دستورات متضاد را در کدنویسی CSS حل کند.
سوال 5: یک پیش‌پردازنده چه‌کاری انجام می‌دهد و چرا استفاده از آن سودمند است؟
یکی از سوالات رایج در مصاحبه استخدام برنامه‌نویس CSS به احتمال زیاد در مورد پیش‌پردازنده‌ها است. یک پیش‌پردازنده مانند SASS یا LESS به شما امکان می‌دهد چندین کار را انجام دهید؛ تعیین متغیرها، ایجاد mixinها و استفاده از قوانین تو در تو مثال‌هایی از قابلیت‌های پیش‌پردازنده‌ها هستند. یک پیش‌پردازنده با پویاسازی کدها کدنویسی را ساده‌تر می‌کند، هم‌چنین پیش‌پردازنده‌ها از تکرار در کدنویسی پیشگیری می‌کنند. کد پردازنده برای استفاده باید ابتدا در یک فایل CSS کامپایل شود و سپس به سند HTML شما پیوند داده شود. کافی است در پاسخ به این سوال به طور خلاصه بگویید: استفاده از یک پیش‌پردازنده مانند LESS یا SASS، استفاده مجدد از کد را کاهش می‌دهد، طرح‌های رنگی را به متغیرها اختصاص می‌دهد و با کمک متغیرها و پویا کردن کدها از بروز اتفاقات ناخواسته جلوگیری می‌کند.
سوال 6: در مورد مدل CSS Box و عناصر تشکیل‌دهنده آن توضیح دهید.
CSS Box Model اولین مدل طرح‌بندی بود که در CSS معرفی شد. این طرح‌بندی شامل حاشیه، پدینگ، بوردر و محتواست.
- حاشیه (Margin) نشان‌دهنده این است که می‌خواهید باکس‌هایتان چقدر از یکدیگر دور باشند.
- پدینگ (padding) ناحیه بین محتوا و حاشیه است. هرچه پدینگ بیشتر باشد، فضای بیشتری بین محتوای باکس شما و خود حاشیه وجود دارد.
- مرز یا border یک باکس، بین لایه و حاشیه قرار دارد. پدینگ و حاشیه جعبه را قاب می‌کند.
- ویژگی جعبه، محتوای آن است. در حقیقت این محتوا است که یک باکس را می‌سازد و به آن معنی می‌دهد.
- نحوه‌ی متحرک‌سازی یا تبدیل آیتم‌ها با استفاده از CSS
سوال 7: چگونه در CSS هر پاراگراف با نام کلاس about-me که فرزند یک div است را انتخاب می‌کنید؟
در CSS می‌توانیم با کمک ترکیب‌کننده‌ها (combinator) رابطه پدر و فرزندی بین عناصر ایجاد کنیم. معروف‌ترین ترکیب‌کننده‌ها شامل این‌ها هستند؛ که به ما اجازه می‌دهند از انتخاب‌گرها به‌گونه‌ای جدید استفاده کنیم.
سخن آخر
در این مقاله هفت سوال رایج و مهم در رابطه با برنامه‌نویسی CSS که ممکن است در مصاحبه‌های استخدامی مطرح شوند، بررسی و پاسخ‌های کوتاه و آسان برای این سوال‌ها ارائه شدند. فراموش نکنید که برای مسلط شدن به CSS به آموزش و تمرین بسیار نیاز دارد. پیشنهاد میکنیم از آموزش CSS و CSS3 سکان آکادمی استفاده کنید و اطمینان داشته باشید که CSS را به صورت کاربردی یاد می‌گیرید تا برای انجام پروژه های مختلف و همین طور برای استخدام و پاسخگویی به سوالات مصاحبه شغلی CSS آماده شوید.
