چند نکته جهت کدنویسی بهتر در CSS

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

لطفا از تکنولوژی‌های قدیمی استفاده نکنید !

هنوز هم متاسفانه در بین برخی دوستان شاهد این موضوع هستیم که باوجود تکنولوژی‌های کاربردی و جذاب در بخش‌های Layout صفحات همچون تکنولوژی‌های Flex و CSS Grid ، بازهم از تکنولوژی float که متعلق به حداقل یک دهه پیش است استفاده می‌شود . باتوجه به اینکه درحال حاضر تمامی فریمورک‌های طراحی همچون Bootstrap یا Tailwind تماما از تکنولوژی‌های Flex و CSS Grid استفاده می‌کنند لذا معقولانه نیست که ما نیز دانش خودمان را بروز نکنیم .

همانند تکنولوژی‌های Flex و CSS Grid که برای تنظیم چیدمان و اصطلاحا Layout صفحات وب استفاده می‌شوند ، موارد مشابه دیگری نیز وجود دارند که هنوز بسیاری از طراحان در آن زمینه‌ها نیز خود را بروز نمی‌کنند و اصرار دارند تا از همان روش‌ها و متدهای قبلی استفاده کنند . برای مثال یک نمونه دیگر درمورد استفاده از دستورات جامع بجای دستورات مشتق است که در ادامه توضیح خواهیم داد .

از دستورات جامع بجای دستورات مشتق استفاده کنید !

در زبان طراحی CSS در بسیاری از موارد یک دستور جامع وجود دارد که البته این دستور جامع دارای برخی مشتقات است و این امکان را به شما می‌دهد که تنها از یکی از خصوصیات این دستور استفاده کنید . برای مثال یکی از دستورات جامع به شکل زیر است :

border : 1px solid #ddd;

توسط این دستور یک حاشیه در اطراف المان موردنظر با ضخامت 1 پیکسل و با استایل خطی یا همان solid و کد رنگی ddd که یکی از طیف رنگ‌های طوسی است ایجاد خواهد شد . اما در شرایطی دیگر می‌توان دستور بالا را به شکل زیر نیز نوشت :

border-style:solid;
border-width:1px;
border-color:#ddd;

خروجی این دستور نیز دقیقا همان خروجی دستور بالا خواهد بود . پس برای داشتن یک کد CSS بهتر و خواناتر ، دقت داشته باشید که درصورت امکان به یکپبارچه سازی کد ، حتما از دستور کلی استفاده کنید . البته لازم است تا تمامی دستورات مشتق از یک دستور را بشناسید . برای مثال شاید در بخشی از سایت لازم باشد تا تنها ضخامت حاشیه بخش خاصی را تغییر دهید ، در این حالت باید تنها از دستور border-width با مقدار دلخواه استفاده کنید . این بخش یکی از مهم‌ترین موارد در کدنویسی بهینه با CSS است .

از دستور important با دقت استفاده کنید !

بسیاری از طراحان قالب با CSS زمانی که کد آنها دارای مشکلی است و به هر طریقی رفع نمی‌شود ، نهایتا پس از ساعت‌ها کلنجار رفتن ، با یک دستور important  کار را تمامی می‌کنند درحالی که باید تا پیداکردن مشکل صبور بود ! چراکه همین مشکل مسبب بهترین تجربه برای شما خواهد بود .

.meta{
	height:200px !important;
}

دستور important باید درجای مناسب خود و باتوجه به دوگانگی اسم کلاس‌ها و همچنین تقدم عملکرد کدها استفاده شود ، لذا از این دستور برای حل مشکلات خود استفاده نکنید چراکه بسادگی خواهید دید در سایر قسمت‌های پروژه شما به دلیل همین important مشکل وجود دارد .

بجای تصاویر png از آیکون فونت استفاده کنید

یکی از مواردی که هنوز هم شاهد آن هستیم اینجاست که برخی طراحان سایت برای آیکون شبکه‌های اجتماعی یا آیکون لاگین و جستجو و … از تصاویر با فرمت png استفاده می‌کنند . دقت داشته باشید که هر تصویر باید در داخل یک تگ img قرار گیرد و این تگ img یک درخواست بسمت سرور است و درحال حاضر که سئو وب سایت‌ها بسیار اهمیت پیدا کرده است ؛ تلاش بر این است که تعداد و حجم تصاویر بسیار کم و بهینه شود .

آیکون فونت‌ها در سایت خود ما نیز به وفور وجود دارد . آیکون فونت‌ها دارای یک فایل با فرمت CSS و یک خانواده فونت هستند که به پروژه شما اضافه خواهند شد ، و سپس می‌توانید از چندهزار آیکون استفاده کنید . امروزه تمامی سایت‌هایی که در سطح وب وجود دارد برای قسمت‌هایی که نیاز به آیکون دارند از آیکون فونت استفاده می‌کنند . آیکون فونت‌های bootstrap و همچنین fontAwesome از خانواده جذاب آیکون فونت‌ها هستند .

از تصاویر باکیفیت استفاده کنید

امروزه اهمیت تصاویر در سایت‌ها بسیار زیاد است و خوشبختانه منابع رایگان یا پرمیوم جهت دانلود تصاویر مثل freepik بسیار فراوان هستند . شاید برخی از این منابع به دلیل تحریم و … توسط نت داخلی قابل دسترسی نباشند اما بازهم می‌توان از آنها استفاده کرد لذا باید کمی سلیقه به خرج داده و دنبال تصاویر با کیفیت مناسب باشید تا قالب شما نمایش درستی در ظاهر خود داشته باشد . تصاویر webp ازجمله تصاویر باکیفیت بالا و حجم کم هستند که می‌توانید برای پروژه خودتان از آنها کمک بگیرید .

از اسامی مناسب استفاده کنید !

برای نام‌گذاری اسامی کلاس یا آیدی جهت مشخص کردن المان‌های html ، از اسامی مناسب و مرتبط با همان قسمت استفاده کنید . برای مثال اگر در حال کدنویسی استایل برای بخش هدر سایت هستید از کلمه header در ابتدای اسامی کلاس‌های خود استفاده کنید تا خوانایی و درک آن برای خودتان نیز ساده‌تر باشد . هر اندازه که اسامی شما با مفهوم باشد ، پروژه شما نیز حرفه‌ای‌تر است .

حتما کدهای خود را مرتب کنید !

بعنوان یک طراح و فعال در زمینه CSS باید حتما کدنویسی خود را تمیز و مرتب انجام دهید ! حتما پس از نوشتن کدهای CSS ، با استفاده از ابزارهای داخل نرم افزار ادیتور و یا سایت های آنلاین ، کدهای خود را مرتب کنید . برای نمونه می‌توانید از سایت زیر استفاده کنید :

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

از یک یا نهایتا دو فونت استفاده کنید !

یکی از موارد مهم در سایت شما موضوع فونت سایت است . اگر مقاله زیر را مطالعه کرده باشید :

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

اما گاها فونت اصلی پروژه شما ( در پروژه‌های زبان فارسی ) وزن مناسبی برای زبان انگلیسی ندارد و شما ملزم هستید درصورتی که از متون انگلیسی داخل سایت استفاده می‌شود ، یک فونت انگلیسی با وزن مناسب نیز به پروژه اضافه کنید . اما برای مثال در بخش فارسی ، شما نیازی به استفاده از دو فونت با وزن مختلف از خانواده مختلف ندارید و سعی کنید توسط استایل‌هایی مثل Bold و … فونت خودتان را استایل بخشید .