illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه 5) : قواعد دستوری CSS

2 219 ۳۰ آبان ۹۵

در این مطلب با ادامه راهنمای کدنویسی HTML و CSS در خدمتتون هستم.code guide

در جلسه قبل در مورد Attribute order و Boolean Attribute صحبت کردیم و این جلسه میخایم مطالب رو جلو ببریم.

JavaScript generated markup یا کدهای HTML ساخته شده با Javascript

ساختن و به وجود آوردن کدهای HTML به وسیله Javascript باعث میشه که سختتر بتونیم کدهای مورد نظر رو پیدا کنیم و همچنین سختتر میتونیم اونا رو ویرایش کنیم. پس تا جایی که ممکنه از اون جلوگیری کنید تا کدی منظم و بهینه تر داشته باشید.

موارد مربوط به CSS

Syntax یا قواعد دستوری

همانند کدهای HTML که باید از Soft Tab استفاده میکردیم، اینجا هم باید تورفتگی کدها رو با دو تا Space یا فضای خالی درست کنیم و indentation اونا رو درست کنیم. کد زیر رو در نظر بگیرید:

همونطور که میبینید، کدهایی که درون { قرار گرفتن، نسبت به والد خود، تورفتگی دارند و این تورفتگی 2 تا Space رو اشغال کرده.

نکته بعدی اینه که زمانی که تعدادی Selector یا انتخابگر رو با کاما یا , از هم جدا میکنید، اونا رو در یک خط نزارید و بهتره هر کدوم رو در خط جدید قرار بدین. پس کد بالا بصورت زیر در میاد:

میبینید که هر انتخابگر درون یک خط مجزا قرار داده شده است و اینکار باعث خوانایی بهتر کدها خواهد شد.

همونطور که میبینید در بالا و قبل از باز شدن } یک فضای خالی یا Space قرار دادیم. شما هم سعی کنید این کار رو همیشه انجام بدین. اینکار هم باعث خوانایی بهتر کدها خواهد شد.

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

هر خط از کدها بهتره که در خط جدیدی تعریف بشن تا اگر کدها مشکلی داشتن، ابزارهای Debugging مشکل رو به ما نشون بدن و ما بتونیم سریعا اون رو حل کنیم. همچنین در آخر هر کد خط یک ; یا Semicolon قرار بدین. آخرین کد هر دستور میتونه ; نداشته باشه ولی اگر قرار ندید، در آینده مستعد مشکل خواهد بود.

همونطور که در کد بالا میبینید، مقداری که برای box-shadow قرار داده شده، دارای کاما یا , هست. بهتره که بعد از این کاما، یک فضای خالی قرار داده بشه.

همونطور که میدونید مقادیر توابع rgb() و rgba() و hsl() و hsla() و ... با استفاده از کاما یا , از هم جدا میشن. بهتره که بعد از این موارد Space یا فضای خالی قرار نگیره.

در بعضی از جاها باید یک مقدار رو بصورت اعشاری قرار بدیم. مثلا عدد 0.5 یا -0.5 رو در نظر بگیرید. بهتره در این موارد که یک 0 قبل از ممیز وجود داره، اون رو قرار ندیم و اونرو بصورت .5 یا -.5 بنویسیم.

زمانی که با رنگها سروکار دارید، تا جایی که میتونین از کد هگز خلاصه نویسی شده استفاده کنید. مثلا بجای #ffffff از #fff استفاده کنید. همچنین هیچوقت از حروف بزرگ مثل #FFF استفاده نکنید و همیشه حروف کوچک رو قرار بدین.

همونطور که میدونید بعشی اوقات باید درون انتخابگرها " رو قرار بدین، مثل input[type="text"]. این موارد تنها در بعضی موارد دلخواه هستن و بقیه جاها باید حتما قرار داده بشه. پس بهتره برای ثبات و پایداری بیشتر همیشه " رو قرار بدین.

هر زمان که برای یک ویژگی مقدار 0 رو قرار میدین، دیگه لازم نیس که واحد رو برای اون مشخص کنید. پس بهتره بجای margin: 0px; کد margin: 0; رو قرار بدین.

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

همچنین در اینجا هم میتونین مطالعه بیشتری داشته باشید.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    Mehdi Soli(۹ آذر ۱۳۹۵)

    سلام آقای اسفندیاری عزیز، بازهم مثل همیشه لذت بردم از مقاله خوب و کاربردی شما. یک سوال کلی داشتم و اون اینکه، مطالب شما در مورد نوشتن کدهای سی اس اس کاملا درست هستند و خصوصا در مواردی که بصورت تیمی بر روی یک پروژه کار می کنیم، واقعا باعث خوانایی کدها میشه. اما نکته ای که وجود داره اینه که حتی الان در مباحث SEO نیز مطرح میشه که برای پایین آوردن حجم فایل ها و همین طور داشتن SEO بهتر برای سایت، قبل از لود کردن فایل های استایل و جاوااسکریپ، آن ها رو Minify کنیم. در واقع با وجود رعایت کردن این نکات در هنگام نوشتن کد (که البته در بسیاری از ادیتورها مثل همین phpStorm خودمون با یک short-key این کار انجام میشه) می باید آن رو Minify کرده و در سایت آپلود کنیم. به نظرم این نکات بیشتر باعث خوانایی کدها برای شخص در هنگام کدنویسی شده اما نیازی نیست که کدهای آپلود شده در سایت، حتما به این شکل باشند. نظر شما در این مورد چیست؟

    • ‏‏
      محمد اسفندیاری(۹ آذر ۱۳۹۵)

      بله حرف شما صحیحه….این کارا همه و همه برای توسعه و Develop کردن هستن و برای محیط Production صدق نمیکنن…..
      باید اینو در نظر داشته باشید که نمیشه یکبار یک کد رو نوشت و اون رو Minify کرد و تا آخر عمر ازش جواب گرفت….بالاخره باید همیشه کدهاتون رو آپدیت نگه دارید یا اینکه مشکلات اون رو برطرف کنید….اگر نسخه Develop رو همیشه نگه دارید میتونید در آینده کدهاتون رو بهتر و سریعتر ویرایش کنید….این قواعد نیز نقش بسیار اساسی دارن…
      امیدوارم متوجه شده باشید
      موفق باشید

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram