مانند زبان های دیگر سی اس اس نیز دارای اصول و قواعد خاصی است که باید و یا بهتر است در کدنویسی صفحه مان آنها را رعایت کنیم و در نهایت کدی خوانا، بامعنی، پایدار، زیبا و بی تناقض تولید کنیم. در ادامه به معرفی راههایی برای ارائه همچین کدی می پردازیم؛

ساختار:

راههای زیادی برای بکار بردن ساختار مناسب در کدنویسی 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);

}

مقادیر

راههای زیادی برای نوشتن مقادیر خصیصه ها وجود دارد. در ادامه به معرفی نکته هایی برای نوشتن مقادیر به بهترین روش می پردازیم؛

# قبل از مقدار یک فاصله قرار دهید این یعنی بعد از کلن.

#پرانتزها را با فاصله در مقادیر وارد نکنید

#همیشه مقادیر را با سمیکلن تمام کنید

#از دوکتیشن به جای تک‌کتیشن استفاده کنید، اما در مواردی اینکار بهتر نیست، مانند زمانی که نام یک فونت دارای فاصله است و…

#مقادیری که محتویات آن “۰″ است نباید دارای واحد باشند بجز موارد خاص، مانند transition-duration یا همان طول زمان جابجایی و تحول.

#هنگامی که ارقام اعشاری را به کار می برید دقت کنید ۰ قبل از نقطه اعشار را قرار دهید

مثال صحیح:

.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 { /* از قرار دادن واحد برای مقادیر ۰ بپرهیزید */

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 برای فاصله سایر عناصر با آن استفاده کنید.

#برخی از پراپرتی-خصیصه ها را عموما به عنوان پیشفرض در اول سند ذکر می کنند، در کدنویسی به یاد داشته باشید این دستورات را دوباره تکرار نکنید.