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

با قسمت سوم از «دوره تخصصی استانداردهای طراحی قالب وردپرس» در خدمت شما هستیم. در این قسمت به ادامه ی «استانداردهای تعریف شده برای استفاده از css در وردپرس» خواهیم پرداخت.

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

این استانداردها به شرح زیر هستند:

مقادیر (values)

راه های متفاوتی برای قراردادن «مقدار» در «پراپرتی» ها وجود دارد. موارد زیر را در این زمینه برای حفظ بالاترین کیفیت در کدنویسیرعایت فرمایید.

• قبل از نوشتن مقدار پراپرتی (بعد از دونقطه) حتما یک فاصله بگذارید.
• داخل پرانتزها فاصله ی خالی نگذارید.
• در آخر آن ها یک سمیکالن ; قرار دهید.
• به جای تک کوتیشن (') از دابل کوتیشن (") استفاده کنید. مگر اینکه در مواقعی که نیاز بود، مثلا زمانی که می خواهید نام یک فونت را با خط فاصله بنویسید یا این که می خواهید مقدار پراپرتی content را وارد کنید.
• پراپرتی font-weight باید با مقادیر عددی مشخص شود. مثلا به جای مقادیر bold یا normal از 400 یا 700 استفاده کنیم.
• مقادیر صفر نباید دارای واحد باشند. یعنی مثلا 0px اشتباه است و 0 خالی درست است.
• از صفر ابتدایی در مقادیر دسیمال مثل ()rgba استفاده کنید.
• ویرگولی که مقادیر یک پراپرتی را از هم جدا می کند، باید شامل یک فاصله (اسپیس) قبل، و یک فاصله بعد از خود باشد یا این که هر مقدار در یک خط قرار داده شوند.
• مقادیر قرار گرفته درون یک مقدار دیگر، مثل مقادیر درون ()rgba باید با یک فاصله یا اسپیس از هم جدا شوند.

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

.class { /* Correct usage of quotes */
    background-image: url(images/bg.png);
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
}
 
.class { /* Correct usage of zero values */
    font-family: Georgia, serif;
    line-height: 1.4;
    text-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.5),
        0 1px 0 #fff;
}
 
.class { /* Correct usage of short and lengthier multi-part values */
    font-family: Consolas, Monaco, monospace;
    transition-property: opacity, background, color;
    box-shadow:
        0 0 0 1px #5b9dd9,
        0 0 2px 1px rgba(30, 140, 190, 0.8);
}

کدنویسی غلط:

.class { /* Avoid missing space and semicolon */
    background:#fff
}
 
.class { /* Avoid adding a unit on a zero value */
    margin: 0px 0px 20px 0px;
}
 
.class {
    font-family: Times New Roman, serif; /* Quote font names when required */
    font-weight: bold; /* Avoid named font weights */
    line-height: 1.4em;
}
 
.class { /* Incorrect usage of multi-part values */
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5),
                 0 1px 0 #fff;
    box-shadow: 0 1px 0 rgba(0, 0,
        0, 0.5),
        0 1px 0 rgba(0,0,0,0.5);
}

مدیا کوئری ها (Media queries)

استفاده از مدیا کوئری ها این امکان را فراهم می سازند تا مقدار DOM یا Document Object Model را برای سایز صفحه های مختلف کاهش دهیم.

• پیشنهاد می شود که مدیا کوئری ها را دسته بندی کنید و آن ها را در انتهای استایل شیت بنویسید. (فایل wp-admin.css در این مقوله استثناء است)
• قوانینی که برای مدیا کوئری نوشته می شوند باید در یک خط واقع شده باشند.

مثال:

@media all and (max-width: 699px) and (min-width: 520px) {
 
        /* Your selectors */
}

کامنت نویسی

• نوشتن کامنت هایی با بیش از 80 کاراکتر باعث رفتن به خط بعدی می شود. این امر باعث افزایش زمان دیباگ کردن می شود. همچنین درست است که کامنت ها مانند کدها خوانده نمی شوند، اما به هر حال حجم فایل را افزایش می دهند و این چیز خوبی نیست.
• مطالب باید در یک استایل شیت بزرگ فهرست بندی شوند. در کامنت نویسی برای معرفی قسمت های مختلف یک استایل شیت، از اعداد برای بخش بندی و فهرست بندی قسمت های مختلف کد استفاده کنید. ( مثلا 1.0 و 1.1 و 2.0 و... )
• کامنت های درون خطی (in-line) نباید دارای خط جدید خالی ای باشند که کامنت را از کدی که به آن مربوط می شود جدا کند.

مثال برای کامنت های درون خطی یا in-line

/* This is a comment about this selector */
.another-selector {
    position: absolute;
    top: 0 !important; /* I should explain why this is so !important */
}

برای کامنت های چند خطی که دارای قسمت و زیر قسمت هستند:

/**
 * #.# Section title
 *
 * Description of section, whether or not it has media queries, etc.
 */
 
.selector {
    float: left;
}

تجربیات کدنویسی در زبان CSS

تجربه نشان می دهد که فایل های CSS یا استایل شیت ها، تمایل زیادی به طولانی شدن دارند. بنابراین استفاده از روش های هوشمندانه و داشتن یک سری قوانین و چارچوب برای کدنویسی این فایل ها، می تواند کمک زیادی به حفظ نظم و خوانایی می کند.

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

خب! دوستان و همراهان گرامی به پایان قسمت سوم رسیدیم. لطفا سوالات و نظرات خود را در پایین همین برگه با ما به اشتراک بگذارید. در قسمت بعدی به بررسی «پرکاربردترین خلاصه نویسی های CSS مورد تایید وردپرس» و «استانداردهای تعریف شده برای کدنویسی html توسط کمپانی ورپرس» خواهیم پرداخت. با ما همراه باشید.

منبع: سایت WordPress