آموزش رایگان برنامه نویسی در کانال یوتیوب yasharhabibimedia
سبد خرید
0

هیچ محصولی در سبد خرید نیست.

۳۰ تا از بهترین نکات و ترفندهای css

30 تا از بهترین نکات و ترفندهای css

۳۰ تا از بهترین نکات و ترفندهای css

مطلب پیشنهادی: آموزش کامل و جامع جاوااسکریپت
css برای استایل‌دهی تگ‌های html استفاده میشه. کار با css ریزه‌کاری‌های زیادی داره. به همین دلیل باید نکات و ترفندهای css رو بدونین. در این مطلب میخوام ۳۰ تا از بهترین نکات و ترفندهای css رو بهتون معرفی کنم. این نکات خیلی کاربردی هستن و میتونن سطح کدنویسی شما را تا حد زیادی بهبود بدن.

نکته ۱- از پیش پردازنده ها استفاده کنید.

استفاده از پیش‌پردازنده‌ها توی css به شما کمک میکنه تا کدهای تکراری کمتری بنویسید و کارتون رو سرعت بدین. پیش پردازنده‌ها ابزارهای زیادی دارن که میتونید از اونا استفاده کنید و کدهاتون رو به صورت بهینه و ماژولار بنویسید. SASS و LESS دو پیش پردازنده معروف و محبوب هستن که نسبت به بقیه پیش پردازنده‌ها استفاده بیشتری دارند. به غیر از این دوتا پیش پردازنده Styleus هم استفاده زیادی داره. دلیل محبوبیت این پیش پردازنده‌ها این هست که برای استایل‌دهی صفحات روش جدیدی رو معرفی نمی‌کنند. بلکه همون css هستن با سینکس و ویژگی‌های اضافی.

نکته ۲ – استایل های سراسری و محلی را از هم جدا کنید.

استایل‌های سراسری و محلی رو با یک مثال براتون توضیح میدم. در استایل‌دهی وقتی بخوایم یک ویژگی یا استایل رو به همه تگ‌ها یا تعداد زیادی تگ بدیم، اون میشه استایل سراسری و اگر به یک تگ خاصی استایل بدیم، میشه استایل محلی. برای این که کدها بهتر و مرتب تر بشن، توصیه میشه که اون دسته از استایل‌هایی که عمومی یا سراسری هستند رو از استایل محلی جدا کنید.

شما برای جدا کردن استایل‌های سراسری می تونید از دو روش استفاده کنید. روش اول این هست که در اول فایل تعریف کنید. روش دوم هم این هست که استایل‌های سراسری رو کلا توی فایل جدا بزارید. استفاده از این نکته مخصوصا وقتی که از پیش پردازنده‌ها استفاده میکنید، خیلی مهم هست.

نکته ۳- استایل‌های خود را ماژولار کنید.

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

نکته ۴- Lazy load

Lazy load یک اصطلاح است. معنی تحت الفظی آن لود کند است. منظور از این عبارت اینه که یک سری از منابع استایل، در هنگام لود شدن به عنوان استایل‌های غیرضروری شناخته بشن و بعد به وقتش وقتی نیاز بود لود بشن. استفاده از این نکته باعث افزایش سرعت لود شدن سایت میشه. روش‌های مختلفی برای استفاده از Lazy load در css وجود داره که خیلی بهتر از استفاده از ابزارهایی مثل webpack هستش. برای مثال شما خودتون میتونید با جاوااسکریپت لود شدن استایل‌ها را کنترل کنید و به اصطلاح css loader خودتون رو بسازید. یا اینکه از تگ‌های link استفاده کنید.

نکته ۵- خاص باشید اما نه خیلی !

سعی کنید توی کدنویسی خاص باشید و سبک خودتون رو داشته باشید اما نه اونقدری که کدهاتون زیاد بشه و اضافه کاری کنید. چون این طوری عملکرد شما کاهش پیدا میکنه. شاید از خودتون بپرسید که کجا باید خاص باشیم؟ منظور من از این نکته این هست که وقتی دارید استایل‌دهی میکنید برای انتخاب سلکتور خودتون از روش‌های خاصی استفاده کنید. مثلا اول اسم اون بخش و بعد کلاس یا id تگ رو بنویسید. همچنین توی نام‌گذاری تگ‌ها از اسم‌های مشخص استفاده کنید. مثلا اگر دارید فوتر سایت رو درست می‌کنید، از نام‌هایی مثل footer-section استفاده کنید. یا مثلا برای منوی سایت میتونید از اسم‌هایی مثل main-menu استفاده کنید.

نکته ۶- css رو مثل مروگر بخونید.

به کد زیر دقت کنید

nav ul li a

شما باید این کد رو از چپ به راست بخونید. چون مرورگر هم این طوری اون رو می‌خونه . طبق این کد، مرورگر دنبال تگ‌هایa میگرده. اما فقط اونایی رو پیدا میکنه که داخل تگ‌های li باشن . بعد از اون از بین liهایی که پیدا کرده، فقط اونایی رو انتخاب میکنه که داخل ul باشن. در نهایت هم از بین ul هایی که پیدا کرده فقط اونایی که داخل nav هستند رو انتخاب میکنه و به همین شکل تگ‌ها رو فیلتر میکنه.

نکته ۷- برای عملکرد در استایل‌دهی به ساختار html توجه کنید.

همیشه وقتی میخواین استایل‌دهی کنید به ساختار html خودتون توجه کنید. مثلا اگر میخواین یک تگ خاصی رو استایل‎دهی کنید، می‎تونید برای پیدا کردنش، کدی مشابه کد نکته قبل رو بنویسید. ولی اگر قصد داشتید که به همه تگ‎های صفحه html خودتون استایل بدین، می‎تونید فقط a رو بنویسید. اینطوری استایل روی تمامی تگ‌های لینک اعمال میشه. یکی از مشکلات تازه کارها توی css هم همینه. به تو در تو بودن تگ‌ها دقت نمیکنن و مرورگر نمیتونه تگ رو پیدا کنه.

نکته ۸– از استایل‎های inline استفاده نکنید.

یکی دیگه از بهترین نکات و ترفندهای css ، این هست که نباید از استایل‌های درون خطی استفاده کنید. یک دلیل برای عدم استفاده از استایل‌های درون خطی یا inline این هست که شما باید کدهای html و css رو از هم جدا کنید. یعنی این که هرکدوم توی فایل جداگانه باشن. مزیت این کار راحتی توسعه پروژه در مراحل بعدی هست.

نکته ۹- از نوشتن !important خودداری کنید.

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

نکته ۱۰- در نوشتن کدهای css تداوم داشته باشید.

تداوم در یک کار، کلید اصلی موفقیت است. شما باید همیشه کد css بنویسید تا بتوانید مهارت خودتون رو افزایش بدین. زیاد کد بزنید تا مشکلات خودتون رو برطرف کنید. با زیاد تمرین کردن میتونید سبک خودتون رو داشته باشید. با انواع روش‌های نام گذاری آشنا میشید. کیفیت کارتون رو زیاد میکنید و خودتون رو ارتقا میدین.

نکته ۱۱- از سیستم طراحی استفاده کنید.

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

نکته ۱۲- کوتاه کد بزنید.

نوشتن کدهای زیاد هیچ وقت نشون نمیده که شما حرفه‌ای هستید. وقتی که کوتاه کد مینویسید، نشون میده که شما همه چیز رو خوب درک کردید و بهینه‌ترین روش‌ها رو استفاده میکنید. کوتاه کد نوشتن باعث میشه که به راحتی بتونید کدهاتون رو تغییر بدین. برای این که بتونید کوتاه کد بنویسید باید زیاد کد بزنید.

نکته ۱۳- استایل های مشترک رو ترکیب کنید.

نکته سیزدهم از بهترین نکات و ترفندهای css این هست که از تکرار کردن زیاد کدها خودداری کنید. سعی کنید کدهایی که برای تعداد زیادی از تگ‌ها مشترک هستن رو باهم بنویسید. به این کدها، common گفته میشه که به معنی مشترک یا رایج هستش.

نکته ۱۴- ترفندهای رایج رو به کلاس‌های سودمند تبدیل کنید.

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

نکته ۱۵- از واحدهای نسبی استفاده کنید.

برای تعیین اندازه‌هایی مثل اندازه فونت، margin و padding از پیکسل می‌تونید استفاده کنید. ولی بهتر این هست که از واحدهای نسبی استفاده کنید. واحدهایی مثل rem، %، em و غیره. واحدهایی مثل پیسکل ثابت هستند. وبسایت‌ها هم در دستگاه‌های مختلفی استفاده میشن که هر کدوم اندازه صفحه متفاوتی داره. بنابراین سایت شما باید انعطاف پذیری خوبی داشته باشه.

نکته ۱۶- کامنت گذاری کنید.

کامنت‌گذاری کار خیلی خوبیه. قبولش کنید! کامنت نوشتن چندین مزیت داره. باعث میشه که بعدا حین مرور کدها یادتون بیاد که هر کد رو برای چی نوشتید. همچنین به هم تیمی‌های خودتون کمک می‌کنه که بهتر کدهاتون رو متوجه بشن.

نکته ۱۷- لودکردن فونت‌ها

برای لودکردن فونت‌ها روش‌های مختلفی وجود داره. متونید از @font-face استفاده کنید. میتونید به صورت مستقیم لینک رو توی html بذارید. از هر روشی که خواستید میتونید استفاده کنید. ولی اگر بیش از ۱ فونت استفاده میکنید، بهتر هست از تگ link استفاده کنید. ولی اگه از @font-face استفاده میکنید، فراموش نکنید که در اول فایل باید قرارش بدین. درضمن سعی کنید فونت‌های SVG رو هم یاد بگیرید و امتحانشون کنید.

نکته ۱۸- از فونت‌های زیاد استفاده نکنید.

سعی کنید توی سایتتون از یک فونت استفاده کنید. استفاده زیاد از فونت‌ها گیج کننده‌اس و اصلا توصیه نمیشه. وقتی از فونت‌های زیادی استفاده کنید، رابط کاربری شما بعد از لود شدن فونت‌ها، لود میشه.

نکته ۱۹- استایل‌ها رو فشرده‌سازی کنید.

برای افزایش سرعت لودکردن سایت می‌تونید استایل‌ها رو فشرده کنید. فشرده‌کردن فایل‌های css باعث کاهش حجم فایل‌ها و افزایش سرعت پردازش سایت میشه.

نکته ۲۰ – ویژگی outline

ویژگی outline رو با none مقداردهی نکنید. بلکه سعی‌کنید بهش استایل بدین. حتی اگر شکل ظاهریش رو دوست ندارید، اونو مطابق با سایت خودتتون استایل‌دهی کنید.

نکته ۲۱- فقط از کتابخانه‌های ضروری استفاده کنید.

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

نکته ۲۲- از دابل کوتیشن استفاده کنید.

هروقت خواستید از رشته استفاده کنید، مثلا برای قرار دادن عکس پس زمینه یا url در css، از دابل کوتیشن استفاده کنید. چرا که استفاده از سینگل کوتیشن خیلی وقتا باعث ایجاد مشکل میشه و استفاده از اون خیلی توصیه نمیشه.

نکته ۲۳- انیمیشن‌ها رو در آخر فایل بزارید.

اگر توی سایتتون می‌خواین از انیمیشن‌ها و تگ @keyframes استفاده کنید، سعی کنید که در آخر فایل اونو قرار بدین. این کار باعث میشه که مرورگر اول تمام استایل‌های شما رو لود کنه و بعد در آخر انیمیشن‌ها رو اجرا میکنه.

نکته ۲۴- از id زیاد استفاده نکنید.

id رو در همه جا ننویسید. فقط برای جاهایی مثل لوگوی سایت یا کانتینرها بنویسید. برای اجزایی که قراره دوباره استفاده بشن از id استفاده نکنید. از id برای جاهایی استفاده کنید که میخواین به اون جا لینک بدین. مثلا توی طراحی اسلایدر سایت.

نکته ۲۵- از خوانایی و مرتب بودن کدهای css مطمئن بشید.

خیلی مهمه که کدهای شما به صورت منظم و مرتب نوشته شده باشن. توی css استایل‎هایی که آخر میان، استایل قبلی رو بازنویسی می‌کنن تا تغییر می‌‎دن. پس باید کدها و استایل‌ها رو به صورت منظم بنویسید. اینطوری دیگه مجبور به استفاده از !important هم نمیشید.

نکته ۲۶- نام‎گذاری رنگ‌ها

برای نام‌گذاری رنگ‎ها از اسم اونا استفاده نکنید. از نام هگزا استفاده کنید. مثلا ننویسید red، blue و… . خیلی از رنگ‎های هگزا وجود دارن که نامی براشون وجود نداره. سعی کنید که ترکیب رنگ‎های سایت رو متناسب انتخاب کنید.

نکته ۲۷- کدهای اضافی رو پاک کنید.

بعد از این که کار نوشتن کدها تمام شد، یکبار دیگر برگردید و کدها رو بررسی کنید. کدهای اضافی و غیرقابل استفاده رو حذف کنید تا کدهاتون بهینه بشه. اگر نمی‌دونید که به کدی نیاز دارید یا نه، می‌تونید از ابزارهایی که مرورگر داره استفاده کنید.

نکته ۲۸- اجازه دهید محتوا اندازه را مشخص کند.

به جای استفاده از عرض و ارتفاع، بزارید محتوا اندازه رو مشخص کنه. شما میتونید به جای width و height از padding و max-width یا سایر موارد استفاده کنید. البته گاهی پیش میاد که کارفرما دقیقا اندازه‌ها را برای شما مشخص میکنه که در این جور موارد باید اون طرح رو پیاده کنید.

نکته ۲۹ – ریسپانسیو کردن

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

نکته ۳۰ – اعتبار سنجی

وقتی که کدهای css رو می‌نویسید، حتما اون رو اعتبار سنجی کنید. تا مطمئن بشید که کارتون استاندارد و درست انجام شده. سازمان w3 ابزارهایی برای اعتبار سنجی فراهم کرده که میتونید از اونا استفاده کنید و مطئمن بشید که دستورالعمل‌های لازم رو رعایت کردید.

مرسی که با من همراه بودید و وقت گذاشتید، اگر این مطلب رو دوست داشتید بهش ستاره بدید و امتیاز کسب کنید و همین طور حتما این پایین نظرتون رو ثبت کنید و البته واسه اونم امتیاز میگیرید. ممنون

امتیاز 4.375 از 8 رای

20

من یاشار حبیبی 15 سال تو حوزه برنامه نویسی وب در حال فعالیت هستم و اینجا قراره تجربیاتم رو باشما به اشتراک بزارم و باهم کلی چیز یادبگیریم و لذت ببریم

دیدگاه کاربران
  • آواتار
    sahar.shakibafard 30 اردیبهشت 1400 / 3:53 ب.ظ

    سلام، وقت بخیر.
    در مواردی که باید یک psd را پیاده‌سازی کنیم، می‌توان اندازه‌ها را که با واحد pt و برابر با پیکسل هستند در فتوشاپ دید و استفاده از واحد پیکسل، آسان‌تر به نظر می‌رسد. چطور می‌توان واحد پیکسل را به صورت دقیق و برابر به em و rem و % تبدیل کرد؟

    • یاشار حبیبی 31 اردیبهشت 1400 / 10:40 ق.ظ

      سلام وقت بخیر
      شما طرحتون رو با px میزنید ولی برای تبدیلش به کد معادل em یا rem اون اندازه هارو به کار می برید
      برای تبدیل این اندازه ها توی اینترنت کلی سایت و ابزار هست کافیه سرچ کنید convert px to em
      و دیگه اینکه در زمان طراحی هم طبق استانداردهای طراحی باید برای سایزهاتون یه ضریبی رو رعایت کنید
      یعنی مثلا میگید کمترین اندازه من ۴px هست بعد باقی اندازه هارو ضریب ۴ در نظر میگیرید پیاده سازی همچین طرحی خیلی آسون میشه چون این ضریب رو توی کدتون هم رعایت می کنید

  • آواتار
    abolffff1383 2 خرداد 1400 / 10:40 ب.ظ

    عالی

  • mehrdad.alibakhshi 3 خرداد 1400 / 11:23 ق.ظ

    خیلی خوب بود

  • mohsenyavari713 3 خرداد 1400 / 8:33 ب.ظ

    👌👌

  • arash pourrahim 7 خرداد 1400 / 1:46 ب.ظ

    بسیار نکات عاااالی بود . ممنون از وقتی که گذاشتی

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

توسط
تومان