زمانی که من سفر خود را در توسعه وب شروع کردم، درست مثل بقیه، با اصول اولیه شروع کردم: یادگیری HTML سپس CSS و سپس JavaScript. من فقط می خواستم در اسرع وقت چیزهایی را بسازم، بنابراین فقط به اندازه کافی یاد گرفتم که به خودم اجازه بدهم پروژه های ساخت و ساز را شروع کنم و سپس در صورت برخورد با آنها یا نیاز به چیزهای جدید جستجو می کردم.
یکی از مزیت های این روش این بود که من توانستم پروژه های کوچک را به سرعت بسازم، اما یک نقص بزرگ نیز در این روش وجود دارد که خلأهای زیادی در یادگیری ایجاد می کند.
برای ارائه سریع، من در حال یادگیری ReactJS هستم و از آن لذت می برم، اما هر زمان که به اجزای استایل می رسید، ناامید کننده و غیرقابل تصور بود زیرا CSS در ذهن من خیلی واضح نبود. من فقط خواصی را اضافه می کنم تا به نتایج دلخواهم برسم، اما جایی در طول مسیر احساس می کردم که روی یک پل باستانی راه می روم که منتظر فروریختن با یک حرکت اشتباه هستم.
به نظر می رسد، CSS آنقدر که من فکر می کردم گیج کننده یا دشوار نیست. در واقعیت، من مدل ذهنی مناسبی برای CSS نداشتم.
به طور کلی، مردم CSS را مجموعه‌ای از ویژگی‌ها (کلید: جفت‌های ارزش) برای دستیابی به ظاهر یا چیدمان دلخواه می‌دانند. اما این در حال حاضر برای من تغییر کرده است و امیدوارم تا پایان این مقاله برای شما تغییر کند.
- به CSS به عنوان مجموعه ای از ویژگی ها فکر نکنید. نسبتا، CSS را به عنوان مجموعه ای از حالت های چیدمان در نظر بگیرید
- CSS از موارد مختلفی تشکیل شده است الگوریتم های چیدمان، تماس گرفت حالت های چیدمان.
- هر حالت چیدمان مانند زبان فرعی خود در CSS است که می تواند نحوه استفاده از ویژگی های CSS را دوباره تعریف و تغییر دهد. به عبارت دیگر، ویژگی های CSS ورودی این الگوریتم ها هستند. بنابراین، بر نحوه استفاده این الگوریتم ها از این ویژگی ها تمرکز کنید به جای حفظ کردن یک سری خواص
2.هر طرح برای حل یک مشکل خاص طراحی شده است
- حالت طرح‌بندی پیش‌فرض: جریان عادی، برای ایجاد اسناد دیجیتالی است.
- این شبیه به الگوریتم طرح بندی MS Word است. یعنی عنوان‌ها و پاراگراف‌ها به‌صورت عمودی به‌عنوان بلوک‌ها روی هم قرار می‌گیرند، در حالی که چیزهایی مانند متن، پیوندها و تصاویر درون این بلوک‌ها قرار دارند.
- به غیر از Normal flow، دو حالت طرح بندی دیگر که بیشتر از آنها استفاده می کنید، طرح بندی Flexbox و Grid هستند.
3.حالت های طرح بندی Flexbox و Grid
- باز هم، هر حالت طرح بندی برای حل یک مشکل خاص ایجاد شده است. به این شکل فکر کنید:
فلکس باکس چه مشکلی را حل می کند؟ -
Flexbox در مورد چیدمان گروهی از آیتم ها در یک ردیف یا ستون با انعطاف پذیری و کنترل فوق العاده بر نحوه توزیع و تراز هر آیتم در گروه است.
-
گرید چه مشکلی را حل می کند؟
CSS Grid ترتیب و تراز کردن گروهی از آیتم ها را در دو بعدی آسان تر می کند. این به شما انعطاف‌پذیری و کنترل بر روی هر یک از آیتم‌ها یا ردیف‌ها/ستون‌های آیتم‌ها را می‌دهد تا ترتیب آنها را دستکاری کنید.
هنگامی که شروع به فکر کردن به CSS از نظر مجموعه ای از حالت های چیدمان و نحوه تأثیرگذاری و تغییر آن ها بر ویژگی های CSS کردید، مدل ذهنی واضح تری از چگونگی اتفاقات حتی اگر CSS به خطوط زیادی در حال رخ دادن باشد، دریافت می کنید.
