چگونه به صورتی بسیار بد CSS بنویسیم؟

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

چه کسی کامنت می‌نویسد؟ هیچ‌کس!

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

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

سلکتورهای پیچیده

شما تازه CSS را یاد گرفته‌اید و حال فکر می‌کنید که بهترین در جهان هستید. بنابراین فکر می کنید نیاز است که ماهیچه سلکتورهای‌تان را نشان دهید.

راستش را بخواهید کاملا حرکت بدی است.

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

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

کارایی؟ آن را نابود کنید

در این قسمت شما هیچ توجهی به مسئله کارایی ندارید. شما به تجارت‌تان اهمیتی نمی‌دهید. اگر که به کارایی توجه می‌کردید وبسایت‌تان را با سلکتورهای عجیب و غریب به کاربران تحویل نمی‌دادید.

اما صبر کنید...

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

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

مثال بالا را در نظر بگیرید. در این حالت مرورگر ابتدا تمام موارد را با المان * انطباق می‌دهد و سپس المان‌های فرزند body را نیز بررسی می‌کند.

body * {
  ...
}

نامگذاری بد

در دنیای علوم کامپیوتر تنها دو کار سخت وجود دارد. نامگذاری متغیرها و...

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

.u {
  font-size: 60rem;
}

گاهی اوقات نیز از نام‌های پیچیده‌تری بهره برده‌ام:

.former-black-now-red-paragraph {
  color: red;
}

واقعیت را بخواید هیچکدام این موارد خوب نیستند.

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

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

شنیده‌ام که کلاس‌ها چیز خوبی هستند. پس بیایید بیش از حد از آن‌ها استفاده کنیم!

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

بهتر است همواره تکنیک‌ گروه‌بندی کلاس‌ها را در نظر داشته باشید. اینگونه می‌توانید کارایی بالاتری را نیز ارائه دهید.

من وفادار به CSS هستم. از SASS و LESS استفاده نمی‌کنم!

من عاشق CSS هستم، شما نیز همینطور، پس بیایید از پیش‌پردازنده‌ها استفاده نکنیم!

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

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