CSS - How to avoid multiple file conflicts?

Question

CSS - How to avoid multiple file conflicts?

Navigation

#1 by (4 votes)

3

Situation

I have several files css , some mine, others from libraries.

Doubt

What is the best way to block external css for 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 that I mounted.

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 can not remove the files because some css are used elsewhere
I can not remove the specific%% of%, 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 the entire external css.

css

asked by anonymous 31.05.2016 / 16:05

1 answer

C # Convert object to an unknown list of objects Repeating code in the same method

score 4 · Accepted Answer

Guilherme, when we have badly structured CSS classes and can not change the organization of the CSS, then we only have one option, create a Shadow DOM and isolate HTML / CSS from a 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>