بسم الله الرحمن الرحيم ، من العنوان ظاهر أنني سأكون ضد كل ممن يستعمل منصات العمل الجاهزة في css ، لكن لا تتسرع ، لنقم بهذه الدراسة السريعة ، و لنحاول أن نفهم ما هي framework css و أنواعها و إيجابياتها و سلبياتها ، و أخيرا أترك لك الاختيار فيما سيصلح لك في مشاريعك كمطور … سنحاول أن نقسم الأفكار التي سنتحدث عنها إلى التالي :
- ما هو framework css
- لم framework css ؟
- أمثلة جاهزة لـ framework css
- ما دور الملفات التصفيرية reset css
- فضلا .. لا تستعمل Framework css
ما هو framework css
هو عبارة عن منصة عمل ، مفتوحة المصدر ، ملفات تحتوي على أوامر css جاهزة ، و أكواد و تسميات تم علمها من صاحب المنصة ، ليسهل على المطورين التعامل مع مشاريعهم في ظل استعمالها .
لم framework css ؟
بكل بساطة ليسهل علينا التعامل مع المشاريع المستقبلية ، حيث نحاول أن نربح وقتا ، و تكون مشاريعنا واقعية من ناحية الوقت و الانتايجة ، يمكننا أن نحدد فوائده في التالي :
- زيادة الإنتايجة ، بربح الوقت و الجهد .
- التقليل من الأخطاء ( في بعض الحالات ) .
- تجميع أسماء الـ class و الـ id
- توافقية المشروع مع مختلف المتصفحات .
- ترك كود نظيف موافق للمعايير القياسية و خال من الأخطاء الكتابية .
أمثلة جاهزة لـ framework css
طبعا توجد أكثر من منصة للعمل للغة css و تختلف باختلاف وظائفها التي تقدم للمستخدم ، يمكنني أن أذكر أشهرها :
- YAML : و هي اختصار لكلمة : Yet Another Multicolumn Layout وهي منصة من عمل Dirk Jesse ، بسيطة ، واضحة ، مفهومة ، متوافقة مع كل المتصفحات ، انطلاقا من ie5 و ما فوق ، تتميز بصفحتين مهمتين ، صفحة التنسيف css الأصلية ، و صفحة للطباعة print ، تمكنني هذه المنصة من استعمال الواجهة الافتراضية لها ، كما يمكنني إعادة تسمية الـid و اختيار نوع Doctype ، يمكنني اختيار عدد الأعمدة في المشروع ، و أخيرا يمكنني أن أظهر الكود كاملا لمراجعته لو دعت الضرورة، يمكنك أن تحملها من صفحة التحميل في الموقع الأصلي ، كما يمكنك أن تزداد قراءة عن طريقة الاستعمال و الضبط من هنا .
- Blueprint :منصة Blueprint تم عملها من طرف الطالب النرويجي Olav Frihagen Bjørkøy ، تتوفر هذه المنصة على عدة مميزات ، كسهولة الواجهة الافتراضية ، و الفروقات الظاهرة بين أحجام العناوين و الخطوط ، و ورقة تنسيق خاصة بالطباعة ، وورقة تصفير اعدادات ( reset ) ، هذه المنصة هي الأبسط و الأسهل و الألين في التعامل ، يمكنك تحميلها من الصفحة الرئيسية من الموقع الأصلي .
- YUI : و هي مكتبة ياهو ، او باسمها الكامل Yahoo! UI Library CSS Foundation ، تحتوي على العديد ممن الخدمات التي قد تفيد المقدم على مشروع ويب و التسهيل عليه بعضص الأوامر ، مثل : Reset CSS ، Base CSS ، Fonts CSS و Grids CSS .
- لا ننس كذلك الـ framework التي يقدمها لنا برنامج الدريم ويفر ، ففيه امثلة كثيرة و جاهزة و يمكنك التعديل عليها و بناء موقعك أو مشاريعك انطلاقا منها .
ما دور الملفات التصفيرية reset css
طبعا ، تعلب دورا مهما في المشاريع حيث تصفر كل إعدادات المتصفحات الافتراضية ، و تجعلها بلا اعدادات إن صح القول ، مما يعطيك الحق بالتعديل عليها بما يلائمك و يلائم احتياجاتك ، هناك ملفات تصفيرية كثيرة ، سنذكر بعضا منها :
- Tripoli
- Reset CSS Reloaded : لصاحبه Eric Meyer
- ملف التصفير من مكتبة ياهو : Yahoo! UI Library وقد تكلمنا عنها قبل
- CSS Global Styles Reset لصاحبه Kyle Neath
- CSS Global Reset لصاحبه Christian Montoya
- Master Stylesheet : وهو ملف تصفير عادي و جيد لمن أراد استعماله .
في الحقيقة الملفات التصفيرية ليست بالشيء الصعب ، و يمكن لأي أحد ضابط للغة ، قديم في التعامل مع اوامر css ان يعمل ملفا خاصا به للتصفير ، يستعملها في مشاريعه .
فضلا .. لا تستعمل framework css
هذا الذي جعلني اكتب كل هذه المقدمة عن framework في css و انواعها ، طبعا هذه الجملة التي أدعو فيها لعدم استعمال المنصات الجاهزة في css ن هي خاصة بالمطورين فقط ، اما غيرهم من أرباب المواقع العاديين ، أو من الهواة ، فلا أقصدهم بكلامي ، و إنما انصحهم باستعمال framework في css
اعلم أخي المطور ، ان باستعمالك أي من المنصات التي ذكرت أعلاه ، فأنك تقع في عدة أخطاء و تجلب على نفسك سلبيات كثيرة ، قد لا تعرف ضررها إلا مع مرور الزمن ، فمن السلبيات :
- التكرار : و الذي يحصل في الأوامر ، كأنك تعمل بأي برنامج تحرير كالدريم ويفر ، و لا تدر ما يحصل داخل أسطر الأوامر ، و إنما تطلع فقط على الواجهة و الشكل
- ستبني مشروعك على مجهودات مطور آخر .
- عدم التنظيم في تسمية id و class في أغلب الأحيان
- زيادة الأوامر من حيث لا تدر ، فالـ framework يضم كل اوامر css و كل الحالات ، و انت قد تقدم على مشروع صغير لا تحتاج فيه اغلب الأوامر الموجودة في المنصة
- عدم بنائك لكود css بيدك ، مما يدل على المتاهة عند الحاجة للتعديل و البحث عن id أو class المقصود
- بالنسبة للملفات التصفيرية ، قد لا تحتاج كل الأوامر التصفيرية ، إذا كان مشروعك متخصصا او صغيرا ، مما يجعل الأوامر تزداد و تكبر حجم الملفات بلا داعي
- الاتكال على هذه المنصات ، يجعل المطور يجهل الفروقات بين المتصفحات ، و التي يكتسبها مع المدة و العمل
إذا ؟؟ ما العمل ، إذا كنت لا تنصحني كمطور أن اعمل على هذه المنصات ؟؟ فما العمل ؟ هل اكتب كل مشروع أبدأه من الصفر ، و أضيع الوقت و الجهد ؟؟؟
لا . و إنما حاول أن تطور framework خاصا بكـ ، تعلم ما فيه و ما في أسطره ، و تعرف كل مسمى فيه ، اجعل مشروعا فارغا ، تبدأ به و منه كل مشروع ، اما بالنسبة للملفات التصفيرية ، فاجعل واحدا خاصا بك ، لا يزيد عن احتياجات مشاريعك ، و إن دعت الضرورة فاجعل واحدا للمشاريع الكبيرة و آخر للصغيرة ، حتى لا تقع في الخلط .
أخيرا ، لعلكم لاحظتم في كل الروابط التي ذكرت أعلاه أنها لمطورين غرب، فماذا عن العرب !!!!
هذه دعوى لكل الإخوة المطورين العرب للنهوض بالمستوى العربي لعمل مشاريع مفيدة للكل ، من منصات عربية ، و برامج مفتوحة المصدر و غير ذلك ،على أمل أن يصلح الله حالنا ..
آمل أن تجد هذه الدعوى آذانا صاغية ، كما آمل أن تكون قد استفدت من الدرس و السلام عليكم ورحمة الله وبركاته
هذه التدوينة نُشرت
في السبت, 15 أغسطس, 2009 عند 1:39 م و مصنفة تحت تصنيف css , xhtml, تطوير.
يمكنك متابعة أي تعليقات عبر رابط RSS 2.0.
يمكنك ترك تعليق, أو تعقيب من مدونتك.
الوسوم :css, framework, reset, مطور
-
لتكون على علم بآخر المواضيع و المقالات المضافة في fez-soft blog يمكنك الاشترك في :
- خلاصات المقالات
- خلاصات التعليقات
- متابعة الكاتب على twitter
- القائمة البريدية : بمجرد أن تضع بريدك الالكتروني و تشترك ، سنصلك قائمة بآخر المواضيع المضافة في المدونة تلقائيا إلى بريدك الالكتروني .
مرحبا ، اسمي محمد شاطر ، Mohammed chater , أعرف تحت مسمى Fez-Soft, طالب و مصمم و مطور تطبيقات ، من فاس المغرب . . يمكنك أن تتعرف علي اكثر من 
تدوينة رائعة و مبدعة كالعادة طبعا
أنا متفق معك مليون بالمئة في كل ما ذكرته, فقط لي ملاحظة: ” اما غيرهم من أرباب المواقع العاديين ، أو من الهواة ، فلا أقصدهم بكلامي ، و إنما انصحهم باستعمال framework في css ” حسنا أظن أنني مختلف معك قليلا, فالمطور إن كان مبتدأ عليه بتجنب الـframeworks الجاهزة كـ960grid system مثلا أو غيرها, و السبب هو نفس ما قلته في عرضك للسلبيات .. و بالأخص أن هذا المبتدأ لن يدرك ما يحصل في الكود و لن يفهمه ويتقنه ما لم يكتبه يدويا و الأمر أشبه باستخدام الـ dreamweaver أو الـ frantpage..
شخصيا ,رغم أني لست مطورا, فأنا أستخدم ملف الـ reset من Eric Meyer مع تعديلات كثيرة بما يناسبني حاليا, و هذا لحين كتابة ملف خاص بي ..
عذرا على الإطالة
جيد ، لكنني قصدت أصحاب المواقع ممن لا يهتمون لجانب التطوير ، فالمنصات الجاهزة على الأقل ستجعل مواقهم موافقة للمعايير القياسية ، بغض النظر عن باقي التكرارت و الاخطاء التي قد يقعون فيها ، إلا أن هذا أسلم من لا شيء .
نعم هذا صحيح بكل تأكيد..
عن نفسي استخدم YUI من ياهو واجدها طريقة فعالة لضبط بناء الصفحات
فما الذي يدفعنى لإضاعة الكثير من الوقت فى التعديل لكل متصفح لكل مشروع اقوم به
منصات العمل توفر الكثير من الوقت المهدور لتصحيح ظهور صفحاتنا لكل متصفح
إذا أعدت التمعن في آخر فكرة تكلمت عنها في السلبيات وما بعدها ، يمكنك ان تعلم من المخاطب بكلامي .. كما انني لم أقل أن تضيع الوقت في كل مشروع ولكن حاول أن تطور منصة خاصة بك تعلم ما فيها حتى يمكنك الاستفادة من مشاريعك أكثر و أكثر و تتجنب كل السلبيات المذكورة أعلاه
بالتوفيق
سلبيات ال css framework التى ذكرتها هى نفسها سلبيات أى فريم وورك بصفة عامة
فال framework بصفة عامة تقف دائما فى المنتصف … فى السى أس أس كما ذكرت ستؤدى الى التكرار وعدم التنظيم
لكنها ستنجز العمل فى وقت قياسى كما أنها تتلافى الفروق بين المتصفحات
والفريم وورك فى البى أتش بى ايضا … قد لا تكون مناسبة لموقع صغير …. وتؤدى لكثرة الملفات وعدم التنظيم
لكنها أيضا تلعب على عامل الوقت …. وتكون أفضل للمواقع الكبيرة
@sfsf الفرق بين منصات الـ css و php ، أن منصات css تحمل كل ملفاتها من المستعرض سواء استخدمت كلاساتها ام لا ، وهذا عيب لو كان الملف كبيرا ولن يتم استعمال كامل محتواه ، بغض النظر لو كان أكثر من ملف .
عكس php فإن منصاته الجاهزة ، مهما كبرت ، فلن يتم تحميل الملف إلا إذا تم استدعاء دالة منه او كلاس معين ، هنا ولو زادت الملفات ما زادت ، فالأصل بالاستدعاء لا بالعدد ، لان الحكمة سرعة التحميل ..
أرجو ان تكون وصلت الفكرة
فكرة جيدة ان يقوم كل مطور بعمل فريم خاص له
هل هناك اى مواقع إرشادية لبداية? Frame work
في الحقيقة ، لا أظنه توجد ، و حتى و إن وجدت دروس لوضعك منصة خاصة بك ، فستكون ارشادية و سطحية فقط ، لأن الأصل ينبني على ثلاثة أشياء مهمة :
- دراسة اللغة دراسة معمقة
- التجربة القديمة في التعامل مع المشاريع
- نوع المشاريع الخاصة بكـ
و هذا لن يأتي إلا بمرور الزمن و اكتساب خبرة
(أعرف أنك تتكلم على ال CSS Framworks فقط) ولكن كل الأمور التي أطلقت عليها “عيوباً” (مع أني لا أتفق مع هذا على الإطلاق) كل هذه الأمور تنطبق على فكرة الـ Framework في شكل عام (كما ذكر أحدهم أعلاه).. فمدامك (ومع أسفي على هذا التعبير) عم “تتفلسف” على غيرك وعلى إستخدام ال frameworks الجاهزة. ليش حضرت جنابك ما بتبطل إستخدام Wordpress وبتساويلك شي شغلة خاصة فيك؟ وشو رأيك تبطل كمان إستخدام jQuery بطريقك…
أنا لا أقصد أن هذا ما عليك فعله بالطبع، بل ما أقصده أن الـ Frameworks هي جزء من حياة المطور. فعملك كـ “مطور” لا يقتضي منك أن “تخترع” العجلة في كل مرة! بل في الأساس كلمة “مطور” تعني الشخص الذي “يطور” على الأشياء، ولا يخترعها من الصفر.
أي، بدل أن تنصح المطورين ببناء Framework جديد خاص بهم، لماذا لا تنصحم بإتقانه من كافة جوانبه! بذلك يصبح الشخص خبيراً بها لإستخدامها أو حتى ليساعد في تطويرها! وخصوصاً الـ CSS Framworks، فأعتقد شخصياً أن YAML على سبيل المثال، تحتاج بحق إلى “دراسة” لكي تتقن… ولكن هذا لا يمنع من إستخدامها…
لا أدري ما تعنيه بالضبط بكلمة “تنظيم”. ولكنني متيقن من أنك نفسك إذا أعدت النظر في ما كتبت، أو فكرت فيه من وجهة نظر أخرى فإنك ستعرف ما أعنيه…
أرجو أن يتم النشر حتى يستفيد الجميع
مطور ويب : اهلا بكـ ، كلامي في الموضوع كله على منصات css فقط ، ولاتخلط بينها و بين الووردبريس أو jQuery
بالنسبة للتنظيم الذي لم تفهم المراد منه ، وهو التنظيم في تسميات ال id و class ، حيث أنه في المنصات الموجودة ، تتم التسمية هكذا : id=”yaml1″ و id=”yaml2″ و هكذ ، وكذلك الحال بالنسبة لل class ، وهذا لن يساعدك في تطوير أو تعديل مشروعك لاحقا ، إلابالبحث عن كل تسمية على حدى ، وهذا تضييع للوقت في حد ذاته
أكرر ، كلامي في الموضوع على منصات css فقط ، فأرجو عدم الخلط
بالتوفيق
( أرجو أن يتم التركيز على اللغة العربية في التعليقات ، لأنني لم أفهم بعض عباراتك )
بطبيعة الحال لا اتفق معك عزيزي مطور ويب
ولاسباب عديدة، ان كنت مستعدا لمعرفتها، فانا على استعداد لشرحها كاملة – ولست وحدي في هذه القناعة بل معظم مطوري الويب الاجانب الذين اعرفهم واقرأ لهم -
الشخص الذي يعتمد دائما على الاشياء الجاهزة (framework – ملحقات – قوالب أجنبية … ) لن يطور من مستواه.
والأفضل كما ذكرت اخي محمد ان ينشئ مكتبة خاصة به للأشياء التي يستخدمها دائما بدل الاعتماد على مكتبات الغير.
شكرا على الشرح
[...] [...]
[...] Brushes ، الخامات Textures ، منصات العمل الجاهزة أو Framework إذا كنت لا تزال تستخدمها … إلخ شخصياً أحتفظ بجزء يبلغ 60 جيجا من مساحة القرص [...]
أشكرك أخي فيز على الشرح الرائع ..
وأؤيدك بشدة في كلامك ..
أنا أستخدم الستايل شيت منذ زمن ولكن لأول مرة أقرأ عن ما أسميته الملفات التصفيرية !!
فضلا .. أود التعرف عليها أكثر ..
وكيف أستخدمها .. هل أمدجها في ملف cssالرئيسي الذي تأخذ منه جميع الصفحات تنسيقها ؟؟
أم أفرده في ملف آخر .. ؟؟
أشكر لك هذه التدوينة وطولة بالك
:)
اهلا ابو الفوارس ،الملفات التصفيرية لتصفير اعدادات تنسيق بعض العناصر ، مثلا ul تاخذ قيمة افتراضية في padding تختلف من متصفح الى آخر هذه القيمة اذا أردت تصفيرها فإنني أعطيها padding: 0;
وهكذا مع جميع العناصر التي تحتاج تصفير ،
- فائدتها بكل بساطة ان تعيد اعطاء التنسيقات التي تريد لكل العناصر بلا استثناء لتتحكم بموقعك جيدا ،
- استعمالها ، سواء بتخصيص ملف خاص بها يتم استدعاؤه قبل الملف الرئيسي للتنسيق حتى يتم التصفير اولا و بعد ذلك تعطي الننسيقات ، أو يتم ادراج اوامر التصفير في اول ملف التنسيق الخاص بك ،
بالتوفيق
جيد ..
لنفترض أني أريد أستخدامها بأن أخصص لها ملف مستقل ..
هل أدرج سطرين تحت بعض .. مثل :
بحيث يكون الأول هو التصفير
والثاني هو التنسيق
أم أن هناك طريقة أخرى ..
نعم ، المهم ان يكون الملف التصفري قبل أي ملف تنسيق آخر
موفق
[...] Brushes ، الخامات Textures ، منصات العمل الجاهزة أو Framework إذا كنت لا تزال تستخدمها … إلخ شخصياً أحتفظ بجزء يبلغ 60 جيجا من مساحة القرص [...]
بارك الله فيك أخي على الموضوع الرائع
شخصيا لا أحب استعمال أي Framework و أحب كتابة مشاريعي بيدي من أجل تنظيمها و فحصها.
يقول الرسول “أفضل العمل عمل الرجل بيديه و كل بيع مبرور”
أشكرك أخي محمد على هذا التنبيه المهم.
لقد أضعت كثيراً من وقتي في تجريب أُطر العمل كلها، فلم أستفد منها إلا الأفكار وطريقة البرمجة الاحترافية، أما ان استخدم واحداً منها فلم أفعل ذلك باستثاء إطارين فقط.
علينا الاجتهاد في أُطر عمل جديدة ، المشكلة في أُطر العمل الحالية أن يبدأ وهو صغير مناسب للأعمال الصغيرة والمواقع البسيطة ثم ما يلبث إلا أن يتضخم ، فينتقل الناس إلى تطوير إطار آخر ثم يتضخم وهكذا.
أنا كتبت هذا الرد لأشكرك على طول نفسك في الشرح والتدوين خلافاً لغيرك
وجزاك الله خيراً
صراحه لا احب الفريم ووركس ولا اعتقد ان ال css صعبه وتحتاج لمسهلات
اعتقد ان ال css سهله وممتعه ولا تأخذ ذلك الوقت واذا اردت ان تحتفظ ببعض التنسيقات لبعض الاشياء مثل ال جداول او ما
شابه فتستطيع الاحتفاظ به لنفسك وبعد فتره يكون لديك مكتبة كامله تعتبر الفريم ووركس الخاص فيك
وباستخدام ال framworks الجاهزه اعتقد انك تقوم بالتصميم من وجه نظر المصمم الصانع لها وبامكانك اتعدل صحيح
لكن لا اعتقد انه رح ياخد منك وقت انك تعملها من الصفر
هذا راي
بارك الله فيك ، تدوينه رائعه ومفيده