استانداردهای کدنویسی CSS در وردپرس (1)

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

استانداردهای کدنویسی CSS در وردپرس

مثل همه ی استانداردهای کدنویسی دیگر، رعایت استانداردهای CSS در وردپرس به خوانایی، ویرایش، کاربرد و نداشتن خطا در فایل های استایل شیت کمک می کند. در این بخش این استانداردها را ذکر می کنیم. کمپانی وردپرس امیدوار است که این استانداردها مفید واقع شده و تا حد امکان خطاهای مربوط به استایل را کاهش دهد.

ساختار

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

برای برجسته کردن هر پراپرتی (tab) از تب (tab) استفاده کنید نه فاصله (spaces)
بین دو «بخش» یا section از دو خط خالی استفاده کنید و بین دو «بلوک کد» یا block، یک خط خالی بگذارید.
هر «سلکتور» یا selector باید در خط مربوط به خودش باشد و به یک کاما یا کرلی بریس {} خطم شود. پراپرتی و مقدارش باید هر دو در یک خط قرار داشته باشند و به یک خط بعدی با تورفتگی، و یا به یک سمیکالون ( ; ) ختم شوند.کرلی بریس بسه که در آخر کد می آید، باید در سمت چپ نوشته شود. به کدهای زیر دقت کنید.

کدنویسی صحیح:

#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; }

سلکتورها:

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

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

آشنایی با الگوهای نامگذاری فایل ها در پی اچ پی. استفاده از حروف کوچک و فاصله دار در زمانی که سلکتورها را نامگذاری می کنید. اجتناب از نوشتن به صورت کاملکیس (camelcase) و  اجتناب از نوشتن خط تیره.
استفاده از کلمات قابل فهم. کسی که نام سلکتور شما را می خواند باید بفهمد که این سلکتور به چه المانی استایل دهی می کند.
باید در اطراف مقادیر سلکتورها از دابلکوت ( " ... " ) استفاده شود.
خودداری از باز تعریف کردن سلکتورهای از قبل تعریف شده. سلکتورهای از قبل تعریف شده ای مثل 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 */
}

ویژگی ها یا پراپرتی ها (properties)

در رابطه با پراپرتی ها هم شرایط به شکل سلکتورها است. زمانی که راه حل بهتری برای کدنویسی هست، نباید لقمه را دور سر چرخاند!

پراپرتی ها باید با یک «دو نقطه:» و یک «فاصله» همراه باشند. (منظور از فاصله، زدن دکمه ی Space می باشد)
پراپرتی ها و مقادیرشان باید با حروف کوچک نوشته شوند. البته به جز نام فونت ها و بعضی پراپرتی های دیگر
از کدهای هکس یا RGBA برای مشخص کردن رنگ ها استفاده کنید. از قرار دادن حروف بزرگ و فرمت RGB خود داری کنید. زمانی که استفاده از کدهای کوتاه تر ممکن است، از نوشتن کدهای طولانی برای مشخص کردن رنگ ها خودداری کنید. مثلا fff# را به جای ffffff# بنویسید.
تا حد امکان از تکنیک های خلاصه نویسی برای مقادیر بعضی پراپرتی ها مثل background و border و font و list-style و margin استفاده کنید.

کدنویسی صحیح:

#selector-1 {
background: #fff;
display: block;
margin: 0;
margin-left: 20px;
}

کدنویسی غلط:

#selector-1 {
background:#FFFFFF;
display: BLOCK;
margin-left: 20PX;
margin: 0;
}

مرتب سازی پراپرتی ها

پراپرتی ها را گروه بندی کنید، مخصوصا زمانی که تعداد زیادی پراپرتی دارید.

اولین اولویت در انتخاب چیزی مثل نام، پراپرتی و غیره، این است که آن چیز برای شما معنا یا کاربردی داشته باشد یا به هر شکلی در برنامه مفید واقع شود.

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

• نمایش (Display)
• جایگاه یا تثبیت موقعیت (Positioning)
• مدل جعبه (Box model)
• رنگ ها و متن ها (Colors and Typography)
• غیره (Other)

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

مثالی از نوشتن پراپرتی ها با استفاده از مرتب سازی به روش بالا:

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

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

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

استفاده از پرفیکس های خاص برای هر مرورگر در نوشتن پراپرتی ها

گاهی اوقات می خواهیم که یک پراپرتی در مرورگرهای مختلف به اشکال متفاوتی نمایش داده شود. برای این کار از پرفیکس هایی مثل -moz- استفاده می کنیم که برای مرورگر موزیلا فایرفاکس است:

.sample-output {
-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;
}

در قسمت بعدی، ادامه ی استانداردهای کدنویسی CSS برای طراحی قالب های وردپرسی را بررسی می کنیم.

منبع: سایت WordPress