مفهوم CSS در طراحی سایت

HTML برای سیرت و CSS برای صورت

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

CSS در عمل

در زیر می‌توانید یک نمونه از ساختار کد CSS را در کنار فرم ظاهری آن در محیط وب‌سایت مشاهده کنید.

 حال به منوی بالاکمی جزئیات بیشتر اضافه می‌کنیم.

همان‌طور که مشاهده می‌کنید، تنها با اضافه کردن چند خط کد در ساختار CSS تغییراتی همانند رنگ و فرم را در ساختار منوها ایجاد کردیم.
مثال بالا در تمامی نسخه‌های قدیمی و جدید مرورگر اینترنت دنیا قابل‌استفاده است.
 

دوران پیش از CSS

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

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

ثبات طراحی در مقیاس گسترده

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

تغییر بر روی صفحه و المان‌های مشخص و منتخب

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

مشکلات استفاده از CSS

خوبی کافی است و حال بد نیست تا به مشکلات استفاده از CSS نیز بپردازیم.
زمانی که شما از CSS استفاده می‌کنید با دو مشکل باید دست‌وپنجه نرم کنید. هردوی این مشکلات بستگی به این دارد که شما سلکتورهای خود را چگونه دسته‌بندی کرده باشید.
اولین مشکل هدف‌گیری یک المان مشخص است. زمانی که شما برای هر صفحه المان‌هایی متفاوت را در نظر می‌گیرید و طراحی می‌کنید، وقتی‌که قصد ایجاد تغییر یکی از منوها را برای مثال دارید، به خاطر وجود تفاوت‌های کوچک در ساختار همان المان می‌تواند باعث ایجاد دردسرهای فراوانی در پروسه تغییر همان منوی کوچک شود.
مشکل دیگر این است که CSS در بسیاری از موارد می‌تواند خیلی عمومی رفتار کند. به این معنی که به‌جای ایجاد تغییر بر روی یک المان خاص و یا گروهی خاص از المان‌ها، به‌طور ناخواسته بر روی المان‌ها دیگر نیز تأثیرگذار باشد و این خود مشکلی شود که نیازمند بررسی فراوانی در ساختار کلی یک سایت شود.
به‌طورکلی تمامی این مشکلات نیز قابل‌حل است و از همین رو شما می‌توانید استفاده از CSS را ادامه دهید.
درصورتی‌که برای ایجاد یک تغییر جدید به‌جای اینکه فوری وارد فاز اجرائی شوید، ابتدا برنامه‌ریزی کنید و با اعمال آزمایشی برخی تغییرات و بررسی اثرات آن‌ها کار خود را انجام دهید کمتر به مشکل بر خواهید خورد.
در انتها باید گفت که درصورتی‌که از CSS به‌درستی استفاده کنید، این ابزار عالی می‌تواند بسیار پرکاربرد و اثربخش باشد.
تجربه استفاده خود را از کار با CSS با ما به اشتراک بگذارید و موانعی را که با آن‌ها مشکل داشته‌اید با ما و دیگران مطرح کنید.