مدرسه وب میکرز: استانداردهای کدنویسی CSS در وردپرس

مدرسه وب میکرز: استانداردهای کدنویسی CSS در وردپرس
  • 1392/5/17
  • omid.kamangar
  • 8

vid00213-sd-15web-how-to-apply-css-coding-standards
مانند زبان های دیگر سی اس اس نیز دارای اصول و قواعد خاصی است که باید و یا بهتر است در کدنویسی صفحه مان آنها را رعایت کنیم و در نهایت کدی خوانا، بامعنی، پایدار، زیبا و بی تناقض تولید کنیم. در ادامه به معرفی راههایی برای ارائه همچین کدی می پردازیم؛

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

مثال صحیح:
#selector-1,
#selector-2,
#selector-3 {
background: #fff;
color: #000;
}
مثال ناصحیح:
#selector-1, #selector-2, #selector-3 {
background: #fff;
color: #000;
}

#selector-1 { background: #fff; color: #000; }

گزینشگر – سلکتورها
همیشه سعی کنید در نام گذاری سلکتورها دقت خاصی داشته باشید چون این کار هم در کدنویسی بهتان کمک خواهد کرد و هم در رفع اشکال بعدا صفحه؛
#مانند سایر استانداردهای کدنویسی در نام گذاری ها از کلمات کوچک استفاده کنید.
#از نام هایی خوانا استفاده کنید که برای دیگران قابل درک باشد و به المنت های آن نیز مربوط باشد.
#مقادیر خصیصه ها یا اتربیوت های سلکتورها باید دارای دابل کوتیشن در اطرافش باشد
#در کدنویسی سلکتورها از دستور نادرست div.container استفاده نکنید و کد صحیح و معین آن یعنی .container را به کار ببرید.

مثال صحیح:
#comment-form {
margin: 1em 0;
}

input[type=”text”] {
line-height: 1.1;
}
مثال ناصحیح:
#commentForm { /* Avoid camelcase. */
margin: 0;
}

#comment_form { /* Avoid underscores. */
margin: 0;
}

div#comment_form { /* Avoid over-qualification. */
margin: 0;
}

#c1-xr { /* What is a c1-xr?! Use a better name. */
margin: 0;
}

input[type=text] { /* Should be [type=”text”] */
line-height: 110% /* Also doubly incorrect */
}

خصوصیات – پراپرتیس
در کدنویسی خصوصیت ها موارد زیر را رعایت کنید:
#بعد از پراپرتیس دونقطه و سپس فاصله را قرار دهید.
#تمامی کلمات پراپرتیس و مقادیرش با کلمات کوچک نوشته شوند، البته باید استثنا برای نام فونت ها قرار داد.
#برای مقدار دهی رنگ ها از کدهای هگزادسیمال یا در صورت نیاز به شفافیت از rgba() استفاده کنید. از فرمت RGB و کلمات کوچک و مقادیر کوتاه (مثال: #fff به جای#FFFFFF) استفاده نکنید.
#در مواقعی که امکان تندنویسی یا همان خلاصه نویسی است این کار را انجام دهید چون باعث کوتاهتر شدن دستورات و همچنین صرفه جویی در وقت خواهد شد. بیشترین دستوراتی که می توان در آن خلاصه نویسی کرد عبارت اند از background, border, font, list-style, margin, و padding.

مرتب سازی خصوصیت ها
در هسته وردپرس برای مرتب سازیها از ترتیب دهی گروهی استفاده می کنند به طوری که خصیصه های مرتبط با هم را در یک گروه قرار داده و بر اساس آن مرتب می کنند.
می توان دسته بندی گروهها را در این موارد قرار داد:
#نمایش – Display
#موقعیت و مکان
#ویژگی اشکال و جعبه ها
#رنگ ها و متن ها
#سایر
در مواردی مانند انیمیشن های CSS3 که هنوز نمی توانید آن را در دسته خاصی قرار دهید بهتر است بستگی به دستور در یکی از گروههای بالا گنجانده شود.

مثال گروه بندی:

#overlay {
position: absolute;
z-index: 1;
padding: 10px;
background: #fff;
color: #777;
}

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

متد اول و صحیح:

.koop-shiny {
-webkit-box-shadow: inset 0 0 1px 1px #eee;
-moz-box-shadow: inset 0 0 1px 1px #eee;
box-shadow: inset 0 0 1px 1px #eee;
-webkit-transition: border-color 0.1s;
-moz-transition: border-color 0.1s;
-ms-transition: border-color 0.1s;
-o-transition: border-color 0.1s;
transition: border-color 0.1s;
}

متد دوم- پیشنهاد نمی شود

.okay {
-webkit-box-shadow: inset 0 0 1px 1px #eee;
-moz-box-shadow: inset 0 0 1px 1px #eee;
box-shadow: inset 0 0 1px 1px #eee;
}

.bad {
-webkit-box-shadow: inset 0 0 1px 1px #eee;
-moz-box-shadow: inset 0 0 1px 1px #eee;
box-shadow: inset 0 0 1px 1px #eee;
}

همچنین در نهایت قاب ویژه برای گردینت ها:

.gradient {
background: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#000));
background-image: -webkit-linear-gradient(bottom, #fff, #000);
background-image: -moz-linear-gradient(bottom, #fff, #000);
background-image: -o-linear-gradient(bottom, #fff, #000);
background-image: linear-gradient(to top, #fff, #000);
}

مقادیر
راههای زیادی برای نوشتن مقادیر خصیصه ها وجود دارد. در ادامه به معرفی نکته هایی برای نوشتن مقادیر به بهترین روش می پردازیم؛
# قبل از مقدار یک فاصله قرار دهید این یعنی بعد از کلن.
#پرانتزها را با فاصله در مقادیر وارد نکنید
#همیشه مقادیر را با سمیکلن تمام کنید
#از دوکتیشن به جای تک‌کتیشن استفاده کنید، اما در مواردی اینکار بهتر نیست، مانند زمانی که نام یک فونت دارای فاصله است و…
#مقادیری که محتویات آن “0” است نباید دارای واحد باشند بجز موارد خاص، مانند transition-duration یا همان طول زمان جابجایی و تحول.
#هنگامی که ارقام اعشاری را به کار می برید دقت کنید 0 قبل از نقطه اعشار را قرار دهید

مثال صحیح:

.class { /* استفاده درست از کوتیشن ها*/
background-image: url(images/bg.png);
font-family: “Helvetica Neue”, sans-serif;
}

.class { /* استفاده درست از مقادیر صفر */
font-family: Georgia, serif;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),
0 1px 0 #fff;
}

مثال ناصحیح:

.class { /* از قرار ندادن فاصله میان دو نقطه و مقدار بپرهیزید */
background:#fff
}

.class { /* از قرار دادن واحد برای مقادیر 0 بپرهیزید */
margin: 0px 0px 20px 0px;
}

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

#توصیه می شود دستورات را بر اساس دستگاهها گروه بندی کرده و در پایین دستورات دیگر قرار دهید.
#قوانین آن دستگاه باید در خط معرفی آن قرار داشته باشد
مثال:

@media all and (max-width: 699px) and (min-width: 520px) {

/* Your selectors */
}

سایر
#اگر خواستید یک مشکل را در کدتان حل کنید و یک کدی را جایگزین آن کنید ابتدا کد قبلی را حذف کنید آنوقت دستور جدید را بنویسید
#اعداد عجیب و غریب معمولا خوش شانس نیستند. پس بهتر است آنها را به اصطلاح رند کنید. مثلا .box { margin-top: 37px }
#به خصیصه height توجه داشته باشید که در چه مواقعی از آن استفاده کنید. به عنوان مثال زمانی که می خواهید یک المنت بیرونی(مانند عکس) درج کنید از line-height برای فاصله سایر عناصر با آن استفاده کنید.
#برخی از پراپرتی-خصیصه ها را عموما به عنوان پیشفرض در اول سند ذکر می کنند، در کدنویسی به یاد داشته باشید این دستورات را دوباره تکرار نکنید.

دیدگاه خود را وارد کنید
تعداد دیدگاه ها : 8 دیدگاه
  1. مطبی خوبی بود
    فقط فکر نمی کنید بهتر باشه توی فکر یک پلاگینی برای این کدها باشید که بهتر نمایش داده بشه؟!!!

    1. ممنون از پیشنهادتون
      مورد بررسی قرار خواهد گرفت

  2. 1. این استانداردها! رو با استناد به کدوم منابع نوشتید؟!! (مثلاً div.container اشتباهه؟)
    2. این مطلب چه ربطی به وردپرس داشت؟

    1. http://make.wordpress.org/core/handbook/coding-standards/css
      Refrain from using over-qualified selectors, div.container can simply be stated as .container
      در کل می توان به عنوان استاندارد کدنویسی CSS معرفیش کرد ولی بعضی نکات تو قالب وردپرس بودن

    2. can simply be stated یعنی بصورت ساده تر میتونه اینجوری هم نوشته بشه .

      قاعدتاً div.container و container دو نتیجه متفاوت رو به عنوان المان های انتخاب شده برگشت میدن و اینکه در بعضی موارد نتیجه یکسانی برگشت میدن و میشه از سلکتور ساده تر استفاده کرد دلیل نمیشه که بگیم: div.container اشتباهه یا یک شکل ناصحیح است.

      تشکر از شما.

    3. یعنی بهتره از اون به جای این استفاده کرد
      حتما که نیست
      خواهش می کنم قربان

  3. بچه ها میخواستم سوال کنم که ایا میشه در ووردپرس از کد html استفاده کرد اگه اره چطوری و در کجا باید کدهامو وارد کنم؟؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *