Réinitialiser / supprimer les styles CSS pour l'élément uniquement

Je suis sûr que cela doit avoir été mentionné / demandé auparavant mais que je cherche un âge sans chance, ma terminologie doit être erronée!

Je me souviens vaguement d'un tweet que j'ai vu il y a quelque temps qui suggérait qu'il y avait une règle css disponible qui supprimerait tous les styles précédemment définis dans la feuille de style pour un élément particulier.

Un bon exemple d'utilisation pourrait être dans un site RWD mobile-first où une grande partie du style utilisé pour un élément particulier dans les vues de petit écran doit être réinitialisé ou supprimé pour le même élément dans la vue de bureau.

Une règle CSS qui pourrait réaliser quelque chose comme:

.element {
  all: none;
}

Exemple d'utilisation:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: none;
  }
}

Ainsi, nous pourrions rapidement supprimer ou réinitialiser le style sans avoir à déclarer chaque propriété.

Logique?

Le mot clé CSS3 initialdéfinit la propriété CSS3 à la valeur initiale telle que définie dans la spécification . Le initialmot-clé prend en charge un large navigateur, à l' exception des familles IE et Opera Mini.

Étant donné que le manque de prise en charge d'IE peut provoquer un problème, voici quelques façons de réinitialiser certaines propriétés CSS à leurs valeurs initiales:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

• Repo Github pertinent avec une liste plus exaustive de décembre 2017
• en relation
• En relation avec MDN
• Spécifications W3C associées

Comme mentionné dans un commentaire de @ user566245:

c'est correct en principe, mais le kilométrage individuel peut varier. Par exemple, certains éléments comme la zone de texte par défaut ont une bordure, l'application de cette réinitialisation rendra la bordure de cette zone de texte moins.

[POST EDIT FEB 4, '17] A voté pour devenir une norme moderne, l'utilisateur Joost

#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }
}

EXEMPLE DE W3

Par exemple, si un auteur spécifie tout: initial sur un élément, il bloquera tout l'héritage et réinitialisera toutes les propriétés, comme si aucune règle n'apparaissait dans les niveaux auteur, utilisateur ou agent utilisateur de la cascade.

Cela peut être utile pour l'élément racine d'un "widget" inclus dans une page, qui ne souhaite pas hériter des styles de la page externe. Notez cependant que tout style "par défaut" appliqué à cet élément (tel que, par exemple, display: block de la feuille de style UA sur des éléments de bloc tels que) sera également supprimé.

JAVASCRIPT?

Personne n'a pensé à autre chose que css pour réinitialiser css? Oui?

Il y a ce snip pleinement pertinent: https://stackoverflow.com/a/14791113/845310

getElementsByTagName ("*") retournera tous les éléments du DOM. Ensuite, vous pouvez définir des styles pour chaque élément de la collection:

répondu 9 févr. 13 à 20:15 par VisioN

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

Avec tout cela dit; je ne pense pas qu'une réinitialisation css soit quelque chose de réalisable à moins que nous ne nous retrouvions avec un seul navigateur Web .. si la «valeur par défaut» est définie par le navigateur à la fin.

À titre de comparaison, voici les valeurs Firefox 40,0 liste pour une <blockquote style="all: unset;font-style: oblique">où font-style: obliquedéclenche l' opération DOM.

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

Pour les futurs lecteurs. Je pense que c'est ce que l'on voulait dire mais n'est pas vraiment largement pris en charge actuellement (voir ci-dessous):

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

• Pris en charge dans ( source ): Chrome 37, Firefox 27, IE 11, Opera 24
• Non pris en charge: Safari

Une toute nouvelle solution a été trouvée à ce problème.

Utilisez all: revertou all: unset.

De MDN:

Le mot clé revert fonctionne exactement de la même manière que non défini dans de nombreux cas. La seule différence concerne les propriétés dont les valeurs sont définies par le navigateur ou par des feuilles de style personnalisées créées par les utilisateurs (définies du côté du navigateur).

Vous avez besoin d'une "règle css disponible qui supprimerait tous les styles précédemment définis dans la feuille de style pour un élément particulier."

Donc, si l'élément a un nom de classe comme remove-all-styles:

Par exemple:

HTML:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

Avec CSS:

  .remove-all-styles {
    all: revert;
  }

Réinitialisera tous les styles appliqués par other-class, another-classet tous les autres styles et appliqués à hérité que div.

Ou dans votre cas:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: revert;
  }
}

Ça ira.

Ici, nous avons utilisé une propriété CSS sympa avec une autre valeur CSS sympa.

1. revert

En fait revert, comme son nom l'indique, cette propriété reprend son style d'utilisateur ou d'agent utilisateur.

2. all

Et lorsque nous l'utilisons revertavec la allpropriété, toutes les propriétés CSS appliquées à cet élément seront converties en styles utilisateur / agent utilisateur.

Cliquez ici pour connaître la différence entre les styles d'auteur, d'utilisateur et d'agent utilisateur.

Par exemple: si nous voulons isoler les widgets / composants intégrés des styles de la page qui les contient , nous pourrions écrire:

.isolated-component {
 all: revert;
}

Ce qui rétablit tout author styles(c.-à-d. Le CSS du développeur) dans user styles(les styles définis par un utilisateur de notre site Web - scénario moins probable) ou les user-agentstyles lui-même si aucun style d'utilisateur n'est défini.

Plus de détails ici: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

Et le seul problème est le support : seuls Safari 9.1 et iOS Safari 9.3 prennent en charge la revertvaleur au moment de la rédaction.

Je dirai donc utiliser ce style et revenir à toutes les autres réponses.

Permettez-moi de répondre à cette question de manière approfondie, car cela a été une source de douleur pour moi pendant plusieurs années et très peu de gens comprennent vraiment le problème et pourquoi il est important qu'il soit résolu. Si j'étais responsable de la spécification CSS, je serais franchement gêné de ne pas l'avoir abordé au cours de la dernière décennie.

Le problème

Vous devez insérer un balisage dans un document HTML et il doit avoir une apparence spécifique. En outre, vous n'êtes pas propriétaire de ce document, vous ne pouvez donc pas modifier les règles de style existantes. Vous n'avez aucune idée de ce que pourraient être les feuilles de style ou de ce qu'elles pourraient changer.

Dans ce cas, vous fournissez un composant affichable pour les sites Web tiers inconnus à utiliser. Voici des exemples:

1. Un tag d'emplacement publicitaire
2. Création d'une extension de navigateur qui insère du contenu
3. Tout type de widget

Correction la plus simple

Mettez tout dans un iframe. Cela a son propre ensemble de limitations:

1. Limitations interdomaines: votre contenu n'aura pas du tout accès au document d'origine. Vous ne pouvez pas superposer du contenu, modifier le DOM, etc.
2. Limitations d'affichage: votre contenu est verrouillé à l'intérieur d'un rectangle.

Si votre contenu peut tenir dans une boîte, vous pouvez contourner le problème n ° 1 en demandant à votre contenu d'écrire un iframe et de définir explicitement le contenu, contournant ainsi le problème, car l'iframe et le document partageront le même domaine.

Solution CSS

J'ai cherché de loin la solution à cela, mais il n'y en a malheureusement pas. Le mieux que vous puissiez faire est de remplacer explicitement toutes les propriétés possibles qui peuvent être remplacées et de les remplacer par ce que vous pensez que leur valeur par défaut devrait être.

Même lorsque vous remplacez, il n'y a aucun moyen de garantir qu'une règle CSS plus ciblée ne remplacera pas la vôtre . Le mieux que vous puissiez faire ici est de cibler vos règles de remplacement aussi précisément que possible et d'espérer que le document parent ne le réussit pas accidentellement: utilisez un ID obscur ou aléatoire sur l'élément parent de votre contenu, et utilisez! Important sur toutes les définitions de valeur de propriété .

une autre façon:

1) inclure le code CSS (fichier) de la réinitialisation de Yahoo CSS , puis tout mettre à l'intérieur de cette DIV:

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

2) ou utiliser

• https://cssreset.com/scripts/vanilla-css-un-reset/
• https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
• https://cssreset.com/scripts/eric-meyer-reset-css/
• https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
• https://cssreset.com/scripts/normalize-css/

Je ne recommande pas d'utiliser la réponse qui a été marquée comme correcte ici. C'est un énorme blob de CSS qui essaie de tout couvrir.

Je vous suggère d'évaluer comment supprimer le style d'un élément au cas par cas.

Disons qu'à des fins de référencement, vous devez inclure un H1 sur une page qui n'a pas de véritable titre dans la conception. Vous voudrez peut-être faire du lien de navigation de cette page un H1 mais bien sûr vous ne voulez pas que ce lien de navigation s'affiche comme un H1 géant sur la page.

Ce que vous devez faire est d'envelopper cet élément dans une balise h1 et de l'inspecter. Voyez quels styles CSS sont appliqués spécifiquement à l'élément h1.

Disons que je vois les styles suivants appliqués à l'élément.

//bootstrap.min.css:1
h1 {
    font-size: 65px;
    font-family: 'rubikbold'!important;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

//bootstrap.min.css:1
h1, .h1 {
    font-size: 36px;
}

//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

//bootstrap.min.css:1
h1 {
    margin: .67em 0;
    font-size: 2em;
}

//user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

Maintenant, vous devez identifier le style exact qui est appliqué au H1 et les définir dans une classe CSS. Cela ressemblerait à quelque chose comme ceci:

.no-style-h1 {
    font-size: unset !important;
    font-family: unset !important;
    font-weight: unset !important;
    font-style: unset !important;
    text-transform: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    font-family: unset !important;
    line-height: unset !important;
    color: unset !important;
    margin: unset !important;
    display: unset !important;
    -webkit-margin-before: unset !important;
    -webkit-margin-after: unset !important;
    -webkit-margin-start: unset !important;
    -webkit-margin-end: unset !important;
}

Ceci est beaucoup plus propre et ne se contente pas de vider un blob aléatoire de code dans votre CSS que vous ne savez pas ce qu'il fait réellement.

Vous pouvez maintenant ajouter cette classe à votre h1

<h1 class="no-style-h1">
     Title
</h1>

S'il vous arrive d'utiliser sass dans un système de construction, une façon de faire cela qui fonctionnera dans tous les principaux navigateurs est d'encapsuler toutes vos importations de style avec un sélecteur a: not () comme ça ...

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

Ensuite, vous pouvez utiliser la classe disable sur un conteneur et le sous-contenu n'aura aucun de vos styles.

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

Bien sûr, tous vos styles seront désormais ajoutés au sélecteur: not (), c'est donc un peu compliqué, mais cela fonctionne bien.

Vous avez mentionné les sites axés sur les mobiles ... Pour un design réactif, il est certainement possible de remplacer les styles de petit écran par des styles de grand écran. Mais vous n'en aurez peut-être pas besoin.

Essaye ça:

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

Ces requêtes multimédias ne se chevauchent pas, donc leurs règles ne se remplacent pas. Cela facilite la maintenance de chaque ensemble de styles séparément.

MEILLEURE SOLUTION

Téléchargez la feuille de style "copier / coller" pour réinitialiser les propriétés css par défaut (style UA):
https://github.com/monmomo04/resetCss.git

Merci @ Milche Patern!
Je cherchais vraiment la valeur de réinitialisation / par défaut des propriétés de style. Mon premier essai a été de copier la valeur calculée à partir de l'outil de développement du navigateur de l'élément racine (html). Mais comme il l'a calculé, il aurait semblé / fonctionné différemment sur chaque système.
Pour ceux qui rencontrent un crash de navigateur en essayant d'utiliser l'astérisque * pour réinitialiser le style des éléments enfants, et comme je savais que cela ne fonctionnait pas pour vous, j'ai remplacé l'astérisque "*" par tous les noms de balises HTML à la place . Le navigateur n'a pas planté; Je suis sur Chrome Version 46.0.2490.71 m.
Enfin, il est bon de mentionner que ces propriétés réinitialiseront le style au style par défaut de l'élément racine le plus élevé, mais pas à la valeur initiale de chaque élément HTML. Donc, pour corriger cela, j'ai pris les styles "user-agent" du navigateur basé sur webkit et l'ai implémenté dans la classe "reset-this".

Téléchargez la feuille de style "copier / coller" pour réinitialiser les propriétés css par défaut (style UA):
https://github.com/monmomo04/resetCss.git

Style d'agent utilisateur:
CSS par défaut des navigateurs pour les éléments HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Spécificité CSS (attention à la spécificité):
https://css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git

Dans mon scénario spécifique, je voulais ignorer l'application de styles communs à une partie spécifique de la page, mieux illustrée comme ceci:

<body class='common-styles'>
    <div id='header'>Wants common styles</div>
    <div id='container'>Does NOT want common styles</div>
    <div id='footer'>Wants common styles</div>
</body>

Après avoir joué avec la réinitialisation CSS qui n'a pas apporté beaucoup de succès (principalement en raison de la priorité des règles et de la hiérarchie complexe des feuilles de style), jQuery omniprésent a été sauvé, ce qui a fait le travail très rapidement et raisonnablement sale:

$(function() {
    $('body').removeClass('common-styles');
    $('#header,#footer').addClass('common-styles');
});

(Maintenant, dites à quel point c'est mal d'utiliser JS pour gérer les CSS :-))

Pour ceux d'entre vous qui essaient de comprendre comment supprimer réellement le style de l'élément uniquement, sans supprimer le CSS des fichiers, cette solution fonctionne avec jquery:

$('.selector').removeAttr('style');

si vous définissez votre CSS dans les classes, vous pouvez facilement les supprimer à l'aide de la méthode jQuery removeClass (). Le code ci-dessous supprime la classe .element:

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

Si aucun paramètre n'est spécifié, cette méthode supprimera TOUS les noms de classe des éléments sélectionnés.

Non, il s'agit simplement de mieux gérer votre structure CSS.

Dans votre cas, je commanderais mon css quelque chose comme ceci:

.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}

@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}

Expérimentez.

Avez-vous des chances de rechercher la! Règle importante? Il n'annule pas toutes les déclarations mais fournit un moyen de les ignorer.

"Lorsqu'une règle! Important est utilisée sur une déclaration de style, cette déclaration remplace toute autre déclaration faite dans le CSS, où qu'elle se trouve dans la liste de déclarations. Bien que! Important n'ait rien à voir avec la spécificité."

https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception