Unterstanding the structure of CSS Framworks

Question

I am working on my first utility Class, or maybe some micro framework. If I got some Markup like this:

<div class="even-columns wrap on-desktop">
 <div class="item">
 <div class="item">
</div>

I would think this is usually related to a section or something with a Class or ID. So i would code my (S)CSS like

.section_A {
  .item {
    .myNameA {
      background-color:#000;
      color:#FFF;
   }
   .myNameB {
      background-color:#FFF;
   }
  }
}

<div class="item myNameA"></div>

And finally adding the new Class of styling after the item Class in my HTML. Is this how frameworks work, or do I got something wrong?

Sumit Kumar Das · Answer 1 · 2022-04-03T06:55:43.397

0

Most of the html elements have starting and closing tag, in this code i can see you cannot clode this item div tags like

<div class="item"></div>
<div class="item"></div>

And in your style tags have some problems, like inside the parent div tag have two child tag, but you styled wrong child elements.

if you add a section tag in your html code then it looked liked this

.section_A {
  .even-columns {
    .item {
      background-color:#000;
      color:#FFF;
    }
  }
}

<section class="section_A>
 <div class="even-columns wrap on-desktop">
  <div class="item"></div>
  <div class="item"></div>
</div>
</section>

note: if you have any doubt please welcome !

edited Apr 03 '22 at 06:55

answered Apr 01 '22 at 18:37

Sumit Kumar Das

You are right on the Missing closing tags. But what you did, is just overwriting the item. That is not what I am looking for. – Christian Möller-Hansen Apr 01 '22 at 18:49
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 01 '22 at 21:05

1 Answers1