يمكن أن يؤدي تداخل CSS الأصلي إلى تبسيط كود CSS وتحسين تجربة التشفير بشكل عام.

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

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

التصميم المتداخل: الطريقة القديمة

التصميم المتداخل هو ميزة متوفرة في العديد معالجات CSS الأولية مثل Sassو Stylus و Less CSS. على الرغم من أن بناء الجملة قد يختلف بين هذه المعالجات الأولية ، إلا أن المفهوم الأساسي يظل ثابتًا. إذا كنت ترغب في تصميم جميع ملفات h1 العناصر في شعبة باسم فئة حاوية، في CSS العادي ، ستكتب:

.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}

في معالج CSS المسبق مثل Less CSS ، يمكنك تنفيذ التصميم المتداخل مثل هذا:

instagram viewer 
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
 }
}

تحقق كتلة الكود أعلاه نفس النتائج التي يحققها تنفيذ CSS المعتاد ، ولكنها تسهل على أي مطور يقرأ الكود فهم ما يجري. كان هذا الإحساس بـ "التسلسل الهرمي" أحد أكبر نقاط بيع معالجات CSS الأولية.

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

تصميم متداخل أصلي في CSS

لا تتضمن جميع المتصفحات دعمًا للتصميم المتداخل الأصلي. ال هل بإمكاني استخدم... يمكن أن يساعدك موقع الويب في التحقق مما إذا كان متصفحك المستهدف يدعم هذه الميزة.

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

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSStitle>
head>
<body>
<divclass="container">
<h1>Hello from the children of planet Earth!h1>
div>
<style>
 .container {
 background-color: red;
 h1 {
 color: yellow;
 }
 }
style>
body>
html>

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

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

.container {
background-color: red;
 & h1 {
color: yellow;
 }
}

في كتلة التعليمات البرمجية أعلاه ، & يعمل كمرجع إلى المحدد الرئيسي. وضع علامة العطف قبل h1 يجب أن يُعلم العنصر المتصفح أنك تستهدف جميع الأطفال h1 العناصر الموجودة على حاوية شعبة. عند تشغيل الشفرة في المتصفح ، يجب أن ترى ما يلي:

منذ & هو الرمز المستخدم للإشارة إلى عنصر أصل ، فمن الممكن تمامًا استهداف الفئات الزائفة والعناصر الزائفة لعنصر ما مثل هذا:

.parent1{
 &:hover{
background-color: red;
 }
 &::before{
content:"Hereisapseudoelement.";
 }
}

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

p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
 }
}

عندما يعرض المتصفح الصفحة ، فإنه يحدد لون ملف ص على أساس عرض المتصفح. إذا تجاوز عرض المتصفح 750 بكسل ، فسيتم استخدام اللون الرمادي ؛ وإلا فإنه يطبق اللون الافتراضي (أسود).

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

p {
color:black;
@media (min-width:750px) {
color:gray;
 }
}

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

تصميم موقع ويب باستخدام أنماط CSS المتداخلة

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

في ال index.htm ملف ، أضف التعليمات البرمجية المعيارية التالية:

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="style.css" />
<title>Simple Websitetitle>
head>
<body>
<divclass="container">
<divclass="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.h1>
<divclass="meta-data">
<spanclass="author">David Uzonduspan>
<spanclass="time">3 hours agospan>
div>
<div>
 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
 quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
 asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
 minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
 Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
 iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
 qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
 quae laudantium.
div>
div>
<divclass="sidebar">
<h2>Trending Articlesh2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!h4>
div>
div>
body>
html>

تحدد كتلة التعليمات البرمجية أعلاه ترميز موقع إخباري وهمي. بعد ذلك ، افتح ملف style.css ملف وإضافة الكود التالي:

.container {
display: flex;
gap: 25px;
@media(max-width: 750px) {
flex-direction: column;
 }


.article{
width:90%;
 }


 & div:nth-child(3) {
text-align: justify;
 }


 & span {
color: rgb(67, 66, 66);


 &:nth-child(1)::before {
font-style: italic;
content: "Writtenby ";
 }


 &:nth-child(2) {
font-style: italic;
 &::before {
content: " ~ ";
 }
 }
 }


.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
 }
}

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

هل ما زلت بحاجة إلى معالج CSS أولي؟

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