اگر قصد دارید از CSS استفاده کنید روی به طور منظم باید درک درستی از اینکه ویژگی چیست و چگونه اعمال می شود را ایجاد کنید.

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

اگر تا به حال تکیه کرده اید روی کلمه کلیدی مخوف !important برای هک کردن CSS شما، پس این مقاله برای شما مناسب است.

چگونه یک مرورگر CSS را می خواند

برای اینکه پایه های خود را محکم کنید، باید بدانید که مرورگر چگونه CSS را می خواند و قوانین چگونه لغو می شوند.

ابتدا مرورگر یک شیوه نامه را از بالا به پایین می خواند به این معنی که با این کد:

/*Line 10*/
ul li a {
 color: red;
}

/*Line 90*/
ul li a {
 color: blue;
}

قانونی که در خط 10 مشخص کرده‌اید لغو می‌شود و آن تگ لنگر آبی خواهد بود زیرا مرورگر قوانین را در پایین‌تر CSS شما در نظر می‌گیرد تا اولویت بیشتری داشته باشد.

این نیز با سفارش واقعی شما کار می کند import فایل های css شما، به عنوان مثال:

<link href="https://www.webdesignerdepot.com/2013/04/how-to-use-css-specificity/css/style.css" rel="stylesheet">
<link href="https://www.webdesignerdepot.com/2013/04/how-to-use-css-specificity/css/custom.css" rel="stylesheet">

از آنجایی که شما custom.css را بعد از style.css هر چیزی را که در style.css می نویسید قرار می دهید (در حال حاضر، وزن انتخابگرها تخفیف داده می شود) نادیده گرفته می شود و جایگزین آنچه در custom.css است، این تکنیک اغلب استفاده می شود. توسط سازندگان تم به کاربر اجازه می دهد تا بدون تغییر فایل اصلی، سبک های خود را اضافه کند. (با این حال توجه داشته باشید که custom.css به طور کامل جایگزین style.css نمی شود، فقط قوانینی که به طور خاص لغو شده اند جایگزین می شوند.)

اختصاصی

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

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

• شناسه ها 100 امتیاز دارند.
• ارزش کلاس ها 10 امتیاز است.
• عناصر ارزش 1 امتیاز دارند.

با دانستن این موضوع، اگر از یک انتخابگر مانند آن استفاده می کنید:

#content .sidebar .module li a

وزن کل آن 122 امتیاز ( 100 + 10 + 10 + 1 + 1 ) است که یک شناسه ، دو کلاس و دو عنصر است.

چیز هایی برای به یاد آوردن

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

وزن ندارد

ul li a {
 color: red;
}

مثال ها

.content #sidebar {
 width: 30%;
}

این انتخابگر وزن 3 را نگه می دارد، به این معنی که فقط با اضافه کردن یک کلاس در جای دیگری، می توانید آن را لغو کنید.

.post p:first-letter {
 font-size: 16px;
}

این انتخابگر دارای وزن 110 امتیاز است که عمدتاً به دلیل شناسه ای است که 100 امتیاز از مجموع 110 امتیاز را اضافه می کند.

p {
font-family: Helvetica, arial, sans-serif;
}

این انتخابگر دارای وزن 12 امتیاز است، زیرا عنصر شبه: حرف اول فقط 1 امتیاز دارد و همچنین تگ p نیز وزن دارد. page این سلکتور تنها 1 امتیاز وزن دارد، این نوع سلکتور باید در بالای آن استفاده شود روی وقتی سبک های اساسی را بعداً علامت گذاری می کنید

ممکن است برای مناطق خاص لغو شود.

#title {
 font-weight: bold;
}

.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {
 font-weight: normal;
}

همیشه به خاطر داشته باشید که برای نادیده گرفتن یک انتخابگر ID باید 256 کلاس برای همان عنصر بنویسید، مانند:

فقط به این ترتیب انتخابگر دوم با استفاده از ID شکست خواهد خورد.

نتیجه

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

!مهم؟ در نظرات به ما اطلاع دهید. تصویر/تصویر کوچک ویژه، تصویر دقیق