شخصی سازی CSS Selector ها

همونطور که میدونید تو CSS برای نام گذاری Selector ها یک سری قوانین وجود داره :

-?[_a-zA-Z]+[_-a-zA-Z0-9]*

طبق قوانین بالا سلکتور های ما میتونن با ( - )( _ ) و یا کاراکتر های ( A-Z a-z ) شروع بشن و در ادامه میشه از اعداد، ( _ ) و ( - ) استفاده کرد. حداقل تعداد اسم سلکتور باید دو کاراکتر باشه و نمیتونه با اعداد ، ( -- ) و یا (-) به همراه عدد شروع بشه

بهتره اینو در نظر داشته باشیم که استفاده از (-) و یا ( _ ) بیشتر برای کلمات رزرو شده مثله -webkit-, -moz-, -o- or -ms- هست. ترجیحا بهتره برای نام گذاری از این روش استفاده نشه.

استفاده از کاراکتر های ISO 10656 در اسامی سلکتور ها (escaped CSS selectors)

اگر شما با فریمورکی مثله Tailwind آشنا باشید میدونید که این فریمورک تو اغلب نامگذاری هاش از " :‌ " استفاده کرده برای نمونه کد زیر رو ببینید:

<div class=&quotsm:flex sm:items-center px-6 py-4&quot> 

اما خب همونطور که در اول گفتیم یه سری قوانین برای نام گذاری وجود داشت که ما نمیتونستیم آزادانه نام گذاری کنیم. یه موضوعی هست به اسم escaped CSS selectors که Tailwind هم از همین روش برای نام گذاری کلاس هاش استفاده کرده. برای استفاده از این روش باید قبل از کاراکترهای ISO 10656 از " / " استفاده کنیم:

/* sample 1 */

<div class=&quot@@@&quot></div>
.\@\@\@ {
    background: blue;
}

/* sample 2 */

<div class=&quotsm:flex sm:items-center px-6 py-4&quot>
.sm\:flex { ... }

از اینکه در این مقاله همراه من بودین سپاسگذارم، شما هم تجربه تو این موضوع دارین؟ خوشحال میشم نظراتتون رو زیر این پست ببینم و بیشتر باهم در ارتباط باشیم

برخی از مقالات من: