مزایای CSS
طور کلی سایتی که فقط با HTML طراحی شده است ، جذابیتی ندارد css باعث زیبایی سایت شما خواهد شد با CSS نیازی به توصیف مکرر عناصر ندارید. این باعث صرفه جویی در وقت ، کوتاه شدن کدها می شود.
CSS در زمان شما صرفه جویی می کند - می توانید CSS را یکبار بنویسید و سپس از همان برگه در چندین صفحه HTML استفاده کنید.
صفحات سریعتر بارگیری می شوند - اگر از CSS استفاده می کنید ، نیازی نیست هر بار ویژگی های تگ HTML را بنویسید. فقط کافی است یک قانون CSS از یک برچسب بنویسید و آن را در تمام قسمت های آن تگ اعمال کنید. بنابراین کد کمتر به معنی زمان بارگیری سریعتر است.
تغییر آسان - برای ایجاد یک تغییر ، فقط قسمتی از css را تغییر دهید و همه عناصر در تمام صفحات وب به طور خودکار به روز می شوند.
سازگاری چند دستگاه - css اجازه می دهد تا محتوا برای بیش از یک نوع دستگاه بهینه شود. با استفاده از یک سند HTML مشابه ، نسخه های مختلف یک وب سایت را می توان برای دستگاه هایی مانند ipad و تلفن های همراه ارائه کرد.
استانداردهای جهانی وب - به این علت که ویژگی های HTML منسوخ می شوند ، توصیه میکنیم از CSS استفاده نمایید تا با مرورگرهای آینده سازگار باشد.
مزیت استفاده از CSS در مقابل ویژگی های خود تگهای html :
کاملا مشخص است ، زمانی که بخواهید از attribute های خود html استفاده کنید ، به علت اینکه باید انها را در هر تگ دوباره و چندباره تکرار کنید ، حجم فایل html شما خیلی زیاد میشود .
در صورتی که ما با استفاده از CSS میتوانیم یک دسته از attribute ها را فقط یکبار و در یکجا تعریف کنیم و تگهای مختلف را به آن دسته تنظیمات ارجاع دهیم و نیازی به اتلاف فضای بیشتر نباشد .
با CSS در اندازه ی فایل صفحه ی وب سایت صرفه جویی می کنید . هر چه اندازه ی فایل وب سایت شما کوچیکتر باشد سرعت لود شدن صفحه ی وب هم مسلما بیشتر میشود ، که اینکار با CSS میسر است .
تغییر دادن صفحه ی وب سایت به مراتب راحت تر میشود . تنظیمات CSS را می توانید توی فایل جداگانه بگذارید و به این ترتیب استفاده و نگهداری آن راحتتر است .
اشتباهات معمول در CSS
طراحان و كدنويسان چه تازه كار باشند چه حرفه اي هميشه ممكن هست كه در نوشتن كد دچار اشتباه بشوند،
اين اشتباهات ممكن است به خاطر عدم تمرين كردن و يادگيري اصولي از ابتدا باشد، يا اينكه هنگام نوشتن عجله در كار باشد. در اين پست قصد معرفي رايج ترين اشتباهات در هنگام نوشتن كد HTML و CSS را داريم.
اشتباهات HTML
اين اشتباه خيلي معمول است مخصوصا براي تازه كارها، خيلي از تگها نياز دارند كه بسته شوند تا درست كار كنند، مثل div, strong و لينكها. يكسري از تگها هم نياز دارند كه يك slash در انتهاي آنها گذاشته شود، مثل تگ img.
اين كار عادت نادرستي است و حتما بايد تگها با حروف كوچك نوشته شوند،
- استفاده كردن بيش از حد از Id ها و class ها
class ها براي آيتم هايي استفاده مي شوند كه بيش از يك بار در كد شما مورد استفاده قرار مي گيرند. مثل يك لينك كه چندين بار در سايت شما مورد استفاده قرار مي گيرد و داراي استايل يكساني مي باشد. Id ها براي آيتم هايي كه تنها يك بار مورد استفاده قرار مي گيرند
تعريف مي شوند مثل header div. زمانی که اين دو مورد معمولا بيشتر از حد نياز مورد استفاده قرار مي گيرند و ممكن است در آينده هنگام ويرايش و تغيير كد شما را گيج كنند، بهتر است در حد نياز از آنها استفاده كنيد.
- فراموش كردن بستن براكت ها و استايلها
هر آيتمي در CSS با يك براكت } باز و بسته { مي شود. هر استايلي كه تعريف مي كنيد بايد با يك ; بسته شود. براي مثال :
#divname {
width: 40px;
height: 30px;
}
معمولا روشهاي متفاوتي براي نوشتن كد CSS وجود دارد كه بسته به طراح و برنامه نويس دارد بعضيها همه كدها را در يك خط مي نويسند و بعضي ها مثل مثال بالا هر استايلي را در يك خط جداگانه مي نويسند.
- استفاده نكردن از Global Styles
خيلي از آيتمها مثل پاراگراف، هدرها و لينكها استايل يكساني در كل سايت دارند بنابراين بهتر است براي آنها يك استايل همگاني تعريف شود،
اين كار هم باعث جلوگيري از اشتباههاي ناخواسته مي شود و هم كد شما را سبك تر مي كند.
- استفاده نكردن از اسمهاي مناسب براي Id ها و Class ها
هميشه بهتر هست كه براي اين موارد نامهاي مناسبي انتخاب كنيد كه در آينده اگر نياز به ويرايش و تغيير داشت بتوانيد راحت بفهميد كه اين موارد براي چه هستند.
- استفاده نكردن از كدهاي كوتاه
كدهاي كوتاه يكي ديگر از روشها براي مرتب و كم حجم كردن كد شما است. براي مثال به جاي استفاده از padding-top ، padding-right و ... مي توانيد از روش زير استفاده كنيد :
padding: 5px 10px 0 10px;
- استفاده نكردن از كدهاي كوتاه براي رنگ
اعداد هگزايي كه مثل ffffff و يا 000000 تكرار مي شوند را ميتوان به صورت 000 و fff نوشت.
- استفاده نادرست از positioning
Positioning يكي از مواردي است كه براي كساني كه تازه كار هستند خيلي سخت ممكن است به نظر برسد. انتخابهاي شما static , relative , absolute و fixed هستند. static حالت پيش فرض است و موقعيت آيتم در حالت نرمال صفحه است. relative قرار دادن آيتم به صورت وابسته به خودش است
به اين معني كه شما مي توانيد آنرا نسبت به موقعيت نرمالش در صفحه به سمت بالا، پايين، چپ و راست حركت دهيد. absolute به شما اين امكان را مي دهد كه آيتم خود را در هر جاي صفحه قرار دهيد و اين حالت بيشترين اشتباه در موردش مي شود.
مقاديري كه براي آيتم absolute در نظر مي گيريد به صورت relative و يا absolute نسبت به آيتم پدر خود مي باشد و اگر وجود نداشته باشد به تگ html بر ميگردد. حالت fixed وابسته به موقعيت پنجره مرورگر است يعني اگر پنجره مرورگر را تغيير دهيد اين آيتم تغييري نمي كند. يادگيري درست اين موارد به شما كمك بزرگي در چيدمان صفحه خواهد كرد.