نحوه استفاده از چند کلاس CSS بر روی یک عنصر تک

شما به یک کلاس CSS تنها برای هر عنصر محدود نمی شوید.

Cascading Style Sheets (CSS) به شما اجازه می دهد ظاهر یک عنصر را با کشیدن به ویژگی هایی که برای آن عنصر اعمال می کنید، تعریف کنید. این صفات می توانند یک یا یک شناسه یا یک کلاس باشند و مانند همه صفات، اطلاعات مفیدی را به عناصری که به آنها متصل است اضافه می کند. بسته به ویژگی که شما به یک عنصر اضافه می کنید، می توانید یک انتخابگر CSS را برای اعمال سبک های بصری لازم مورد نیاز برای دستیابی به ظاهر و احساس برای آن عنصر و وب سایت به طور کلی بنویسید.

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

کلاسهای تک یا چندگانه در CSS؟

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

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

به عنوان مثال، این پاراگراف دارای سه کلاس است:

pullquote featured left "> این متن پاراگراف است

این سه کلاس زیر را در برچسب پاراگراف تنظیم می کند:

  • Pullquote
  • ویژه
  • ترک کرد

فضاهای بین هر یک از این مقادیر را یادداشت کنید. این فضاها چیزی است که آنها را به عنوان کلاس های فردی متفاوت تعریف می کند. به همین دلیل است که نام کلاسها نمیتواند فضایی در آنها داشته باشد، زیرا انجام این کار آنها را به عنوان کلاسهای جداگانه تنظیم میکند.

به عنوان مثال، اگر شما بدون «فضایی» از «pullquote-featured-left» استفاده کردید، این یک مقدار کلاس است، اما مثال فوق، در صورتی که این سه کلمه با یک فضای تفکیک شده باشند، آنها را به عنوان مقادیر منحصر به فرد تنظیم می کند. مهم است که این مفهوم را درک کنید که شما تصمیم می گیرید کدام مقادیر کلاس را در صفحات وب خود استفاده کنید.

هنگامی که مقادیر کلاس خود را در HTML قرار می دهید، می توانید آنها را به عنوان کلاس ها در CSS خود اختصاص دهید و سبک هایی را که می خواهید اضافه کنید اعمال کنید. مثلا.

.pullquote {...}
.ویژه { ... }
p.left {...}

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

توجه داشته باشید - اگر کلاس را به یک عنصر خاص (به عنوان مثال، p.left) تنظیم کنید، هنوز می توانید آن را به عنوان بخشی از یک لیست از کلاس ها استفاده کنید؛ با این حال، آگاه باشید که تنها بر عناصر مورد نظر در CSS مشخص می شود. به عبارت دیگر، سبک p.left فقط به پاراگراف های این کلاس اعمال می شود، زیرا انتخاب شما در واقع برای اعمال آن به «پاراگراف ها با مقدار کلاس« left »است. در مقابل، دو انتخابگر دیگر در مثال یک عنصر مشخص را مشخص نمیکنند، بنابراین آنها را به هر عنصری که از آن مقادیر کلاس استفاده میکنند اعمال میکنند.

مزایای کلاس های چندگانه

کلاس های چندگانه می توانند برای اضافه کردن جلوه های ویژه به عناصر بدون نیاز به ایجاد یک سبک کاملا جدید برای آن عنصر آسان تر شوند.

به عنوان مثال، ممکن است بخواهید که بتوانید عناصر را به سمت چپ یا راست به سرعت شناور کنید . شما می توانید دو کلاس را فقط با شناور سمت چپ و راست بنویسید: سمت چپ؛ و شناور: راست؛ در آنها. سپس، هر زمان که یک عنصر داشتید که باید به سمت چپ حرکت کنید، به سادگی کلاس "left" را به لیست کلاس آن اضافه کنید.

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

اگر سند HTML شما با عناصری که همه نامهای کلاس مانند «قرمز» یا «چپ» دارند پر شود، که نامی است که عناصری را به جای آن چه که تعیین می کند، تعیین می کند، شما از این خط بین ساختار و سبک عبور می کنید. من سعی می کنم که نام کلاس های غیرمنطقی خود را تا حد ممکن به این دلیل محدود کنم.

کلاس های چندگانه، semantics و جاوا اسکریپت

یکی دیگر از مزیت استفاده از کلاس های چندگانه این است که به شما امکان تعامل بیشتر را می دهد.

شما می توانید کلاس های جدید را به عناصر موجود اعمال کنید با استفاده از جاوا اسکریپت بدون حذف هر یک از کلاس های اولیه. شما همچنین می توانید از کلاس ها برای تعریف معانی عنصر استفاده کنید . این بدان معنی است که شما می توانید در کلاس های اضافی برای تعریف آن عنصر به معناشناسی اضافه کنید. این چگونه Microformats کار می کند.

معایب کلاس های چندگانه

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

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

شما باید از خصوصیات آگاه باشید، حتی با ویژگی های اعمال شده به آن عنصر!

با استفاده از یک ابزار مانند ابزار وب مستر در Chrome، شما به راحتی می توانید ببینید که چگونه کلاس های شما بر روی سبک های شما تاثیر می گذارد و از این مشکل سبقت ها و ویژگی های متضاد جلوگیری می شود.

مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در 7/7/17