مقدمه
طراحی بصری وبسایت یکی از مهمترین بخش‌های ساخت یک وبسایت است. به یاد داشته باشید که این بخش از طراحی تنها مربوط به ظاهر نیست، شما باید از نظر تکنیکی و کدنویسی نیز محصول بهینه‌ای را ارائه کنید.
معمولاً توسعه‌دهندگان فرانت-اند چه در سطح حرفه‌ای و چه در سطح مبتدی اشتباهاتی را در روند توسعه اپلیکیشن‌های‌شان مرتکب می‌شوند. اما این موضوع صرفاً بخاطر نداشتن دانش کافی نیست، بلکه بسیاری اوقات دلیل اصلی آن نبود تمرکز کافی روی روند توسعه پروژه است.
در این مطلب از وبسایت راکت قصد داریم در دو بخش که مربوط به HTML و CSS می‌شود خطاهایی را بررسی کنیم که تقریباً هر توسعه‌دهنده‌ای ممکن است مرتکب شود.
۱۰ اشتباهی که توسعه‌دهندگان Front-End معمولاً مرتکب می‌شوند
اشتباهات مربوط به HTML
۱. تعیین نکردن DOCTYPE
DOCTYPE دستوری است که با استفاده از آن مرورگر به نسخه HTML مربوط به سند شما پی می‌برد.
۲. نبستن تگ‌ها
یکی از اشتباهات مرسوم طراحان وبسایت نبستن تگ‌ها است. این موضوع از آن جهت ایجاد می‌شود که توسعه‌دهندگان توجه کافی به کدها ندارند. برای جلوگیری از این موضوع میتوانید از یک ادیتور مناسب استفاده کنید که در آن تگ‌ها به صورت خودکار بسته می‌شوند.
در نسخه‌های قبلی HTML استفاده از خاصیت type ضروری بود اما در HTML۵ میتوانید از این مقدار استفاده نکنید.
یک نکته مهم که برنامه‌نویسان گاهی در آن اشتباه می‌کنند آن است که تگ‌های script را باید در انتهای کدهای مربوط به قسمت body قرار دهید.
۳. استفاده نکردن از خاصیت alt
خاصیت alt به عنوان یک جایگزین برای تصاویر استفاده می‌شود. البته جدای از این کاربرد، alt سئو وبسایت را بهینه‌تر کرده و همچنین دسترسی‌‌پذیری را افزایش می‌دهد.
۴. ID منحصر به فرد
گاهی اوقات برنامه‌نویسان مبتدی چندین المان را با استفاده از یک ID روی یک صفحه قرار می‌دهند. این کار اشتباه است. ID المانی است که باید به صورت منحصر به فرد تعیین شود. به این معنا که یک ID باید متعلق به یک tag باشد. اگر قصد دارید یک استایل را به المان‌های مختلفی اعمال کنید بجای استفاده از ID باید از Class استفاده کنید.
۵. استفاده زیاد از inline-style
استایل‌دهی به صورت inline-style کاری اشتباه است چرا که باعث پیچیده شدن پروژه خواهد شد. بجای آن بهتر است از رویکردهای Internal و External استفاده کنید. اگر کدهای‌تان کوتاه است رویکرد Internal می‌تواند جوابگوی شما باشد در غیر اینصورت بهتر است از همان فایل style.css استفاده کنید.
۶. استفاده از تگ br برای قالب‌دهی به متون
یکی دیگر از اشتباهات بزرگی که توسعه‌دهندگان انجام می‌دهند استفاده کردن از تگ br برای قالب‌دهی به متون است. برای اعمال فواصل و استایل‌های مشابه آن بهتر است از CSS استفاده کنید. انجام چنین کاری باعث بالا رفتن سازگاری وبسایت در دستگاه‌های مختلف نیز می‌شود.
اشتباهات مربوط به CSS
۷. استفاده زیاد از !important
important دستوری است که باعث اولویت دهی به یک استایل خاص و نادیده گرفتن استایل‌های دیگر می‌شود. هیچ‌گاه در استفاده از این المان زیاده‌روی نکنید چرا که کدهای شما را ناسازگار کرده و کنترل آن را سخت میکند.
۸. نام classها
هدف از classها می‌تواند موضوعات مختلفی باشد. اما یکی از مهمترین آن‌ها استفاده دوباره کردن است. به این معنا که شما یک استایل خاص را تعریف کرده و آن را روی المان‌های مختلفی اعمال می‌کنید. برای انجام چنین کاری بهتر است از نام‌های معناداری استفاده کنید که بهتر از وضعیت استایل‌ها خبردار شوید.
۹. استفاده نکردن از میانبرهای CSS
برای برخی از استایل‌های CSS یکسری میانبر وجود دارد که دانستن آن‌ها به تمیز‌تر بودن کدها کمک میکند. برای مثال دستور padding را در نظر بگیرید. استفاده کردن از padding-top، padding-buttom و… می‌تواند کدهای‌تان را شلوغ بکند. بجای این کار تنها کافی‌ست تا padding را فراخوانی کنید.
۱۰. کثیف کاری!
یکی از دلایل اصلی ایجاد CSS کم شدن المان‌های تکراری در یک فایل کدنویسی شده است. برای مثال اگر قصد اعمال یک استایل روی المان‌های مختلف را دارید بجای آنکه به صورت تک تک این کار را انجام دهید، همه آن‌ها را در یک گروه اعمال کنید.
این موضوع را نیز در نظر بگیرید که استفاده کردن از selectorهای تودرتو می‌تواند پیچیده و گاهی اوقات شَلخته باشد. به همین خاطر مهم است که در حد توان آن‌ها را کوتاه نگه دارید.
۱۱ اردیبهشت , ۱۳۹۹
سلام
آخرین مورد ، گزینه ۱۰ در همه هست و نمیشه انکار کرد
۰۱ خرداد , ۱۳۹۹
با سلام و احترام
این نوع کدنویسی در بلند مدت مشکل ایجاد می کند و بهترین راه این است که به کدنویسی با نظم عادت کرد.
موفق باشد.