بداية، أود أن أوضح أنني لست ضد التشبيك في التصميم، بل أنا ضد التشبيك في إعادة الإعمار. يجب أن يشير هذا على وجه التحديد إلى طريقة YUI لشبكة ربط اسم الفئة. يمكنك إلقاء نظرة على الجزء التالي من التعليمات البرمجية:
مثال لكود المصدر
[www.downcodes.com] <div معرف = "yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
يمكنك أن ترى بوضوح أن اسم yui-u أو yui-g هنا لا معنى له. هناك أيضًا أولى الإنجازات المتعلقة بالأداء. لا أعلم أن هناك جملة في ملف PPT المصاحب لكتاب "إعادة بناء موقع الويب" قرأها الجميع - "بعد إزالة علامات المظهر من الصفحة، ستصبح إعادة تصميم الموقع والمحتوى الحالي موفرًا للجهد للغاية (في وفي الوقت نفسه، فهو أرخص بكثير). إذا كنت ترغب في تغيير مخرجات الموقع، فأنت تحتاج فقط إلى تغيير ورقة الأنماط دون تغيير الصفحة نفسها "لا يمكن للكود المشابه للكود أعلاه تحقيق الفصل بين البنية والأداء. والتغييرات سوف تسبب المشاكل التالية:
عند تغيير الأداء يجب نقل HTML تعديل جميل يتطلب نقل ثلاثة خطوط عمل مما يستهلك الكثير من الموارد البشرية.
سيظهر المربع الخامس المسمى "الأول".
سيظهر مربع يسمى "عرض 180" وهو في الواقع عرض 240.
سيكون هناك تخطيط يسمى "أربعة أعمدة" وهو في الواقع ثلاثة أعمدة.
ستكون هناك كلمة تسمى "أزرق" وهي في الواقع حمراء.
وهي تعادل "المربع_الأيسر" و"المربع_الأيمن" اللذين يحظىان بشعبية كبيرة بين العديد من الأشخاص الآن، وبعد مراجعة سريعة، أصبحا "المربع_الأيمن" على اليسار. أليس هذا بمثابة تشويه للحقيقة؟ ولكن في الواقع الشيء الأكثر أهمية هو النقطة الأولى، هل تختلف طريقة العمل هذه عن طريقتنا السابقة في العمل مع تخطيط الجدول؟ إذا طلبت تغيير الأسلوب، فستتبعك الشركة بأكملها (التصميم، الصفحة، التطوير، الاختبار الوظيفي، مراقبة بيانات CE).
بعد كتابة هذا، نظرت إلى الوراء وغيرت العنوان ليصبح المقال الثاني عن CSS في سلسلة "هذه ستكون ثورة". إذا كان ما ورد أعلاه غير صحيح، فاسمح لي أن أعرض لك مقتطفًا برمجيًا من إصدار جديد لمشروع توليته مؤخرًا:
مثال لكود المصدر
[www.downcodes.com] <div id="index_news" class="mode">
<h3 class="title">أخبار الرفاهية العامة</h3>
<div class="content">
<ul>
<li><a href="#">عنوان الخبر، عنوان الخبر، عنوان الخبر، عنوان الخبر</a></li>
<li><a href="#">عنوان الخبر، عنوان الخبر، عنوان الخبر، عنوان الخبر</a></li>
<li><a href="#">عنوان الخبر، عنوان الخبر، عنوان الخبر، عنوان الخبر</a></li>
<li><a href="#">عنوان الخبر، عنوان الخبر، عنوان الخبر، عنوان الخبر</a></li>
<li><a href="#">عنوان الخبر، عنوان الخبر، عنوان الخبر، عنوان الخبر</a></li>
<li><a href="#">عنوان الخبر، عنوان الخبر، عنوان الخبر، عنوان الخبر</a></li>
<li><a href="#">عنوان الخبر، عنوان الخبر، عنوان الخبر، عنوان الخبر</a></li>
<li><a href="#">عنوان الخبر، عنوان الخبر، عنوان الخبر، عنوان الخبر</a></li>
</ul>
</div>
<a class="more" href="#">المزيد</a> </div>
مثال لكود المصدر
[www.downcodes.com] .وضع{
الموقف:نسبي؛
تعويم: يسار؛
حجم الخط: 12 بكسل؛
}
.الوضع h3.العنوان،
الوضع h4.العنوان {
اللون: #234C00؛
الحشو: 5px 10px؛
حجم الخط: 14 بكسل؛
}
.الوضع .المزيد{
أعلى: 5 بكسل؛
اليمين: 10 بكسل؛
حجم الخط: 12 بكسل؛
اللون: #4282ab؛
الموقف:مطلق؛
}
.الوضع .المحتوى{
واضح:كلاهما؛
}
.الوضع .المحتوى: بعد {
محتوى:""؛
عرض:كتلة؛
الارتفاع: 0؛
ارتفاع الخط:0;
واضح:كلاهما؛
الرؤية:مخفية؛
}
#index_news.mode،
#index_bbs.mode،
#index_area.mode{
الخلفية:url(small_gray_grid.png) كرر-y -400px أسفل؛
العرض: 200 بكسل؛
الهامش: 5px 0 5px 5px؛
}
#index_news.mode h3.title،
#index_bbs.mode h3.title{
الخلفية: url(small_gray_grid.png) بدون تكرار -200 بكسل أعلى؛
}
#index_news.mode .content،
#index_bbs.mode .content،
#index_area.mode .content{
الخلفية: url(small_gray_grid.png) بدون تكرار -600 بكسل أسفل؛
عرض:الجدول؛
}
يمكنك رؤية مزايا التفكير المعياري:
يمكن استخدام الوحدات الموجودة بشكل شبه تلقائي لتوفير وقت وجهد تطوير التعليمات البرمجية.
يمكن تكييفه بحرية كبيرة مع الاحتياجات غير الطبيعية المختلفة لأي مدير منتج وأي رئيس.
لا تتطلب أي تغييرات في الأداء أعلاه مشاركة المطورين، ولا يلزم إجراء أي اختبار وظيفي.
ترتبط مراقبة بيانات CE بالمعرف، وليست هناك حاجة لإعادة ضبط الواجهة.
كل شخص مسؤول عن التطوير التكراري السريع لوحدة واحدة.
أيضا بقدر ما يتعلق الأمر بالكود. العنوان هو العنوان، والمضمون هو المضمون؛ لن تشوه الحقائق أبدًا وتصفع نفسك على الفم.
لدي غرابة. يعجبني أنه أثناء المقابلات أقوم دائمًا باختبار لغة XHTML الخاصة بالمحاور أولاً. تمامًا مثلما قام المعلم بتجنيد متدرب في الماضي، كانت القدرة والذكاء ثانويين، وكانت الشخصية هي الأولوية الأولى.
أعتقد أن XHTML يشبه جوهر الشخص، وCSS يشبه طريقة الشخص وموقفه من القيام بالأشياء، وJS يشبه سلوك الشخص وأسلوبه في القيام بالأشياء. إن الفصل بين الثلاثة بالإضافة إلى بعض التفاعلات بين تحسين محركات البحث والتفاعل بين الإنسان والكمبيوتر هو ما نسميه إعادة بناء موقع الويب، وهو شخص جيد جدًا. في الماضي، كان البعض يعتقد دائمًا أن CSS هو العنصر الأكثر أهمية في موقع الويب، وهو في الواقع يمثل نظرة للحياة. في الواقع، من الصعب على أي شخص أن يعيش في مجتمع اليوم دون طريقة وسلوك جيدين في القيام بالأشياء، ولكن إذا كانت طريقة وسلوك القيام بالأشياء مركزة للغاية، فسوف يصبح شخصًا ماهرًا في الخداع ويفعل الأشياء بلا ضمير. .
هذا ما أردت دائمًا قوله مع CSS، يمكنك تغيير الترتيب من اليسار إلى اليمين إلى الترتيب من اليمين إلى اليسار، إنه ساحر على صفحة الويب. لا يمكنك إساءة استخدامه ليصبح شخصًا يجيد الخداع ويفعل الأشياء دون ضمير.