CSS - How to avoid multiple file conflicts?

Asked

Viewed 1,553 times

3

Situation

I have several files css, some of mine, some of libraries.

Doubt

  • What is the best way to block the css external to certain elements?

Example

Current Effect

/***** CSS EXTERNO *****/
form div{
  padding: 5px;
  clear:both;
}

/***** OUTRO CSS EXTERNO *****/
div div{
  margin: 10px;
}
div label{
  font-size: 20px;
}

/***** MEU CSS *****/
.content-form>div{
  border:1px solid #CCC;
  float:left;
  min-width:50px;
  min-height:10px;
  text-align:center;
}
.content-form>div>label{
  color:blue;
}
<div>
  <form class="content-form">
    <div>
      <label>Item 1</label>
    </div>
    <div>
      <label>Item 2</label>
    </div>
    <div>
      <label>Item 2</label>
    </div>
    <div>
      <label>Item 3</label>
    </div>
  </form>
</div>

Note that here the external css are interfering with the result I want, for the css I’ve assembled.

Desired Effect

.content-form>div{
  border:1px solid #CCC;
  float:left;
  min-width:50px;
  min-height:10px;
  text-align:center;
}
.content-form>div>label{
  color:blue;
}
<div>
  <form class="content-form">
    <div>
      <label>Item 1</label>
    </div>
    <div>
      <label>Item 2</label>
    </div>
    <div>
      <label>Item 2</label>
    </div>
    <div>
      <label>Item 3</label>
    </div>
  </form>
</div>

Note

  • I cannot remove the files as some css are used elsewhere
  • I can’t remove the css specific, because they are used in other elements, I just want to inactivate it for that specific element.

Current attempt

/***** CSS EXTERNO *****/
form div{
  padding: 5px;
  clear:both;
}

/***** OUTRO CSS EXTERNO *****/
div div{
  margin: 10px;
}
div label{
  font-size: 20px;
}

/***** MEU CSS *****/
form.content-form div{
  padding:0;
  clear:none;
}

div .content-form div{
  margin:0;
}
div .content-form div label{
  font-size:inherit;
}

.content-form>div{
  border:1px solid #CCC;
  float:left;
  min-width:50px;
  min-height:10px;
  text-align:center;
}
.content-form>div>label{
  color:blue;
}
<div>
  <form class="content-form">
    <div>
      <label>Item 1</label>
    </div>
    <div>
      <label>Item 2</label>
    </div>
    <div>
      <label>Item 2</label>
    </div>
    <div>
      <label>Item 3</label>
    </div>
  </form>
</div>

Note that here I am basically overwriting all external css.

css
  • 1

    It tries to change their inclusion position. It also affects.

  • @Wallacemaxters yes, but only if it’s the same sentence file1 - div div{}, file2 - div div, ai the second overwrite the first, the problem is that it is the specificity that each file is giving. file1 - div div{}, file2 - form div{} then he interprets as different things and generates a "merge", which is not desired.

  • Why can’t you remove some files? Can’t you also generate a single file by joining and removing styles? Can’t you even modify the names? Because the specificity of each element is very broad, I believe that this is the biggest negative point.

  • @Celsomtrindade I certain moments other elements are rendered and use the same css and apply correctly, however for the element I’m wanting to render it also applies and is not what I draw, so I am generating a superscript code, yet I wonder if there’s any better way.

  • At least I don’t know any technique that is not to overwrite when we use another file css, other than the call order of the archives, as already mentioned by @Wallacemaxters . In this case, I believe that you should really create rules that override the desired properties.

  • Although not designed for this, you can use the operator !important to give more emphasis on the desired rule

Show 1 more comment

1 answer

4


William, when we have poorly structured CSS classes and we can’t change the organization of it, then we only have one option, to create a Shadow DOM and isolate the HTML/CSS part of the page.

var container = document.getElementById("container");
var root = container.createShadowRoot();

while (container.lastChild) {
  root.insertBefore(container.lastChild, root.firstChild);
}
/***** CSS EXTERNO *****/
form div{
  padding: 5px;
  clear:both;
}

/***** OUTRO CSS EXTERNO *****/
div div{
  margin: 10px;
}
div label{
  font-size: 20px;
}
<div id="container">
  <style type="text/css">
    .content-form>div{
      border:1px solid #CCC;
      float:left;
      min-width:50px;
      min-height:10px;
      text-align:center;
    }
    .content-form>div>label{
      color:blue;
    }
  </style>
  <form class="content-form">
    <div>
      <label>Item 1</label>
    </div>
    <div>
      <label>Item 2</label>
    </div>
    <div>
      <label>Item 2</label>
    </div>
    <div>
      <label>Item 3</label>
    </div>
  </form>
</div>

  • Guy that cool this function, isolate the css of a page part... +1

  • But by creating that same rule of css into a file that is initialized after the css standard, would not give the same result?

  • Our never seen, very interesting +1, per hour :D

  • That would be similar to a iframe?

  • @Guilhermelautert, it’s a bit more complicated, you can read more about it at: Shadow DOM 101.

  • But in short, both the Shadow DOM, as to the Template are HTML5 features, you can combine the two to create Web Components

Show 1 more comment

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.