طرق وأدوات تطوير أنماط صفحات الويب

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



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

قضايا CSS

في بداية مشروع جديد ، تبدو الأنماط عادة بسيطة وواضحة. لنفترض أن هناك عددًا قليلاً جدًا من محددات CSS ، مثل .title ، input ، و #app ، والتي لن يكون من الصعب العمل معها.

ولكن ، مع نمو التطبيق ، تتحول الأنماط إلى كابوس. يبدأ المطور في الخلط بين محددات CSS. يكتشف أنه يكتب شيئًا مثل div#app .list li.item a . ومع ذلك ، لا يمكن إيقاف العمل ، لذلك يواصل المبرمج استخدام الإنشاءات المماثلة ، يتم دفع رمز CSS في مكان ما في نهاية الملف. وحقاً - من يهتم بالأساليب؟ و CSS نفسها هراء ... والنتيجة هي 500 سطر من CSS الرهيبة غير المدعومة تمامًا.

أود منك أن تقرأ هذه المقالة وتنظر في مشاريعك السابقة وتفكر: "حسنًا ، واو ، كيف يمكنني كتابة هذا؟"

ربما تفكر الآن أن "كتابة CSS" تعني استخدام أطر CSS. بعد كل شيء ، فهي مخصصة بدقة لتسهيل العمل مع الأنماط ، ومن خلال استخدامها يكتبون كود CSS جيدًا. كل هذا صحيح ، ولكن أطر CSS لها عيوب معينة:

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

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

SCSS

في الأمثلة الخاصة بي ، سأستخدم SCSS . هذا هو المعالج المسبق CSS. في الواقع ، SCSS هي مجموعة شاملة من CSS. لديها بعض الميزات المثيرة للاهتمام للغاية ، مثل المتغيرات ، والمنشآت المتداخلة ، واستيراد الملفات ، و mixins. سنناقش ميزات SCSS التي سنستخدمها.

▍ المتغيرات

في SCSS ، يمكنك استخدام المتغيرات. الميزة الرئيسية لاستخدام المتغيرات هي إمكانية إعادة استخدامها. تخيل أن لدينا مجموعة من الألوان للتطبيق. اللون الرئيسي هو الأزرق. ونتيجة لذلك ، يتم تطبيق هذا اللون حرفيا في كل مكان. يتم استخدامه في خاصية background-color للأزرار ، في خاصية color لعنوان الصفحة ، وفي العديد من الأماكن الأخرى.

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

 //   $primary-color: #0099ff; //   h1 { color: $primary-color; } 

construct الإنشاءات المتداخلة

يدعم SCSS الإنشاءات المتداخلة. هنا CSS عادي:

 h1 { font-size: 5rem; color: blue; } h1 span { color: green; } 

بفضل دعم الإنشاءات المتداخلة ، يمكن تحويلها على النحو التالي:

 h1 { font-size: 5rem; color: blue; span {   color: green; } } 

هذا الخيار أسهل للقراءة ، أليس كذلك؟ بالإضافة إلى ذلك ، من خلال استخدام الإنشاءات المتداخلة ، يتم تقليل الوقت اللازم لإنشاء المحددات المعقدة.

ragالتجزئة والاستيراد

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

يمكن إنشاء الملفات التي تحتوي على أجزاء من أوصاف الأنماط عن طريق إضافة تسطير أسفل السطر في بداية أسمائها: _animations.scss و _base.scss و _variables.scss وما إلى ذلك.

يتم استخدام التوجيه @import لاستيراد هذه الملفات. إليك كيفية استخدام هذه الآلية:

 //  _animations.scss @keyframes appear { 0% {   opacity: 0; } 100% {   opacity: 1; } } //  header.scss @import "animations"; h1 { animation: appear 0.5s ease-out; } 

قد تجد أن هناك خطأ في هذا الرمز. في الواقع ، الملف الذي نريد استيراده يسمى _animations.scss ، ونحن في ملف header.scss ، نستخدم الأمر @import "animations" . ومع ذلك ، ليس هناك خطأ. SCSS هو نظام ذكي بما يكفي لفهم أنه في مثل هذه الحالة ، يعني المطور الملف المقابل.

هذا كل ما نحتاج إلى معرفته عن المتغيرات والبنى المتداخلة وتجزئة الأنماط والاستيراد. هناك احتمالات أخرى في SCSS ، مثل mixins ، والميراث ، والتوجيهات الأخرى (من بينها @for ، @for ، وغيرها) ، لكننا لن نتحدث عنها هنا.

إذا كنت ترغب في التعرف على SCSS بشكل أفضل ، فألق نظرة على الوثائق ذات الصلة.

منظمة CSS: منهجية BEM

لا أتذكر عدد المرات التي استخدمت فيها المصطلحات العامة لتسمية فئات CSS. ونتيجة لذلك ، حصلت على هذه الأسماء ، على ما أعتقد ، مألوفة للجميع: .custom-input . ، صفحة .custom-input ، .custom-input . .page-2 ،. .custom-input .

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

منهجية BEM (Block ، Element ، Modifier) ​​هي نهج مكون لتطوير الويب. على وجه الخصوص ، هذا هو اصطلاح تسمية الكيان. تسمح لك هذه المنهجية بتنظيم الشفرة ، وتساعد على تقسيمها إلى وحدات ، وتساعد في إعادة استخدامها. لنتحدث عن الكتل والعناصر والمعدلات.

▍ كتل

يمكن اعتبار الكتل كمكونات. بالتأكيد لعبت كطفل في ليغو. لذلك ، قم بتشغيل آلة الزمن.

كيف يمكنك بناء منزل عادي ، على سبيل المثال؟ هنا ستحتاج إلى نافذة وسقف وباب وجدران ، وبشكل عام ، هذا يكفي. كل هذه كتلنا. إنها مهمة في حد ذاتها.

التسمية: اسم الكتلة - .block

أمثلة: .card و .form و .user-navigation و .user-navigation

▍ العناصر

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

التسمية: + __ + - .block__element

أمثلة: .post__author ، .post__date ، .post__text

▍ المعدلات

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

التسمية: + -- + - .block__element--modifier ، .block--modifier
أمثلة: .post__btn--disabled .post--important ، .post__btn--disabled

▍ ملاحظات

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

erc التمرين

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

على سبيل المثال ، إليك ما حصلت عليه من تحليل Google Store.


تحليل الموقع

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

▍ أمثلة

هنا مثال أعدته Codepen يوضح قدرات BEM. هنا نقوم بعمل شيء مثل النشر في مدونة معينة. هنا هو HTML لهذا المثال.

 <div class="post"> <span class="post__author">Thomas</span>     <span class="post__date">3 minutes ago</span> <p class="post__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sit voluptatem aut quis quisquam veniam delectus sequi maxime ullam, inventore blanditiis quia commodi maiores fuga, facere quaerat doloremque in. Nisi!</p> </div> <div class="post mt-large post--important"> <span class="post__author">Thomas</span>     <span class="post__date">2 hours ago</span> <p class="post__text">Voluptatem incidunt autem consequatur neque vitae aliquam, adipisci voluptatum. Ipsum excepturi dolores exercitationem rem ab similique consequatur nesciunt, tempora aut vel unde.</p> </div> 

إليك أنماط SCSS:

 .post { display: inline-block; padding: 1rem; background-color: #ccc; border: 1px solid #222; border-radius: 5px; &--important {   background-color: yellow; } &__author {   font-size: 1.2rem;   font-weight: bold;   color: blue; } &__date {   float: right; } &__text {   line-height: 2rem;   font-size: 1.3rem; } } .mt-large { margin-top: 3rem; } 

لكن ما حدث في النهاية.


جعل "المنشورات" باستخدام BEM

تأمل في مثال آخر. هنا ، باستخدام BEM ، نقوم بعمل الأزرار. هنا هو HTML لهذا المثال.

 <div> <button class="btn">   Click me </button> <button class="btn btn--danger">   Danger </button> <button class="btn btn--success">   Success </button> <button class="btn btn--small">   Small </button> <button class="btn btn--big">   Big </button> <button class="btn btn--border">   Border </button> </div> 

فيما يلي أنماط SCSS.

 .colors { font-size: 1.5rem; font-family: sans-serif; } .btn {   background-color: #FF6B93;   color: #fff;   text-transform: uppercase;   padding: 1.5rem 2.5rem;   border-radius: 4px;   transition: all .2s;   font-size: 1.3rem;   border: none;   letter-spacing: 2px;   cursor: pointer; &:hover {   background-color: #D15879; } &:focus {   outline: none; } &--danger {   background-color: #FF3B1A;     &:hover {     background-color: #D43116;   } } &--success {   background-color: #00D123;     &:hover {     background-color: #00AB1D;   } } &--small {   padding: 1rem 2rem;   font-size: 1rem; } &--big {   padding: 1.8rem 4.5rem;   font-size: 1.7rem; } &--border {   background-color: #fff;   color: #FF6B93;   border: 1px solid #FF6B93;     &:hover {     background-color: #FF6B93;     color: #fff;   } } } 

وهذه هي النتيجة.


تصميم الزر باستخدام منهجية BEM

تنظيم ملفات CSS: نموذج 7-1

لنتحدث عن تنظيم ملفات CSS. سيتيح لك ما تتعلمه من هذا الجزء من محادثتنا العمل بشكل أكثر إنتاجية ويساعد ، في المواقف المناسبة ، في العثور على الفور على رمز CSS الذي يحتاج إلى التغيير. من أجل تحقيق كل هذا ، نحتاج إلى دراسة النموذج "7-1".

ربما يبدو لك الآن أن هذا النموذج غريب نوعًا ما يسمى. ومع ذلك ، لا يوجد شيء غريب هنا ، واستخدامه بسيط للغاية. للقيام بذلك ، يكفي مراعاة قاعدتين بسيطتين:

1. يجب وضع جميع الملفات التي تحتوي على أجزاء SCSS في 7 مجلدات مختلفة.
2. يجب استيراد جميع هذه الملفات إلى ملف واحد ، main.scss ، موجود في الدليل الجذر الذي توجد فيه جميع هذه المجلدات.

ونتيجة لذلك ، يمكن فك تشفير اسم القالب على أنه "7 مجلدات - ملف واحد". كما ترون ، ليس الأمر صعبًا. لنتحدث عن هذا القالب بمزيد من التفصيل.

folders 7 مجلدات

في ما يلي المجلدات المعنية:

1. base : في هذا المجلد تحتاج إلى وضع الكل ، إذا جاز التعبير ، كود "القالب". نعني بكلمة "قالب" هنا جميع رموز CSS التي يتعين عليك كتابتها عند إنشاء مشروع جديد. على سبيل المثال: القواعد المطبعية والرسوم المتحركة والأدوات المساعدة (أي فئات مثل margin-right-large ، text-center ) ، وما إلى ذلك.
2. components : يشير اسم هذا المجلد بوضوح إلى ما سيتم تخزينه فيه. نحن نتحدث عن أنماط المكونات المستخدمة لبناء الصفحات. هذه هي الأزرار والنماذج وجميع أنواع أشرطة التمرير والنوافذ المنبثقة وما إلى ذلك.
3. layout : يُستخدم هذا المجلد لتخزين أنماط عناصر تخطيط الصفحة. هذا هو رأس الصفحة وتذييلها ، ومنطقة التنقل ، وأقسام الصفحة المختلفة ، والشبكة ، وما إلى ذلك.
4. pages : يحتاج المشروع أحيانًا إلى صفحات لها نمط خاص بها ، والذي يختلف عن نمط الصفحات الأخرى. تقع أوصاف أنماط هذه الصفحات الخاصة هنا في هذا المجلد.
5. themes : إذا كان مشروع الويب يتضمن استخدام موضوعات مختلفة (على سبيل المثال ، شيء مثل "الوضع المظلم" أو "المشرف") ، فيجب وضع أنماط لها هنا.
6. abstracts : تدخل جميع أنواع الأشياء المساعدة في هذا المجلد - الوظائف والمتغيرات والمزيج.
7. vendors : موقع نادر بدون تبعيات خارجية. يحتوي هذا المجلد على أنماط لم يتم إنشاؤها من قبل أولئك الذين يقومون بتطوير موقع معين. هنا ، على سبيل المثال ، يمكنك حفظ ملفات مشروع Font Awesome وأنماط Bootstrap وما شابه.

ileملف main.scss

في هذا الملف يتم استيراد جميع أجزاء الأنماط التي تم ترتيبها في المجلدات السبعة أعلاه. قد يبدو بعض هذا الملف كما يلي:

 @import abstracts/variables; @import abstracts/functions; @import base/reset; @import base/typography; @import base/utilities; @import components/button; @import components/form; @import components/user-navigation; @import layout/header; @import layout/footer; 

لا أستطيع أن أوافق على حقيقة أن هذا التصميم بأكمله من سبعة مجلدات يبدو كبيرًا جدًا. ومع ذلك ، تجدر الإشارة إلى أن هذه البنية مصممة للمشاريع الكبيرة. بالنسبة للمشروعات الصغيرة ، يمكنك استخدام النسخة المعدلة من النموذج "7-1". ميزات هذا الإصدار هي أنه يمكن الاستغناء عن بعض المجلدات. لذا ، يمكنك هنا رفض مجلد vendors عن طريق وضع روابط إلى أوراق أنماط خارجية للمشروع في علامة link . علاوة على ذلك ، يمكنك الاستغناء عن مجلد themes ، لأنه ، على الأرجح ، لن يتم استخدام السمات في تطبيق ويب صغير. وأخيرًا ، يمكنك التخلص من مجلد pages ، لأنه في هذا المشروع ، على الأرجح ، لن تكون هناك صفحات يختلف نمطها تمامًا عن النمط العام. ونتيجة لذلك ، تبقى أربعة فقط من أصل سبعة مجلدات.

علاوة على ذلك ، من خلال القيام بمشروع صغير ، يمكنك الذهاب بإحدى طريقتين:

• إذا كنت تفضل استخدام ما تبقى من قالب "7-1" ، فيمكنك حفظ abstracts المجلدات components layout base .
• إذا قررت الحصول على مجلد كبير واحد ، main.scss جميع الملفات التي تحتوي على أجزاء من النمط ، مع ملف main.scss ، في هذا المجلد. قد يبدو شيء مثل هذا:

 sass/ _animations.scss _base.scss _buttons.scss _header.scss ... _variables.scss main.scss 

يعتمد بالضبط ما تختار على تفضيلاتك.

هنا ، إذا كنت مستوحى من فكرة استخدام SCSS ، فقد يكون لديك سؤال حول كيفية استخدام هذه الأنماط ، لأن المستعرضات لا تدعمها. في الواقع ، هذا سؤال جيد يقودنا إلى المرحلة النهائية من حديثنا ، لتجميع SCSS في CSS.

ترجمة SCSS إلى CSS

من أجل تحويل رمز SCSS إلى CSS ، ستحتاج إلى منصة Node.js ومدير حزم NPM (أو Yarn ).

سنستخدم node-sass ، التي تسمح لنا بتجميع ملفات .scss في ملفات .css . هذه أداة سطر أوامر ، سهلة الاستخدام. أي أن node-sass يبدو مثل هذا:

 node-sass <input> <output> [options] 

تتوفر العديد من الخيارات هنا. سنركز على اثنين:

• يتيح لك الخيار -w مراقبة مجلد أو ملف. أي أن node-sass التغييرات في التعليمات البرمجية ، وعندما تحدث ، تقوم تلقائيًا بتجميع الملفات في CSS. هذه الميزة مفيدة للغاية أثناء عملية التطوير.
• يحدد الخيار --output-style نمط ملف CSS الناتج. تتوفر العديد من الخيارات هنا: nested expanded compressed . سنستخدم هذا الخيار لإنشاء ملف CSS منتهي.

إذا كنت شخصًا فضوليًا (آمل أن يكون هذا هو الحال ، لأن الفضول هو فقط لصالح المطور) ، فمن المرجح أن تكون مهتمًا بالنظر إلى وثائق node-sass .

لذا ، قررنا الأدوات ، والآن يبقى أبسط شيء. من أجل تحويل SCSS إلى CSS ، عليك اتباع الخطوات التالية:

قم بإنشاء مجلد مشروع وانتقل إليه:

 mkdir my-app && cd my-app 

بدء المشروع:

 npm init 

أضف حزمة node-sass إلى المشروع:

 npm install node-sass --save-dev 

أنشئ ملف index.html ومجلدات الأنماط وملف main.scss :

 touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss 

أضف ما يلي إلى ملف package.json :

 { ... "scripts": {   "watch": "node-sass sass/main.scss css/style.css -w",   "build": "node-sass sass/main.scss css/style.css --output-style compressed" }, ... } 

أضف الرابط المؤدي إلى ملف CSS المترجم في علامة head لملف index.html :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html> 

هذا كل شيء. الآن بعد أن تعمل على المشروع ، npm run watch وافتح ملف index.html في المستعرض الخاص بك. لتصغير CSS ، npm run build .

المرافق الإضافية

page إعادة تحميل الصفحة التفاعلية

قد ترغب في تنظيم إعادة تحميل صفحة تفاعلية لزيادة الإنتاجية. يعد هذا أكثر ملاءمة من إعادة تحميل index.html يدويًا. إليك كيفية القيام بذلك:

قم بتثبيت حزمة live-server (لاحظ أنها مثبتة عالميًا):

 npm install -g live-server 

أضف npm-run-all ، اعتمادًا على المشروع ، والذي سيسمح لك بتشغيل العديد من البرامج النصية في نفس الوقت:

 npm install npm-run-all --save-dev 

أضف ما يلي إلى package.json :

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w", }, ... } 

الآن ، بعد تنفيذ الأمر npm run start ، npm run start ، أثناء العمل على المشروع ، على الفور التغييرات التي يتم إجراؤها عليه دون إعادة تحميل الصفحة يدويًا.

package حزمة autoprefixer

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

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

يبدو الرمز مع بادئات المستعرض مثل هذا:

 -webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; -ms-animation-name: myAnimation; 

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

• نقوم بتجميع جميع ملفات SCSS في ملف CSS رئيسي واحد.
• أضف بادئات المتصفح إلى هذا الملف باستخدام autoprefixer .
• ضغط ملف CSS هذا.

هذه ، بشكل عام ، هي المرحلة النهائية من العمل على المشروع. لذلك إليك ما عليك القيام به لاستخدام autoprefixer :

أضف postcss-cli إلى المشروع - postcss-cli autoprefixer و autoprefixer :

 npm install autoprefixer postcss-cli --save-dev 

أضف التعليمات البرمجية التالية إلى package.json وقم بتعديل البرنامج النصي build :

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w",   "compile": "node-sass sass/main.scss css/style.css",   "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",   "compress": "node-sass css/style.css css/style.css --output-style compressed",   "build": "npm-run-all compile prefix compress" ... } 

npm run build , CSS-, . , , . — , , .

, ,

الملخص

, CSS, , , CSS-, , .

أعزائي القراء! -?