سلام، امروز قصد دارم شما رو با نحوه ساختار بندی پوشه ها در یک پروژه front-end آشنا کنم.
من شما رو تشویق میکنم به انجام همان کارهایی که انجام نمی دید که میتونه به روشی که دوست دارید این کار رو بهبود ببخشید.
توی این پوشه شما تمامی فایل های css خود را قرار میدهید. اگر که از sass استفاده می کنید پس فایل های transpile شده خود را اینجا قرار میدهید.
معمولا فایل اصلی هر پوشه را main می نامند.
این پوشه مختص به تصاویر است. شما میتوانید آیکون ها، پس زمینه ها، آواتار و ... را قرار دهید.
این پوشه برای نوشتن custom script ها است و میتوانید script های خود را در اینجا قرار دهید.
اگر که از sass استفاده می کنید پس می دونید که ساختار بندی توی sass خیلی مهمه. در اینجا یک ساختار بندی به شما خواهم گفت که بسیاری از طراحان وب از این ساختار استفاده می کنند.
در واقع میشه گفت استایل هایی که به طور کلی به یک صفحه (page) میدید.
در نهایت تنها فایل main.scss به css تبدیل خواهد شد.
توی این پوشه شما framework هایی که در این پروژه استفاده کردید رو قرار میدهید. مثلا jquery و bootstrap.
معمولا طراحان در حالت توسعه (development) از CDN ها استفاده نمی کنند، فایل های اصلی رو دانلود می کنند و توی پروژه قرار میدن.
در نهایت فایل های html خود را که نام گذاری درستی هم می کنید را قرار میدهید. مانند:
index, about, blog
این هم شد از ساختار بندی یک پروژه front-end که دیدیم با ساختار بندی درست و منظم، هم تمرکزمون بالا میره و هم انگیزه بیشتری پیدا میکنیم برای انجام کارهای خلاقانه تر.
اگر که از ادیتور vs code استفاده می کنید، خواستم بگم که یک افزونه به نام material icon theme وجود داره که برای پوشه هاتون یک آیکون بسیار زیبا قرار میده که پیشنهاد میکنم حتما ازش استفاده کنید.
امیدوارم از این مقاله نهایت استفاده رو برده باشین و اگر که لذت بردین خوشحال میشم با دوستان خود به اشتراک بزارید تا اونها هم بتونن استفاده کنن و با هم پیشرفت کنیم.
