6 نکته نوشتن CSS بهتر برای مبتدیان

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

در اینجا برخی از ایده‌های من برای جذب شما و نوشتن CSS خوب آورده شده است.

قبل از شروع برای Microverse اقدام کنید، زیرا به من این فرصت را داد تا در موضوعاتی که دانش خود را مسلم می‌دانستم مانند نحوه نوشتن CSS خوب، خود را به چالش بکشم.

1 - نوشتن HTML با ساختار خوب:

یک سند HTML با ساختار خوب، درگاهی برای نوشتن CSS خوب است.

رایج‌ترین مشکلی که برنامه نویسان هنگام نوشتن CSS با آن روبه رو می‌شوند این است که آن‌ها یک سند HTML با ساختار مناسب ندارند و بنابراین با عناصر موقعیت و حالت دهی مشکل پیدا می‌کنند.

در اینجا یک راهنمای سبک برای HTML وجود دارد که برای شروع می‌توانید از آن استفاده کنید و در اینجا نیز مقاله‌ای در مورد HTML آورده شده است.

2 - استفاده از تنظیم مجدد CSS:

بازنشانی CSS مجموعه کوتاهی از قوانین CSS است که سبک‌سازی عناصر HTML را به یک حالت اولیه بازمی‌گرداند و "User-Agent" پیش فرض مرورگر را از بین می‌برد. به این ترتیب هنگام شروع استایل دادن به وبسایت خود، نگران ویژگی‌های پیش‌فرض ذخیره شده نخواهید بود.

تعداد زیادی صفحه استایل تنظیم مجدد CSS در CssReset.com یا در meyerweb.com وجود دارد. اما من توصیه می‌کنم که یک stylesheet الگوی جدید ایجاد کنید که تمام تگ‌های HTML را که استفاده می‌کنید گروه‌بندی کند.

همچنین می‌توانید یکی از stylesheetهایی را که ذکر کردم کپی کرده و همه تگ‌های HTML را که استفاده نمی‌کنید حذف کنید.

3 - درباره بهترین روش‌های CSS بیاموزید:

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

4 - از ابزارهای توسعه دهنده استفاده کنید:

ابزارهای توسعه دهنده یا به طور خلاصه Devtools مجموعه‌ای از ابزارها هستند که در هر مرورگری وجود دارد و می‌توانید بدون نیاز به تغییر کد در فایل‌های محلی خود، کد خود را در همان لحظه ویرایش کرده و تغییرات را بلافاصله مشاهده کنید. برای باز کردن ابزارهای توسعه، اگر از گوگل کروم یا موزیلا فایرفاکس استفاده می‌کنید، CTRL + SHIFT + C (برای ویندوز) و OPTION + SHIFT + C (برای مک) را روی صفحه کلید فشار دهید. اگر از سافاری استفاده می‌کنید، CTRL + SHIFT + C (برای ویندوز) و CTRL + OPTION + C (برای مک) را بزنید.

با این کار DevTools را در صفحه Elements باز خواهید کرد. سپس بر روی عنصر بروید تا برجسته شود.

5 - نگاهی به Sass بیندازید:

اگر در طراحی تازه‌کار هستید ممکن است در مورد Sass چیزی شنیده باشید. به طور خلاصه Sass پیش پردازنده CSS است که ویژگی‌های خاصی مانند متغیرها، قوانین تو در تو و .. را با CSS معمولی میکس می‌کند.

برای اطلاعات بیشتر می‌توانید این آموزش کاربردی را در وبسایت راکت مشاهده کنید.

6 – افزونه‌های VSCODE:

اگر از VScode استفاده می‌کنید باید با افزونه‌های آن آشنا باشید. در اینجا مفیدترین افزونه‌هایی آورده‌ام که در پروژه‌های خود استفاده می‌کنم:

1. Live Server: این افزونه سرور مستقیمی را راه‌اندازی می‌کند تا هر زمان که بخواهید فایل خود را تغییر دهید که به طور خودکار بارگیری می‌شود.
2. کامپایلر Live Sass: این ساده‌ترین راه برای شروع استفاده از Sass است.
3. تغییر نام خودکار تگ‌ها: تغییر نام خودکار تگ‌های جفت شده HTML.
4. Path Intellisense: افزونه‌ای که نام فایل‌ها را به صورت خودکار تکمیل می‌کند.
5. stylelint: این افزونه CSS / SCSS / Less Linters را برجسته می‌کند.
6. Sass Intellisense: تکمیل و تکثیر خودکار پیشرفته برای SCSS.

با استفاده از این نکات و ابزارهای جذاب می‌توانید یک کد سی اس اس تمیز بنویسید و هنگام ترکیب آن‌ها خواهید فهمید که در واقع کد CSS کمتری را نوشته‌اید.

اگر نظری دارید یا هر چیزی برای اضافه کردن دارید، خوشحال می‌شویم در بخش نظرات با ما در میان بگذارید.

منبع