تسلط بر CSS می تواند تمرین و تلاش زیادی را بطلبد. با اجتناب از این اشتباهات رایج، بهترین شانس موفقیت را به خود بدهید.
کار با Cascading Style Sheets (CSS) برای مبتدیان می تواند سخت باشد. با استفاده از CSS، می توانید ساختار، به روز رسانی و ظاهر برنامه خود را حفظ کنید. اما این زبان به مهارت هایی برای دستکاری صفحات HTML برای به دست آوردن طرح بندی مورد نظر نیاز دارد.
در اینجا چند اشتباه وجود دارد که هنگام کار با CSS باید از آنها اجتناب کنید. آنها در وقت شما صرفه جویی می کنند و روند توسعه شما را آسان می کنند.
1. استفاده از px برای اندازه فونت
واحد “px” نشان دهنده پیکسل ها است. می توانید از آن برای بیان طول های مختلف در یک صفحه وب استفاده کنید، از عرض و ارتفاع یک عنصر گرفته تا اندازه فونت آن.
با این حال، px طراحی شما را به اندازه ثابت برای همه صفحه‌ها قفل می‌کند. یک تصویر در px می‌تواند تمام عرض یک صفحه و تنها بخش کوچکی از صفحه دیگر را اشغال کند. اگر عنصر متناسب تری می خواهید، از اندازه گیری های نسبی مانند rem یا درصد (%) استفاده کنید.
بهترین اندازه گیری نسبی برای استفاده رم است. این واحد به اندازه فونت عنصر ریشه اشاره دارد که خواننده اغلب می تواند در تنظیمات مرورگر خود تنظیم کند. در مثال زیر می توانید تاثیر px و rem را بر روی یک عنصر ببینید:
<!DOCTYPE html>
<HTML>
<head></head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
شما می توانید اندازه فونت در این سند را با استفاده از واحدهای px با CSS زیر استایل دهید:
h1 {
font-size: 50px;
}
h2 {
font-size: 30px;
}
p {
font-size: 15px;
}
صفحه به دست آمده زمانی قابل قبول به نظر می رسد که آن را در یک صفحه بزرگ مشاهده می کنید:
اما در یک صفحه نمایش کوچکتر مانند یک تلفن قابل ارائه به نظر نمی رسد:
بعد، rem را روی همان محتوا اعمال کنید. اندازه فونت پایه را در عنصر html مشخص کنید و سایر عناصر را با استفاده از rems اندازه بگیرید، همانطور که در زیر نشان داده شده است:
html {
font-size: 16px;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
به تفاوت بین صفحه نمایش بزرگ و کوچک توجه کنید. با rem، محتوا بدون در نظر گرفتن اندازه صفحه نمایش بهتر مقیاس می شود. عناصر هرگز از اندازه صفحه نمایش تعیین شده تجاوز نمی کنند. به همین دلیل بهتر است از طول نسبی به جای پیکسل استفاده کنید.
در صفحه دسکتاپ:
در یک صفحه کوچک، متن در واحدهای رم همچنان قابل خواندن است:
2. قرار دادن تمام سبک های خود در یک فایل
استفاده از یک فایل CSS برای یک پروژه بزرگ می تواند آشفتگی ایجاد کند. شما یک فایل با خطوط طولانی کد خواهید داشت که هنگام به روز رسانی گیج کننده خواهد بود. سعی کنید از فایل های مختلف برای برگه های سبک CSS برای اجزای مختلف استفاده کنید.
به عنوان مثال، شما می توانید فایل های مختلفی برای ناوبری، هدر و پاورقی داشته باشید. و دیگری برای بخش هایی از بدن. جداسازی فایل‌های CSS به ساختار برنامه شما و تشویق قابلیت استفاده کد کمک می‌کند.
3. استفاده نامناسب از CSS درون خطی
در وانیلی CSS می‌توانید مانند چارچوب‌های CSS مانند Bootstrap و TailwindCSS، استایل‌ها را در صفحات HTML بنویسید. CSS درون خطی به شما امکان می دهد یک سبک منحصر به فرد را به یک عنصر HTML اعمال کنید. از ویژگی style عنصر HTML استفاده می کند.
کد زیر نمونه ای از CSS درون خطی است.
<h2 style="color:green;">This is a Green Heading</h2>
<p style="color:red;">This is a red paragraph.</p>
متن به این صورت ظاهر می شود:
با این حال، HTML فقط با CSS درون خطی می تواند کثیف باشد. از آنجایی که مکان دیگری برای CSS وجود ندارد، تمام CSS در همان فایل HTML وجود دارد. شلوغ به نظر می رسد. ویرایش چنین فایلی دشوار است، به خصوص اگر کد شما نباشد.
همچنین با CSS درون خطی باید برای هر عنصر کد بنویسید. این باعث افزایش تکرار و کاهش استفاده مجدد از کد می شود. همیشه از ترکیبی از شیوه نامه های خارجی و CSS درون خطی برای استایل دادن به صفحات وب خود استفاده کنید.
4. استفاده بیش از حد !مهم
در CSS، قانون !important اهمیت بیشتری به یک ویژگی/مقدار می بخشد. سایر قوانین یک ظاهر طراحی شده برای آن ویژگی در آن عنصر را لغو می کند.
شما فقط باید چند قانون !important در کد خود داشته باشید. فقط در صورت لزوم از آن استفاده کنید. هیچ فایده ای ندارد که کد بنویسیم و سپس آن را لغو کنیم. کد شما در هنگام اجرا بر روی برخی از دستگاه ها نامرتب به نظر می رسد و باعث ایجاد مشکل می شود.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p> I am orange </p>
<p class="my-class"> I am green </p>
<p id="my-id"> I am blue. </p>
</body>
</html>
CSS:
#my-id {
background-color: blue;
}
.my-class {
background-color: green;
}
p {
background-color: orange !important;
}
نتیجه به این صورت است:
5. عدم پیروی از قراردادهای نامگذاری
CSS دارای قوانین نامگذاری است که توسعه دهندگان را در مورد نحوه نوشتن کد استاندارد راهنمایی می کند. اگر در تاریخ آینده فایل CSS را اشکال زدایی کنید، ضروری است.
یکی از این استانداردها استفاده از خط تیره برای جداسازی کلمات گروه بندی شده است. دیگری نامگذاری یک انتخابگر با توجه به کاری که انجام می دهد. بنابراین هر کسی که به آن نگاه می کند مجبور نیست حدس بزند. همچنین خواندن، نگهداری و اشتراک گذاری کد را آسان تر می کند. مثلا:
به جای این:
.image1 { margin-left: 3%; }
اینجوری بنویس:
.boy-image { margin-left: 3%; }
وقتی به شیوه نامه نگاه می کنید، دقیقاً می دانید که کد مربوط به کدام تصویر است. راهنمای سبک HTML/CSS گوگل بسیاری از قراردادها را فهرست می کند که هر توسعه دهنده ای باید بداند.
6. گذاشتن کد بدون نظر
نوشتن نظر کم ارزش ترین مهارت در برنامه نویسی است. بسیاری از مردم فراموش می کنند که برای توضیح کد خود نظر بنویسند. اما باعث صرفه جویی در زمان می شود. نظرات برای خواندن و حفظ کد ضروری هستند.
از آنجایی که CSS ساختار ضعیفی دارد و هر کسی می تواند قراردادهای خود را توسعه دهد، نظرات بسیار مهم هستند. استفاده از نظرات با ساختار مناسب برای توضیح شیوه نامه خود تمرین خوبی است. می توانید نظراتی بنویسید که بخش هایی از کد و کارهایی که انجام می دهند را توضیح دهد.
/* video elements need space to breathe */
.video {
margin-top: 2em;
}
/* styling the hero section */
.salutation {
margin-top: 1em;
}
7. شکست در طراحی از قبل
بسیاری از مردم این کار را انجام می دهند، اما شروع برنامه نویسی بدون برنامه اشتباه بزرگی است. CSS تعیین می‌کند که ساختار front-end شما چگونه است. طراحی چیزهای زیادی در مورد مهارت های برنامه نویسی شما می گوید.
طراحی سایت شما چشم انداز شما و منابع مورد نیاز برای رسیدن شما را به آنجا روشن می کند. یک تصویر ذهنی از پروژه خود داشته باشید. سپس آن را روی کاغذ طراحی کنید یا از یک جعبه ابزار طراحی مانند Canva برای تجسم آنچه می خواهید استفاده کنید.
هنگامی که تصویر کاملی از پروژه دارید، تمام منابع خود را جمع آوری کرده و شروع به کدنویسی کنید. این باعث صرفه جویی در وقت و کار اضافی شما می شود.
چرا باید این توصیه ها را در نظر بگیرید؟
اگر در حال توسعه برنامه های کاربردی در وب هستید، از CSS استفاده خواهید کرد. کار خوب با CSS نیاز به تمرین و پیروی از قراردادهای استاندارد دارد. کنوانسیون ها نه تنها کد شما را خوانا می کنند بلکه قابل نگهداری هستند.
نوشتن کد استاندارد باعث صرفه جویی در وقت و تلاش شما می شود. زمانی که برای قالب‌بندی قسمت جلویی صرف می‌کردید، می‌توانید برای ویژگی‌های پیچیده‌تر صرف کنید. همچنین تضمین می کند که می توانید از کد استفاده مجدد کرده و آن را با دیگران به اشتراک بگذارید. با پیروی از قراردادهای تعیین شده کد بهتری بنویسید و توسعه دهنده بهتری شوید.