طراحی وب

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

    input .h {
        color:blue;
    }

    .h { 
        color:red;
    }

اولی روی تمام Input هایی اعمال میشه که کلاس h رو داشته باشند. اما دومی به تمام المان‌هایی که کلاس h دارند اعمال میشه

سلام
@rm.8968

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

@ali.bayat
در این حد رو میدونم مهندس جان
منظورم لزوم همچین سلسله مراتبی هستش چون تا نهایت 3 مرحله بگردیم دیگه پراپرتی های اون المان اختصاصی میشه و تکرار رخ نمیده با پراپرتی های قسمتهای دیگر سایت. مثلا دوتا div تو در تو در هدر با دوتا div با همان نام ها این بار در main مسلما متفاوت خواهد بود

@rm.8968

با سلام

فرض کنید المان مورد نظر مه زیر مجموعه 8 div هستش، کلاس h. داره و تمامی اون 8 تا div هم دارای کلاس خاص هستند و در قسمت منو قرار داره.
حالا در جای دیگر سایت چند تا div با کلاس های متفاوت داریم و اخرین المان زیر مجموعه این 8 div دارای کلاس .h هستش و در قسمت اسلایدر قرار داره.

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

@rm.8968
سلام،
تفاوتش رو که هم دوستان ذکر کردند و هم احتمالا خودتون اشراف دارید.

نکته ش اینه که شما باید سعی کنید به عناصر مختلف تون نام کلاس بدین و با نام گذاری کلاس ها تفکیک شون کنید از هم.
کلاس های تو در تو هم توصیه میشه حداکثر دیگه دوتا باشه، نه اینکه 3 یا بیشتر.

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