به نظر می‌رسد که چنین موضوعی (کدنویسی به صورت شئ گرا) در زبانی مانند سی‌اس‌اس غیر ممکن باشد، اما می توان با ایده شئ گرایی در سی‌اس‌اس کدها را پیاده سازی کرد. با اینکار بهترین تجربه برای کدنویسی در سی‌اس‌اس را خواهید داشت و مطمئنا می توانید کدهای سی‌اس‌اس را سریع‌تر بارگذاری نمایید.
سی‌اس‌اس شئ گرا چیست؟
وقتی که مسئله «سی‌اس‌اس شئ‌گرا» را می شنوید، به نظرتان در رابطه با چیز جدیدی صحبت می‌کنیم، چیزی مانند یک پیش‌پردازنده یا یک ویژگی جدید که به سی‌اس‌اس اضافه شده است، اما در واقع شئ‌گرایی در سی‌اس‌اس چیزیست که ما همگی از آن استفاده می کنیم. به صورت ساده‌تر بگویم شئ گرایی در سی‌اس‌اس تنها یک راه متفاوت برای کدنویسی است که می توانیم از آن استفاده کنیم.
این راه شامل چند رویکرد ساده است که می توانید آن ها را دنبال کنید:
یکی از قواعد در این راه مرتبط می شود به مسئله OOCSS -سی‌اس‌اس شئ‌گرا-، که در آن شما باید ساختار را از پوسته کلی جدا کنید. در حقیقت موضوع این است که شما باید کلاس‌های موقعیت و کلاس‌های استایل‌دهی را به صورت مجزا از هم قرار دهید با این کار می توانید از کدها به جای نوشتن دوباره آن‌ها، از آن‌ها استفاده کنید.
بیاید فکر کنیم که شما یک تگ h3 دارید:
<h3>I am an H3</h3>بدون بهره‌مندی از این قاعده شما به صورت زیر استایل دهی را انجام میدهید:
h3 {
padding: 10px;
font-color: #9ac689;
font-size: 16px;
font-weight: bold;
}خب این کد به درستی کار می کند اما مشکل زمانی نمایان می شود که شما یک تگ h3 دیگر نیز داشته باشید. در این حالت درست است که می‌خواهید پوسته و استایل کلی h3 درست مانند قبلی باشد اما مطمئنا نمی خواهید که موقعیت آن‌ها مانند یکدیگر تعریف شود. در چنین حالتی ممکن است مجبور شوید کدهای سی‌اس‌اس را تکرار کنید که این کار موجب می شود تا فایل بزرگتر و حجم بالاتری داشته باشید.
با استفاده از قواعد و شرایط سی‌اس‌اس شئ گرا این مسئله تا حد زیادی حل می شود. برای این کار می توانید کلاس‌های مجزا از همدیگر را تعریف کنید:
<h3 class="padding aside-header">I am an H3</h3>و کد سی‌اس‌اس:
.padding {
padding: 10px;
}
.aside-header {
font-color: #9ac689;
font-size: 16px;
font-weight: bold;
}به نظر می‌آید که اینگونه کدنویسی میزان بیشتری از فایل را اشغال می کند اما در حقیقت چنین نیست. وقتی که دوباره از کدها استفاده کنید، متوجه خواهید شد که به چه میزانی بهینه سازی انجام داده اید.
قاعده دوم این است که شما باید container را از محتوا متمایز یا جدا کنید. در چنین حالتی می توانید بار دیگری از کدها بدون آنکه آن‌ها را تکرار کنید استفاده نمایید.
در حقیقت چنین موضوعی بدان معناست که استایل‌های المنت مادر را با المنت فرزند یکی نکنید، در این حالت می توانید المان های فرزند را هر طور که دوست دارید تغییر دهید:
آن کاری که نباید انجام دهید چیزی شبیه زیر است:
.header .nav {
background: #f1f1f1;
}بجای آن بهتر است از حالت زیر استفاده کنید:
.nav {
background: #f1f1f1;
}این موضوع می تواند از تکرار کدهای‌تان جلوگیری کند، برای مثال وقتی که درون سایدبار از یک nav استفاده کردید دیگر نیازی ندارید که کدها را دوباره بنویسید.
فواید استفاده از شئ‌گرایی در سی‌اس‌اس
همانطور که مشاهده کردید فواید بسیار خوبی برای استفاده از حالت شئ گرا در کدهای‌تان وجود دارد:
- وبسایت سریع‌تر: وقتی که شما کدهای خودتان را تکرار نمی کنید بدان معناست که دیگر نیازی ندارید تا کدهای سی‌اس‌اس طولانی تری داشته باشید، این موضوع بدان معناست که رندرینگ فایل سریع‌تر انجام می شود و میزان کمتری اطلاعات برای دانلود کردن نیاز است.
- قابلیت نگه‌داری ساده‌تر: بدون شک پیاده سازی چنین حالتی کدهایی با قابلیت نگه‌داری بیشتری را تحویل شما می‌دهد. وقتی شما می خواهید رنگ یک المان h3 را عوض کنید بجای تغییر ۱۰ خط کد تنها نیاز دارید تا یک خط را تغییر دهید.
در پایان
برخی از افراد با ایده هایی که پشت قضیه شئ‌گرایی در سی‌اس‌اس وجود دارد مخالف هستند. به این دلیل که این حالت ممکن است علیه رویکرد‌هایی باشد که ما مجبوریم تا از آن‌ها استفاده کنیم. اما با گذشت مدتی کم متوجه خواهید شد که استفاده از چنین حالتی کار شما را بسیار ساده‌تر می کند.
در نظر من شئ‌گرایی با سی‌اس‌اس در آینده توسعه وب جای بسیار بزرگی را کسب خواهد کرد، به این دلیل که وبسایت‌ها هر روز بزرگتر و بزرگتر می شوند و این موضوع نیازمند فایل‌هایی با حجم کردن و سرعت بارگذاری سریع‌تر است.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید