چه خطاهایی ممکن است هنگام کد زنی رخ دهد؟ در این مبحث به بررسی قالب بندی کد CSS می‌پردازیم.
من به عنوان یک توسعه دهنده وب فول استک هر روز با نوشتن کد، وبسایت‌های مختلفی ایجاد می‌کنم و تجربه چندین موقعیت از جمله حل مشکلات و رفع خطاها را داشته‌ام.
1 – خطاهای سینتکسی
تقریبا هر بار که کد می‌نویسم، جز رایج‌ترین خطاهایی است که باید با آنها کنار بیاییم. این از غلط املایی شروع می‌شود تا فراموش کردن نقطه ویرگول در هر سطر. خوشبختانه تا زمانی که چشمم را رو به ویرایشگر متن باز نگه دارم، این خطاها به راحتی قابل مشاهده هستند و حتی اگر آنها را در آنجا تشخیص ندهم، ابزارهای توسعه دهنده در مرورگر با یک متن هشدار دهنده قرمز اطلاع رسانی می‌کنند.
همچنین خطاهایی که مستقیما نمی‌بینیم؛ حتی ابزارهای توسعه دهنده نیز قادر به تشخیص آن نخواهند بود. در غیر این صورت، پروژه بدون هیچ مسئله واضحی همچنان می‌تواند اجرا شود. در این صورت کد CSS شما چگونه به نظر می‌رسد.
2 – خطاهای قالب بندی
این خطاها هستند که باید توسط حرفه‌ای‌ها رفع شوند. اگر در برخی از شرکت‌ها کار می‌کنید یا از راه دور یا حتی به عنوان فریلنسر در پروژه‌های مختلف با یک تیم مشغول هستید، باید کد خود را تمیز کرده و تا جایی که ممکن است حرفه‌ای به نظر برسد (اگر قالب کد زنی استانداردی ندارند).
برای شناسایی و رفع این نوع خطاها چه دستورالعمل‌هایی را باید دنبال کنیم؟
خوب، این یک سوال عالی است که باید در اینجا بپرسید. تعداد زیادی برنامه کاربردی برای خطاهای یک ظاهر طراحی شده وجود دارد که می‌تواند خطاهای شما را تشخیص داده و قبل از اینکه شخص دیگری کد شما را بررسی کند، آن را برطرف می‌کند. بنابراین معمولا هنگام بازبینی کد به شما اطلاع می‌دهد مانند Stylelint و Github Actions.
آنها به سادگی به بررسی کدهای شما (فایل‌های CSS و HTML) می‌پردازند و سپس به شما پیشنهاداتی می‌دهند تا کد شما را قالب بندی کرده و به بهترین شکل ممکن انجام گیرد.
بنابراین، بیایید چند مثال برای چنین خطاهایی ببینیم.
/* You shouldn't do this */
.example-1{
color: #333;
}/* You should do this */
.example-1 {
color: #333;
}ممکن است اکنون از خودتان بپرسید چه تفاوتی بین این دو قطعه کد وجود دارد! بگذارید نتیجه را به شما بگویم. در واقع هیچ تفاوتی وجود ندارد، این همان کد است اما با قالبی متفاوت.
همانطور که مشاهده می‌کنید، در اولین قطعه کد هیچ فاصله‌ای بین example-1. و "}" وجود ندارد اما باید فقط یک فاصله باشد.
و برای کد درون سلکتور که حاوی رنگ 333# است. همانطور که در قطعه کد دوم می‌بینید، باید دو فاصله به جلو برده شود.
/* You shouldn't do this */
.example-2 {color:#333;}/* You should do this */
.example-2 { color: #333; }برای مثال دوم example-2، توجه کنید که بین "{}" و کد داخل آن فاصله‌ای وجود ندارد. این اشتباه است، شما باید آن را همانطور که در قطعه کد دوم نشان داده شده است، انجام دهید. همچنین فاصله بین ":" و مقدار 333# لازم است و در دستورالعمل‌هایی که باید انجام دهید در نظر گرفته می‌شود تا استایل کد شما بدون خطا باشد.
/* You shouldn't do this */
.example-3 {
color: #333;
}
.example-3 span {
color: #777;
}/* You should do this */
.example-3 {
color: #333;
}
/* line-space */
.example-3 span {
color: #777;
}شما همیشه باید در داخل فایل CSS خود فاصله بین سلکتورهای خود بگذارید تا کد سازمان یافته‌تر و راحت‌تر برای گرفتن و دنبال کردن چشم به نظر برسد.
/* You shouldn't do this */
.example-4 {
color: #333;
}
.example-4 span {
color: #777;
}
.example-4 p {
font-size: 1.1em;
}بنابراین بیایید در نظر بگیریم که آخرین سلکتور example-4 p. پایان فایل CSS شما است و شما دیگر استایل دیگری برای افزودن به فایل ندارید. اگر چنین است همیشه باید بعد از آخرین سلکتور (فقط یک خط خالی) در انتهای کد خود یک خط خالی بگذارید.
/* You should do this */
.example-4 {
color: #333;
}
.example-4 span {
color: #777;
}
.example-4 p {
font-size: 1.1em;
}
/* empty line */یک سری خطاهای ظاهری طراحی شده وجود دارد که باید آنها را ببینید و با آنها آشنا باشید، اما این موارد رایج‌ترین آنها هستند. (برای اطلاعات بیشتر به این لینک مراجعه کنید)
این‌ها چیزهایی است که من به عنوان یک توسعه دهنده وب فول استک یاد گرفته‌ام!
ممنون از اینکه ما را همراهی کردید. اگر هرگونه پیشنهاد یا نظری دارید، خوشحال می‌شویم در بخش زیر با ما در میان بگذارید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید