CSS Interview Preparation

توضیح کلی آمادگی برای مصاحبه CSS را به فارسی ترجمه و بازنویسی کرده‌ام:

۱. مبانی CSS

• نحو و سلکتورها:

  • انواع سلکتورها: عنصر (element)، کلاس (class)، شناسه (id)، ویژگی (attribute)، شبه‌کلاس (pseudo-class)، شبه‌عنصر (pseudo-element)

  • ترکیب سلکتورها و specificity (مثلاً #id > .class p)

• Cascading و Specificity:

  • ترتیب اعمال استایل‌ها: inline > id > class > element

  • کاربرد !important

• Box Model (مدل جعبه‌ای):

  • محتوا، padding، border، margin

  • تفاوت content-box و border-box

۲. چیدمان و موقعیت‌دهی (Layout و Positioning)

• Positioning: static, relative, absolute, fixed, sticky

• Display و Visibility: block, inline, inline-block, none

• Flexbox:

  • مفاهیم اصلی: container، items، محور اصلی (main axis)، محور فرعی (cross axis)

  • ویژگی‌ها: justify-content، align-items، align-self، flex-grow/shrink/basis

• Grid Layout:

  • grid-template-columns/rows، gap، grid-area

  • auto-placement و grids صریح/ضمنی (implicit/explicit)

• Float و Clear: کاربرد و محدودیت‌ها

۳. استایل پیشرفته (Advanced Styling)

• Pseudo-classes و Pseudo-elements: :hover, :focus, :nth-child, ::before, ::after

• Transitions و Animations:

  • transition-property, duration, timing-function

  • keyframes, animation-name, animation-duration

• Transforms: translate, rotate, scale, skew

۴. طراحی واکنش‌گرا (Responsive Design)

• Media Queries: @media screen and (max-width: 768px) { … }

• واحدهای نسبی: %, em, rem, vw, vh

• Mobile-first و Desktop-first

۵. مفاهیم خاص CSS

• Z-index و stacking context

• متغیرهای CSS: --main-color: red; و استفاده با var(--main-color)

• توابع CSS: calc(), clamp(), min(), max()

• Overflow و Scroll: overflow-x, overflow-y, scroll-behavior

۶. بهترین روش‌ها و بهینه‌سازی

• کم کردن reflows و repaints

• استفاده از shorthand properties

• سازمان‌دهی CSS (BEM, SMACSS)

• جلوگیری از سلکتورهای خیلی عمیق برای بهبود عملکرد

۷. سوالات رایج مصاحبه

• تفاوت relative و absolute چیست؟

• تفاوت inline-block و inline چیست؟

• تفاوت position: fixed و sticky چیست؟

• تفاوت em، rem و % چیست؟

• تفاوت display: none و visibility: hidden چیست؟

• چگونه عناصر را در مرکز صفحه هم از نظر عمودی و هم افقی قرار دهیم؟