استبدال CSS الحالي في موقع الويب (إعادة البشرة) أفضل الممارسات دون تغيير HTML

https://stackoverflow.com/questions/2535742

css
skinning

22-09-2019
|

سؤال

أستطيع أن أرى عددًا من الإجابات الجيدة الأخرى على الأسئلة المتعلقة بأفضل ممارسات CSS على فائض المكدس:

لكنني أعتقد أن لدي مشكلة مختلفة.

أحاول "إعادة البشرة" موقعًا موجودًا تم بناؤه بشكل جيد div'رمل ul's ، etc ، ولديه ملف css جيد ، لكن عندما أبدأ في إجراء تغييرات على css ، أجد بسرعة أنني كسر التصميم. شعوري هو أنه من الصعب للغاية أن أتعرف على كيفية عمل جميع CSS معًا ، وبالفعل ما يؤثر CSS على عناصر الوالدين والأخوة في HTML.

لذا ، فإن سؤالي هو "ما هي أفضل الممارسات حول إعادة تلميع موقع الويب الحالي عن طريق استبدال CSS فقط وعدم تعديل HTML الحالي؟" لا يمكنني تغيير الفصول الدراسية ، المعرفات ، التسلسل الهرمي للعقدة ، إلخ.

مثال على الموقع المعين الذي أحاول إعادة البيع هو http://demo.nopcommerce.com/.

يمكن أن تكون CSS الحالية معقدة/مفصلة مثل هذا المستخلص من ملف CSS الرئيسي:

.header-selectors-wrapper
{
    text-align: right;
    float: right;
    width: 500px;
}

.header-currencyselector
{
    float: right;
}

.header-languageselector
{
    float: left;
}

.header-taxDisplayTypeSelector
{
    float: right;
}

.header-links-wrapper
{
    float: right;
    text-align: right;
    width: 570px;
}

.header-links
{
    border: solid 1px #9a9a9a;
    padding: 5px 5px 5px 5px;
    margin-bottom: 5px;
    display: inline-table;
}

.order-summary-content .cart .cart-item-row td, .wishlist-content .cart .cart-item-row td
{
    border-bottom: 1px solid #c5c5c5;
    vertical-align: middle;
    line-height: 30px;
}

.order-summary-content .cart .cart-item-row td.product, .wishlist-content .cart .cart-item-row td.product
{
    text-align: left;
    padding: 0px 10px 0px 10px;
}

.order-summary-content .cart .cart-item-row td.product a, .wishlist-content .cart .cart-item-row td.product a
{
    font-weight: bold;
}

سيكون موضع تقدير أي مساعدة.

المحلول

اقترح Crimson_penguin و Jon P أدوات جيدة للاستخدام ، لذلك سألقي بعض النصائح العامة لك.

إليك ما سأفعله في وضعك ، على الرغم من أنه ليس الحل.

بادئ ذي بدء ، اعرف كيف تريد أن ينظر المنتج النهائي. احصل على تصميم جاهز حتى تعرف من البداية حيث تريد أن ينتهي به الأمر. لا تبخل على أي تفاصيل أيضًا ، "كلما عرقتك في التدريب ، قل تنزف في المعركة"

ثانياً ، تعرف على CSS الحالي حيث ستحصل على حميمية للغاية قريبًا. أعد طلب كل شيء إذا شعرت أنه من الضروري لشيء أكثر راحة معه ، ربما من خلال تجميع الأشياء التي تعمل معًا على التسلسل الهرمي.

علي سبيل المثال:

#navigation {....}
   #navigation #left {....}
     #navigation #left h1 {....}
     #navigation #left p {....}
   #navigation #right {....}

بمجرد أن يكون لديك تصميم ومعرفة الكود الحالي ، ابدأ في إجراء بعض التغييرات. ابدأ بالعناصر البسيطة ذات المستوى المنخفض أولاً مثل كتلة النص أو صورة. ثم يمكنك البناء حول هذه. كما ذكرت الملصقتان السابقتان ، يمكن أن يكون Firebug (لـ Firefox) و Dom-inspector (ل Safari/Chrome) مفيدين للغاية حيث يمكنك تجربة الأشياء على الصفحة دون الالتزام بأي شيء حتى ترى كيف تبدو.

إنها عملية طويلة ومجهدة ، ولكن مع القليل من الصبر والمثابرة ستحصل على أي وقت من الأوقات.

نصائح أخرى

إذا كنت أفعل ذلك ، فسأستخدم Pebkit's Dom-inspector على نطاق واسع (متوفر في Safari أو Chrome بالنقر بزر الماوس الأيمن على صفحة واختيار Endpect Element). أتوقع أن يساعد ذلك كثيرًا في التفاف عقلك حول هيكل العقدة/الفئة/المعرف ، بالإضافة إلى المساعدة في تصحيح CSS الجديد وأنت تكتبه.

إنه أكثر ملاءمة بكثير من مجرد النظر إلى المصدر ، لأنه في عرض الأشجار ، وتنهار العقد افتراضيًا. ولديه بعض الميزات المفيدة للغاية لتفتيش المقاييس (العرض/الارتفاع/الحشو/الحدود/الهامش) للعقد ، وكذلك إظهار النمط الذي ينطبق عليها ، بأي ترتيب ، والنمط النهائي المستخدم.

أود أن أقترح استخدام Firebug قم بتوصيل Firefox. يمكنك استخدام هذا لمعاينة التغييرات على CSS عن طريق تحرير CSS الحالية أثناء عرض الصفحة في Broweser دون إجراء تغييرات دائمة على ملف CSS. ستحصل على فكرة عن "سلسلة" الأنماط وما إلى ذلك.

أداة مفيدة للغاية ASWELL لتصحيح أخطاء JavaScript.

لقد بدأنا للتو جهدًا ضخمًا من إعادة الصناديق في عملي - حوالي 13000 صفحة JSP ، حيث يتجاوز التطبيق أكثر من 1.5 مليون سطر من التعليمات البرمجية.

ضحكت خلفتي في أول اجتماع للتخطيط لدينا لأنه في معظمه ، كان الجميع يفترضون أننا سنقوم بإعادة إنشاء يدوي لكل صفحة. ستكون إعادة التجديد اليدوي آخر شيء مطلقًا الذي سأفكر فيه - إنها أغلى طريقة للقيام بذلك والتي تنتج أقل الفوائد. يمكنك الحصول على إصدار من البرنامج لا يجعل إعادة صياغة أي شيء أسهل ، ومع ذلك يجب الحفاظ عليه بالتوازي لبقية الوقت. بمعنى آخر ، تحصل على مسؤولية.

على أي حال ، فإن ما سأقترحه هو إنشاء أو العثور على أداة مساعدة تقوم بمسح إخراج HTML لصفحات JSP حتى يتمكن من التقاط CSS النهائي الفعلي المستخدمة في كل عنصر. سيتجنب هذا الاضطرار إلى كتابة محلل CSS الخاص بنا والذي يحاكي قواعد محددات CSS ، وما إلى ذلك. بدلاً من ذلك ، سنحصل على القائمة النهائية الكاملة لكل قيمة CSS لكل عنصر وكتابة هذه المعلومات إلى مجموعة من جداول قاعدة البيانات. من هناك ، يمكننا تحليل CSS التي تبحث عن القواسم المشتركة التي يمكننا بعد ذلك الكتابة كطبقات مشتركة أو مزيج (باستخدام SASS) ، واكتب الباقي كطبقات محددة العناصر التي تستخدم تلك التعريفات المشتركة.

بعد إخراج جميع CSS ، ستقوم الأداة بإعادة كتابة ملفات JSP باستخدام فئات CSS المناسبة على كل عنصر.

تجدر الإشارة إلى أن هناك عدد قليل جدًا من القواسم المشتركة بين أي من الصفحات المعنية. إنني أظن أننا نرفع الأداة عبر العديد من التكرارات ، ربما يمكننا الوصول إلى النقطة التي يمكننا فيها تحديد أجزاء محددة من الصفحة على أنها تنتمي إلى مجموعة من مكونات مستوى الصفحة مثل اللوحات والمجموعات الميدانية والحاويات ، إلخ. إذا استطعنا حدد هذه العناصر في كل صفحة ، يمكننا في النهاية ضخ المكونات الفعلية القابلة لإعادة الاستخدام بدلاً من HTML الموجودة.

أظن أن هذا هو النهج الوحيد الصحيح الذي لديه فرصة لتحويل الصفحات مع مستوى من الثقة أنه لا يوجد شيء يكسر. لن نغير هياكل عنصر HTML على الإطلاق ، لذلك في البداية ، يجب أن يظهر إخراج الأداة تمامًا كما هو الحال حاليًا ، ولكن مع وجود الهيكل الذي سيمكننا من البدء في إجراء تغييرات على المظهر عبر التطبيق بأكمله مع تعديل نقطة واحدة إلى الفئات الصحيحة ، إلخ.

لتحقيق هذه الغاية ، لقد حددت بالفعل أداة قد تفعل بالضبط ما أصفه - إنها من LinkedIn ، ويتم تسميتها كتل CSS. يذكرون أداة أخرى تستخدم لتحسين CSS المسمى Opticss (يبدو مثل "البصريات") ، ولكن يبدو أنها ليست جاهزة تمامًا لوقت الذروة.

على أي حال ، آمل أن يكون بعض هذا منطقيًا ويمكن أن يكون مفيدًا. لا تتردد في مراسلتي عبر البريد الإلكتروني مع الأسئلة أو التعليقات.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow