اصول پیدایش CSS بهینه سازی و سریعتر باز شدن صفحات وب است، اما اگر بتوان عملی را که باعث بهینه سازی است را بهنه تر نمود کار بسیار مثبت و بزرگی را انجام داده اید. با اینکار شما در زمان و در نوشتن کدهای کمتر صرفه جویی کرده اید. امروز قصد دارم به نکات بسیار ریز و مهم اشاره کنم و شما باید این بحث را بسط داده و در تمام کدهایی که برای Style های صفحات خود مینویسید آنرا اعمال کنید. مثال ۱- فرص کنید میخواهید برای وب سایتی پس زمینه یا BackGround تعیین کنید و آنرا در سمت راست صفحه و بدون تکرار قرار دهید، شاید در وحله اول شما کدی مانند این بنویسید :<ol dir="ltr" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 57px; list-style-type: none; list-style-position: initial; list-style-image: initial; line-height: 18px; color: rgb(86, 86, 86); font-size: 12px; "> <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> background-image: url(images/example-background.png); <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> background-repeat:no-repeat; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> background-position:right; این کد از نظر اجرایی به صورت صحیح کار میکنید اما چون تمام Attribute ها به Property پس زمینه (BackGround) اشاره دارد میتوان کد فوق را بصورت بهینه شده و به اینصورت بنویسیم : ۱٫background: url(images/example-background.png) no-repeat right; مثال ۲- بهینه سازی Margin , Padding مسلما از Attribute های فوق به کررات استفاده کرده اید و میدانید که این ۲ بسیار کارا و مفید هستند. فرض کنید میخواهید برای Table که ساخته اید Margin و Padding تعیین کنید، شاید در وحله اول کد را بصورت بهینه نشده و به اینصورت بنویسید :<ol dir="ltr" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 57px; list-style-type: none; list-style-position: initial; list-style-image: initial; line-height: 18px; color: rgb(86, 86, 86); font-size: 12px; "> <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> margin-top:30px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> margin-right:15px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> margin-bottom:30px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> margin-left:15px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> padding-top:15px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> padding-right:10px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> padding:bottombottom:15px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> margin-left:10px; میبینید که خواسته خود را در ۸ خط نوشتید، اما حالا نگاه کنید به فرم بهینه این دستور :<ol dir="ltr" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 57px; list-style-type: none; list-style-position: initial; list-style-image: initial; line-height: 18px; color: rgb(86, 86, 86); font-size: 12px; "> <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> margin:30px 15px 30px 15px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> padding:15px 10px 15px 10px; در رابطه با margin و padding باید بدانید که میتوانید کل ۴ جهت و یا تنها یک جهت را مطابق شکل زیر مقدار دهی کنید : همچنین قوانین ذکر شده در عکس بالا برای Padding و Border-Width هم کاربرد دارد . مثال ۳- بهینه سازی Attribute فونت در این مثال هم مانند مثالهای قبل کدهای بهینه نشده را به کدهای بهینه شده تبدیل میکنیم :<ol dir="ltr" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 57px; list-style-type: none; list-style-position: initial; list-style-image: initial; line-height: 18px; color: rgb(86, 86, 86); font-size: 12px; "> <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> font-family:Arial, Helvetica, sans-serif; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> font-size:36px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> font-weight:lighter; کد بهینه شده : <ol style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 57px; list-style-type: none; list-style-position: initial; list-style-image: initial; line-height: 18px; "> <li style="padding: 3px 0px; margin: 0px; list-style-type: decimal;">font: lighter 36px Arial, Helvetica, sans-serif;
