اصول و قواعد DRY در طراحی Web

[mehdi.mousavi]

سلام.
ممکنه از خودتون بپرسید "منظور از اصول و قواعد DRY چیه؟ اونم تو طراحی وب!". DRY مخفف Don't Repeat Yourself هستش و به این معنیه که در یک سیستم، هر تعریفی باید در یک نقطه واضح و روشن انجام بشه و از تکرار اطلاعات در برنامه خودداری بشه. برنامه های تحت وب جدا از اینکه از چه تکنولوژی Server-Side ای برای تولید استفاده کنن، عموما حاوی Style Sheet هایی هستن که به صفحات ضمیمه شده.

در این مقاله (http://deepubalan.com/blog/2010/06/17/the-dry-principle-in-web-design/)، نویسنده به اصول و قواعد DRY در تعریف CSS ها می پردازه (البته متاسفانه این کار رو ناقص انجام داده، اما برای شروع، بد نیست اونو بخونید).

موفق باشید.

[alireza_s_84]

سلام.
ممکنه از خودتون بپرسید "منظور از اصول و قواعد DRY چیه؟ اونم تو طراحی وب!". DRY مخفف Don't Repeat Yourself هستش و به این معنیه که در یک سیستم، هر تعریفی باید در یک نقطه واضح و روشن انجام بشه و از تکرار اطلاعات در برنامه خودداری بشه. برنامه های تحت وب جدا از اینکه از چه تکنولوژی Server-Side ای برای تولید استفاده کنن، عموما حاوی Style Sheet هایی هستن که به صفحات ضمیمه شده.
در این مقاله (http://deepubalan.com/blog/2010/06/17/the-dry-principle-in-web-design/)، نویسنده به اصول و قواعد DRY در تعریف CSS ها می پردازه (البته متاسفانه این کار رو ناقص انجام داده، اما برای شروع، بد نیست اونو بخونید).
موفق باشید.
با تشکر از جناب موسوی:
در بکارگیری استایل ها در CSS باید به این نکته توجه داشت که المانهای فرزند از المانهای والد خصوصیات رو به ارث میبرن.
زمانیکه خصوصیت فونت برای المنت Body بصورت font-family: Tahoma تعریف بشه دیگه نیازی نیست توی هر class یا id یا selector این عبارت بکار برده بشه: font-family: Tahoma چون خود بخود تمامی المانها در درخت dom فرزند شی body هستند.
در خیلی مواقع به css هایی که دوستان نوشتن توجه که میکنیم میبینیم اینطور تکرار مکررات زیاد بکار برده شده غافل از اینکه یک فایل استایل 30 کیلوباتی با رعایت این موارد تا 10 کیلوبایت هم میتونه کاهش حجم داشته باشه.
ضمنا بکار گیری اسامی طولانی برای سلکتورها و id ها هم بخش بزرگی از متن سند رو بخودش اختصاص میده.
این مقاله همونطور که مهندس موسوی گفت کامل نیست ولی برای شروع بد نیست. دوستان در طراحی صفحات سعی بکنید از doctype قدرتمند xhtml استفاده بکنید چون خصوصیات وراثت رو بطور کامل پیاده سازی میکنه.
برای مثال در HTML 4 اگر شما فونت سند رو Tahoma و سایز اون رو 9pt تعریف کرده باشید در صورت اضافه کردن جدول به سند تنها خصوصیت font-family به جدول منتقل میشه و باید برای جدول دوباره سایز فونت رو تعریف بکنید حال اینکه در XHTML نیازی به اینکار نیست و تمامی خصوصیات شی والد سند به فرزندش که در اینجا جدول هست منتقل میشه.

[mehdi.mousavi]

با تشکر از آقای alireza_s_84 (http://barnamenevis.org/forum/member.php?u=35861)
بله. مساله ای که اشاره کردید، دقیقا یکی از مشکلات موجود در طراحی CSS هاست. مهمترین وظیفه در طراحی CSS، توجه به همون حرف اولش یعنی C، یا Cascading هستش. Specificity و آشنایی با چگونگی محاسبه اون نیز (توسط مرورگرها)، به شدت میتونه شما رو در نوشتن یک CSS خوب کمک کنه. توضیحات بیشتر در این مورد رو نیز می تونید در این آدرس (http://www.w3.org/TR/CSS2/cascade.html) مطالعه کنید.

خوندن کتاب CSS: The missing manual (http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596526873) نیز میتونه کمک بسزایی در آشنایی با روشها و Hack های موجود در ارتباط با چگونگی اعمال تغییر در Specificity یک Element و صد البته، آشنایی دقیق و اصولی با CSS ها داشته باشه. (نسخه جدید این کتاب (http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596802447/ref=ntt_at_ep_dpi_1)، CSS 3.0 رو نیز پوشش میده).

موفق باشید.

[mehdi.mousavi]

سلام.
امروز متوجه مطلبی شدم که دیروز توسط Jeff Starr تحت عنوان Micro-Optimize your CSS (http://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/) نوشته شده بود. حتما این مطلب رو هم ببینید که در تکمیل صحبتهای قبلی مفیده.

موفق باشید.

[salehbagheri]

دوستان در طراحی صفحات سعی بکنید از doctype قدرتمند xhtml استفاده بکنید چون خصوصیات وراثت رو بطور کامل پیاده سازی میکنه.
برای مثال در HTML 4 اگر شما فونت سند رو Tahoma و سایز اون رو 9pt تعریف کرده باشید در صورت اضافه کردن جدول به سند تنها خصوصیت font-family به جدول منتقل میشه و باید برای جدول دوباره سایز فونت رو تعریف بکنید حال اینکه در XHTML نیازی به اینکار نیست و تمامی خصوصیات شی والد سند به فرزندش که در اینجا جدول هست منتقل میشه.


آيا با وجود HTML5 باز هم همين توصيه رو داريد يا اينكه HTML5 نيز همچون سري هاي قبلي دچار همين مشكلات هست؟

[alireza_s_84]

آيا با وجود HTML5 باز هم همين توصيه رو داريد يا اينكه HTML5 نيز همچون سري هاي قبلي دچار همين مشكلات هست؟
با توجه به اینکه در حال حاضر قابلیت های جدید HTML5 هنوز در برخی مرورگرها علی الخصوص مرورگر به شدت محبوب و تنها شناخته شده بین کاربران ایرانی که پشتیبانی نمیشوند نتیجه میگریم یا باید در هنگام بکارگیری HTML5 از بکارگیری قابلیت های جدید اون صرف نظر کنیم و یا اینکه با ترکیب روشهایی و تشخیص پشتیبانی شدن یا نشدن اون قابلیت ها رو پیاده سازی کنیم.
البته اگر هدف تنها بکارگیری خصوصیات و تگهایی باشه که در نسخه های پیشین وجود داشته خب میشه از نوع سند استفاده کرد که در اینجا تفاوتی با XHTML نخواهد داشت ولی اگر بحث بر سر قابلیت های اون باشه که خب بی شک نمیشه استفاده از اون رو نادیده گرفت.(یعنی نباید نادیده گرفت) با کمک HTML5 میشه صفحات گرافیکی و بسیار زیبایی با حجم کم داشته باشیم ولی این قابلیت ها فقط در مرورگرهای خیلی جدید(نه حتی جدید) تنها پشتیبانی میشوند.
در حال حاضر مرورگرهای Chrome +4 و FF +3.6 و Opera +10 و IE +9 بطور کامل از HTML5 پشتیبانی میکنند و این یعنی سالهای آینده باید منتظر باشیم و ببینیم کی مردم و کاربران ما دست از IE6 برمیدارند.

آيا با وجود HTML5 باز هم همين توصيه رو داريد يا اينكه HTML5 نيز همچون سري هاي قبلي دچار همين مشكلات هست؟
در مورد اعمال آبشاری خصوصیات که HTML5 به طبع مشکلاتی نسخه های پیشین رو نداره و لذا بکارگیری اون همانند XHTML خواهد بود و در زمینه حذف استایلهای اضافی که خب فرقی نمیکنه شما میتونی یک CSS پر از تکرار داشته باشه و این ارتباطی به نوع سند نداره.
مقاله ی دومی که مهندس موسوی قرار دادن دقیقا منظور من رو توضیح داده و گفته چه باید کرد و این فرقی نمیکنه در HTML5 باشه یا HTML3.

[imanasp]

این قسمتش خیلی توپ بود:

In the case of a website with 50000 monthly hits, if you can save 5 KB by optimizing the CSS file, you will eventually save more than 2.5 GB bandwidth a year

[mehdi.mousavi]

سلام.
در چند پست قبل، به Specificity اشاره کردم. امروز به جدولی خوردم که مختصر و مفید نحوه محاسبه این پارامتر رو نشوند داده. گفتم اینجا بذارم تا دوستانی که از این مساله مطلع نیستن، سریع با نحوه محاسبه این پارامتر آشنا بشن. - منبع (http://www.vcarrer.com/2009/09/css-specificity-cheat-sheet.html)


http://barnamenevis.org/forum/attachment.php?attachmentid=52116&stc=1&d=1277969351


موفق باشید.

[Vahid Faraji]

زمانیکه خصوصیت فونت برای المنت Body بصورت font-family: Tahoma تعریف بشه دیگه نیازی نیست توی هر class یا id یا selector این عبارت بکار برده بشه: font-family: Tahoma چون خود بخود تمامی المانها در درخت dom فرزند شی body هستند.

value

اگه از select option استفاده كنيم، متأسفانه از استايل parent ارث نمي بره و بايد براش كلاس تعريف كنيم، آيا اين طور نيست؟


دوستان در طراحی صفحات سعی بکنید از doctype قدرتمند xhtml استفاده بکنید چون خصوصیات وراثت رو بطور کامل پیاده سازی میکنه.

value
منظور شما همون doctype ابتداي صفحه html است؟
ممنون.