مهارت های css - قسمت دوم : سازماندهی استایل ها

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

مهارت های css - قسمت دوم : سازماندهی استایل ها
Article مجازی

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

 

1- نام واضح برای کلاس ها

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

  • نام کلاس ها متناسب با هدف باشد

بهتر است از اسمی استفاده کنید که هدف این استایل را توصیف می کند. به عنوان مثال، اگر منظور از "red" برای نشان دادن خطایی است که هنگام پر کردن فرم ایجاد شود، از نام error. استفاده کنید. هنگامی که این استایل نیاز به هشدار به بازدید کننده دارد، نامی مانند alert. مناسب است. در این صورت، تغییر رنگ یا سایر گزینه های قالب بندی استایل باعث سردرگمی نمی شود، زیرا این استایل هنوز هم قصد دارد خطایی را نشان دهد یا به بازدید کننده هشدار دهد (صرف نظر از رنگ آن).

به همین ترتیب، از نام هایی که اندازه های دقیقی دارند، مانند font20px. خودداری کنید. چون ممکن است امروز این فونت 20 پیکسل باشد و شما آن را فردا 24 پیکسل کنید، یا پیکسل را به em یا درصد تغییر دهید. استفاده از تگ ها ممکن است روش بهتری باشد: اندازه فونت را بر روی تگ h2 یا p یا حتی یک سلکتور فرزند مانند sidebar p. اعمال کنید.

  • از نام های مبتنی بر موقعیت استفاده نکنید

به همین دلیلی که از ظاهر نامگذاری استایل جلوگیری می کنید، باید از نامگذاری آنها بر اساس موقعیت خودداری کنید. بعضی اوقات نامی مانند leftSidebar. یک انتخاب آشکار به نظر می رسد "من می خواهم تمام این چیز ها را در سمت چپ صفحه قرار دهم!"، اما ممکن است بعدا تصمیم عوض شد و در بالا یا حتی پایین صفحه قرار بگیرد. آنگاه ، نام leftSidebar. به هیچ وجه معنی ندارد. بهتر است نامی مانند events ، .news. ، یا mainNav. انتخاب شود.

تمایل استفاده از نام هایی مانند header. و footer. (برای عناصری که همیشه در بالا یا پایین صفحه ظاهر می شوند، به عنوان مثال) مناسب نیست. شما می توانید نام هایی را پیدا کنید که در شناسایی محتوای یک عنصر بهتر باشند، به عنوان مثال، branding. به جای header.

  • از اسامی خلاصه و بی معنی خودداری کنید

اسامی مانند s1 ، .s. و s2. ممکن است حجم فایل را کمی کوچکتر کنند، اما در هنگام نیاز به بروزرسانی سایت می تواند مشکل ایجاد کند. بهتر است عناوین خلاصه، اما واضح باشند: اسامی مانند barbar ، .copyright. و banner. توضیح کاملی نیست، اما هدف آنها بلافاصله آشکار است.

 

2- خودتان را تکرار نکنید

تایپ کردن یک کد تکراری بارها و بارها وقت شما را هدر می دهد، همچنین کد اضافی را به شیوه نامه های شما اضافه می کند و باعث می شود آنها برای بارگیری کندتر شوند. هنگامی که چندین عنصر ایجاد می کنید که بسیار شبیه به هم هستند و تنها تفاوت های جزئی دارند، تایپ آنها بارها و بارها کار مناسبی نیست. به عنوان مثال، وقتی که شما سه نوع دکمه متفاوت دارید - یک دکمه نارنجی برای اضافه کردن یک مورد جدید به سبد خرید، یک دکمه قرمز برای حذف یک مورد از سبد خرید و یک دکمه سبز برای ارسال سفارش. می توانید کلاس های مختلف را برای هر دکمه در HTML مانند این اضافه کنید:

سپس سه استایل مانند این را ایجاد کنید:

.add {
border-radius: 3px;
font: 12px Arial, Helvetica, sans-serif;
color: #444;
background-color: orange;
}
.delete {
border-radius: 3px;
font: 12px Arial, Helvetica, sans-serif;
color: #444;
background-color: red;
}
.order {
border-radius: 3px;
font: 12px Arial, Helvetica, sans-serif;
color: #444;
background-color: green;
}

توجه کنید که بیشتر خصوصیات این سه استایل یکسان است. این کدهای تکراری نه تنها به اندازه فایل اضافه می کند، بلکه اگر تصمیم دارید که فونت دکمه ها را تغییر دهید، باید به جای یکی از آنها سه استایل را ویرایش کنید.

یک روش بهتر ایجاد یک استایل "پایه" است که همه دکمه ها به اشتراک می گذارند، و همچنین استایل های فردی که فقط حاوی تفاوت های بین دکمه ها باشد. به عنوان مثال، اگر از عنصر Button در HTML استفاده می کنید، می توانید استایلی برای آن عنصر ایجاد کنید که برای هر سه دکمه اعمال شود. سپس سه استایل دیگر ایجاد کنید، برای هر دکمه، مانند این:

button {
border-radius: 3px;
font: 12px Arial, Helvetica, sans-serif;
color: #444;
}
.add {
background-color: orange;
}
.delete {
background-color: red;
}
.order {
background-color: green;
}

نه تنها این کد کم، بلکه قابل مدیریت تر است. اگر می خواهید فونت را روی همه دکمه ها تغییر دهید، کافی است یک بار فونت دکمه را تغییر دهید.

 

3- برای صرفه جویی در وقت از چندین کلاس استفاده کنید

با استفاده از چندین کلاس می توانید از شعار "خود را تکرار نکنید" بیشتر استفاده کنید. به عنوان مثال، وقتی که می خواهید برخی تصاویر به سمت چپ بروند و یک حاشیه سمت راست داشته باشند، در حالی که برخی از عکس ها به سمت راست می روند و حاشیه سمت چپ دارند یا وقتی می خواهید که این تصاویر دارای همان استایل های مرزی در اطراف خود باشند :

 

 

بدیهی ترین راه حل ایجاد دو کلاس است که هر کدام دارای خصوصیات border یکسان اما خاصیت float و margin متفاوت هستند. در نتیجه کلاسی را بر روی تصاویری که باید در سمت چپ و دسته دیگر بر روی تصاویر که باید به سمت راست بروند، اعمال می کنید. اما در صورت نیاز به آپدیت کردن border برای همه این تصاویر چه اتفاقی می افتد؟ باید دو استایل را ویرایش کنید، و اگر یکی را فراموش کردید، تصاویر border اشتباه خواهند داشت!

باید برای این مشکل مانند زیر عمل کنید:

  1. یک کلاس ایجاد کنید که شامل خصوصیات border توسط همه تصاویر است. این استایل را می توان imgFrame. نامید.
  2. دو کلاس اضافی ایجاد کنید، یکی برای تصاویر چپ و دیگری برای تصاویر راست. به عنوان مثال، floatLeft. و floatRight.
  3. هر کلاس را بر روی هر تگ اعمال کنید، مانند این:

یا

در این مرحله، دو کلاس برای هر تگ اعمال می شود و مرورگر وب اطلاعات مربوط را ترکیب می کند. حال اگر می خواهید border را تغییر دهید، به سادگی imgFram. را ویرایش کنید تا هر دو تصویر سمت چپ و راست را بروز کنید.

این تکنیک زمانی مفید است که شما فقط باید چند ویژگی یک عنصر را تغییر دهید، در حالی که سایر موارد مشابه و بدون تغییر می باشند. ممکن است شما یک سایدبار عمومی بخواهید که یک نوار کناری را در سمت راست ایجاد کند، تصاویر پس زمینه خلاقانه را اضافه کنید و شامل یک تایپوگرافی با دقت طراحی شده باشد، می توانید از این استایل در کل سایت خود استفاده کنید، اما عرض آن سایدبار در چند مورد متفاوت است. شاید در بعضی از صفحات 33 درصد و در برخی دیگر 25 درصد باشد. در این حالت، یک کلاس واحد (مانند sidebar.) با ایجاد کنید و کلاس هایی جداگانه برای درست کردن عرض آن ایجاد کنید (به عنوان مثال w33per. و w25per.). سپس دو کلاس را در هر نوار کناری اعمال کنید:

4- از ویژگی های Shorthand استفاده کنید

بسیاری از خصوصیات CSS را می توان به نسخه های کوتاه تبدیل کرد که به کد کمتری نیاز دارند و تایپ کمتری دارند. به عنوان مثال، ویژگی padding جای این چهار ویژگی را می گیرد: padding-top، padding-right، padding-bottom و paddingleft. بنابراین، می توانید این کد را:

td {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}

با این جایگزین کنید:

td {
padding: 5px 10px;
}
5- گروه بندی استایل های مرتبط

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

  • استایل های گروهی مربوط به قسمت های یک صفحه. استایل های مربوط به قسمت های مختلف صفحه را گروه بندی کرده و در کنار هم قرار دهید.
  • استایل های گروهی با یک هدف مرتبط. تمام استایل هایی که یک هدف را دنبال می کنند در یک گروه قرار دهید، استایل های تایپوگرافی در یک گروه، استایل های لینک در گروه دیگر، و غیره.

 

استفاده از کامنت برای جدا کردن گروه های استایل

از هر روشی استفاده کنید، برای معرفی هر گروه بندی از استایل ها، از کامنت در CSS استفاده کنید.

/* *** Layout *** */

یا

/* --------------------------
Layout
--------------------------- */

تا زمانی که با */ شروع می کنید و با /* پایان می دهید، می توانید از هر ترکیب دلخواهی از ستاره ها، خط تیره ها یا کاراکترهایی که به آسان تر کردن این کامنت ها کمک می کند استفاده کنید.

 

6- استفاده از چندین فایل css

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

 

محتوا
  • - مهارت های CSS - قسمت دوم : سازماندهی استایل ها

  • مهارت های css - قسمت دوم : سازماندهی استایل ها

توسعه وب / HTML-CSS