۱۰ اشتباهی که توسعه‌دهندگان Front-End معمولاً مرتکب می‌شوند

نویسنده : مرتضی گنج | تاریخ انتشار : 2019/11/02 | بخش : طراحی وب

طراحی بصری وبسایت یکی از مهمترین بخش‌های ساخت یک وبسایت است. به یاد داشته باشید که این بخش از طراحی تنها مربوط به ظاهر نیست، شما باید از نظر تکنیکی و کدنویسی نیز محصول بهینه‌ای را ارائه کنید.

معمولاً توسعه‌دهندگان Front End چه در سطح حرفه‌ای و چه در سطح مبتدی اشتباهاتی را در روند توسعه اپلیکیشن‌های‌شان مرتکب می‌شوند. اما این موضوع صرفاً بخاطر نداشتن دانش کافی نیست، بلکه بسیاری اوقات دلیل اصلی آن نبود تمرکز کافی روی روند توسعه پروژه است.

در این مطلب از سایتکده قصد داریم در دو بخش که مربوط به HTML و CSS می‌شود خطاهایی را بررسی کنیم که تقریباً هر توسعه‌دهنده‌ای ممکن است مرتکب شود.

اشتباهات مربوط به HTML

۱. تعیین نکردن DOCTYPE

DOCTYPE دستوری است که با استفاده از آن مرورگر به نسخه HTML مربوط به سند شما پی می‌برد. برای نوشتن این دستور در HTML نسخه ۵ تنها کافی‌ست تا قطعه کد زیر را در ابتدای سند وارد کنید:

<!DOCTYPE HTML>

 

۲. نبستن تگ‌ها

یکی از اشتباهات مرسوم طراحان وبسایت نبستن تگ‌ها است. این موضوع از آن جهت ایجاد می‌شود که توسعه‌دهندگان توجه کافی به کدها ندارند. برای جلوگیری از این موضوع می‌توانید از یک ادیتور مناسب استفاده کنید که در آن تگ‌ها به صورت خودکار بسته می‌شوند.

۳. کد جاوااسکریپت

اگر قصد استفاده از جاوااسکریپت به صورت Internal را دارید باید از تگ script استفاده کنید.

 

<script type=”text/javascript”></script>

 

در نسخه‌های قبلی 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 را فراخوانی کنید.

 

 


مقالات مرتبط