Resetuj / usuń style CSS tylko dla elementu

Jestem pewien, że musiałem o tym wspomnieć / zapytać, ale szukałem wieku bez szczęścia, moja terminologia musi być błędna!

Niejasno pamiętam tweet, który widziałem jakiś czas temu, który sugeruje, że dostępna jest reguła css, która usuwa wszystkie style wcześniej ustawione w arkuszu stylów dla określonego elementu.

Dobrym przykładem użycia może być strona RWD na urządzenia mobilne, w której znaczna część stylizacji zastosowanej do określonego elementu w widokach małego ekranu wymaga „zresetowania” lub usunięcia tego samego elementu w widoku pulpitu.

Reguła css, która może osiągnąć coś takiego:

.element {
  all: none;
}

Przykładowe użycie:

/* 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;
  }
}

Abyśmy mogli szybko usunąć lub ponownie ustawić stylizację bez konieczności deklarowania każdej właściwości.

Ma sens?

Słowo kluczowe CSS3 initialustawia właściwość CSS3 na wartość początkową zdefiniowaną w specyfikacji . Słowo initialkluczowe obsługuje szeroką przeglądarkę, z wyjątkiem rodzin IE i Opera Mini.

Ponieważ brak obsługi IE może powodować problemy, oto niektóre sposoby resetowania niektórych właściwości CSS do ich wartości początkowych:

.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;
    }
}

• Odpowiednie repozytorium github z bardziej wyczerpującą listą z grudnia 2017 r
• Związane z
• Powiązane z MDN
• Powiązane specyfikacje W3C

Jak wspomniano w komentarzu @ user566245:

jest to w zasadzie poprawne, ale indywidualny przebieg może się różnić. Na przykład niektóre elementy, takie jak textarea, mają domyślnie ramkę, zastosowanie tego resetu spowoduje zmniejszenie granicy tych obszarów.

[POST EDIT FEB 4, '17] Wybitny za to, że został nowoczesną normą, użytkownik Joost

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

PRZYKŁAD Z W3

Na przykład, jeśli autor określi wszystko: inicjał na elemencie, zablokuje on wszystkie dziedziczenie i zresetuje wszystkie właściwości, tak jakby żadne reguły nie pojawiły się w kaskadzie na poziomie autora, użytkownika lub użytkownika.

Może to być przydatne w przypadku elementu głównego „widżetu” zawartego na stronie, który nie chce dziedziczyć stylów strony zewnętrznej. Należy jednak pamiętać, że każdy „domyślny” styl zastosowany do tego elementu (taki jak np. Display: block z arkusza stylów UA na elementach bloku takich jak) również zostanie zdmuchnięty.

JAVASCRIPT?

Nikt nie pomyślał o css poza resetowaniem css? Tak?

Jest taki wycinek w pełni odpowiedni: https://stackoverflow.com/a/14791113/845310

getElementsByTagName („*”) zwróci wszystkie elementy z DOM. Następnie możesz ustawić style dla każdego elementu w kolekcji:

odpowiedział 9 lutego 2013 o 20:15 przez VisioN

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

Z tym wszystkim powiedziane; nie sądzę, aby reset css był wykonalny, chyba że skończymy z tylko jedną przeglądarką internetową ... jeśli „domyślne” zostanie ustawione przez przeglądarkę.

Dla porównania, oto lista wartości Firefoksa 40.0 dla miejsca, w <blockquote style="all: unset;font-style: oblique">którym font-style: obliquewyzwala działanie 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;

Dla przyszłych czytelników. Myślę, że o to właśnie chodziło, ale obecnie nie jest tak szeroko obsługiwane (patrz poniżej):

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

• Obsługiwane w ( źródło ): Chrome 37, Firefox 27, IE 11, Opera 24
• Nieobsługiwane: Safari

Znaleźliśmy zupełnie nowe rozwiązanie tego problemu.

Użyj all: revertlub all: unset.

Z MDN:

Słowo kluczowe revert działa w wielu przypadkach dokładnie tak samo jak unset. Jedyną różnicą są właściwości, których wartości ustawia przeglądarka lub niestandardowe arkusze stylów tworzone przez użytkowników (ustawiane po stronie przeglądarki).

Potrzebujesz „Dostępnej reguły css, która usunęłaby wszelkie style ustawione wcześniej w arkuszu stylów dla określonego elementu”.

Jeśli więc element ma nazwę klasy, taką jak remove-all-styles:

Na przykład:

HTML:

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

Z CSS:

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

Kasuje wszystkie style stosowane przez other-class, another-classi wszystkie inne style dziedziczone i stosowane do div.

Lub w twoim przypadku:

/* 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;
  }
}

Zrobię

Tutaj użyliśmy jednej fajnej właściwości CSS z inną fajną wartością CSS.

1. revert

W rzeczywistości revert, jak sama nazwa wskazuje, przywraca tę właściwość do stylu użytkownika lub agenta użytkownika.

2. all

Kiedy użyjemy reverttej allwłaściwości, wszystkie właściwości CSS zastosowane do tego elementu zostaną przywrócone do stylów użytkownik / klient-agent.

Kliknij tutaj, aby poznać różnicę między stylami autora, użytkownika, użytkownika i agenta.

Na przykład: jeśli chcemy odizolować osadzone widżety / komponenty od stylów strony, która je zawiera , możemy napisać:

.isolated-component {
 all: revert;
}

Co spowoduje przywrócenie wszystkich author styles(tj. CSS dla programistów) do user styles(stylów, które ustawił użytkownik naszej witryny - mniej prawdopodobny scenariusz) lub do user-agentstylów, jeśli nie ustawiono stylów użytkownika.

Więcej informacji tutaj: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

Jedynym problemem jest wsparcie : tylko Safari 9.1 i iOS Safari 9.3 mają wsparcierevert wartości w momencie pisania.

Powiem więc: użyj tego stylu i powróć do innych odpowiedzi.

Pozwolę sobie odpowiedzieć dokładnie na to pytanie, ponieważ było to dla mnie źródłem bólu przez kilka lat i bardzo niewiele osób naprawdę rozumie problem i dlaczego jest tak ważne, aby go rozwiązać. Gdybym był w ogóle odpowiedzialny za specyfikację CSS, byłbym zawstydzony, szczerze mówiąc, że nie rozwiązałem tego w ostatniej dekadzie.

Problem

Musisz wstawić znaczniki do dokumentu HTML i musi on wyglądać w określony sposób. Ponadto nie jesteś właścicielem tego dokumentu, więc nie możesz zmienić istniejących reguł stylu. Nie masz pojęcia, jakie mogą być arkusze stylów ani do czego mogą się zmienić.

Przypadki użycia w tym przypadku występują, gdy udostępniasz możliwy do wyświetlenia komponent do użycia przez nieznane strony internetowe stron trzecich. Przykładami tego mogą być:

1. Tag reklamy
2. Budowanie rozszerzenia przeglądarki, które wstawia treść
3. Dowolny typ widżetu

Najprostsza poprawka

Umieść wszystko w ramce iframe. Ma to swój własny zestaw ograniczeń:

1. Ograniczenia między domenami: Twoje treści w ogóle nie będą miały dostępu do oryginalnego dokumentu. Nie można nakładać treści, modyfikować DOM itp.
2. Ograniczenia wyświetlania: treść jest zablokowana w prostokącie.

Jeśli twoja treść może zmieścić się w polu, można obejść problem nr 1, zapisując ramkę iframe i jawnie ustawiając zawartość, omijając w ten sposób problem, ponieważ element iframe i dokument będą miały tę samą domenę.

Rozwiązanie CSS

Szukałem daleko tego rozwiązania, ale niestety nie ma takiego. Najlepsze, co możesz zrobić, to jawnie przesłonić wszystkie możliwe właściwości, które można zastąpić, i zastąpić je tym, co myślisz , że ich wartość domyślna powinna być.

Nawet po zastąpieniu nie ma sposobu, aby bardziej ukierunkowana reguła CSS nie zastąpiła Twojej . Najlepsze, co możesz tutaj zrobić, to ustawić cel nadpisywania tak dokładnie, jak to możliwe i mieć nadzieję, że dokument nadrzędny nie przypadkowo go najlepiej: użyj niejasnego lub losowego identyfikatora elementu nadrzędnego treści i użyj! Ważne we wszystkich definicjach wartości właściwości .

inne sposoby:

1) dołącz kod css (plik) resetowania Yahoo CSS, a następnie umieść wszystko w tym DIV:

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

2) lub użyj

• 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/

Nie polecam używania odpowiedzi oznaczonej tutaj jako poprawną. Jest to ogromna kropla CSS, która próbuje pokryć wszystko.

Sugeruję, abyś ocenił, jak usunąć styl z elementu na podstawie poszczególnych przypadków.

Powiedzmy, że do celów SEO musisz umieścić H1 na stronie, która nie ma rzeczywistego nagłówka w projekcie. Możesz ustawić link nawigacyjny tej strony jako H1, ale oczywiście nie chcesz, aby ten link nawigacyjny wyświetlał się jako gigantyczny H1 na stronie.

To, co powinieneś zrobić, to owinąć ten element w znacznik h1 i sprawdzić go. Zobacz, jakie style CSS są stosowane konkretnie w elemencie h1.

Powiedzmy, że widzę następujące style zastosowane do elementu.

//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;
}

Teraz musisz dokładnie wskazać styl zastosowany do H1 i rozbroić je w klasie css. To wyglądałoby mniej więcej tak:

.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;
}

Jest to o wiele czystsze i nie powoduje zrzucania przypadkowych kropli kodu do twojego css, czego nie wiesz, co on właściwie robi.

Teraz możesz dodać tę klasę do swojego h1

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

Jeśli akurat używasz sassa w systemie kompilacji, jednym ze sposobów, aby to zrobić, które będzie działać we wszystkich głównych przeglądarkach, jest zawinięcie wszystkich importowanych stylów za pomocą selektora: not () tak ...

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

Następnie możesz użyć klasy wyłączania na kontenerze, a podtekst nie będzie miał żadnego z twoich stylów.

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

Oczywiście wszystkie twoje style będą teraz poprzedzone selektorem: not (), więc jest trochę nieprzyzwoicie, ale działa dobrze.

Wspomniałeś o witrynach na telefony komórkowe ... Aby uzyskać responsywny projekt, z pewnością można zastąpić style małego ekranu stylami dużego ekranu. Ale może nie musisz.

Spróbuj tego:

.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. */
    }
}

Te zapytania o media nie nakładają się, więc ich reguły się nie zastępują. Ułatwia to utrzymanie każdego zestawu stylów osobno.

LEPSZE ROZWIĄZANIE

Pobierz arkusz stylów „kopiuj / wklej”, aby zresetować właściwości css do domyślnych (styl UA):
https://github.com/monmomo04/resetCss.git

Dzięki @ Milche Patern!
Naprawdę szukałem wartości resetowania / domyślnych właściwości stylu. Moją pierwszą próbą było skopiowanie obliczonej wartości z narzędzia deweloperskiego przeglądarki elementu root (html). Ale jak obliczył, wyglądałby / działał inaczej w każdym systemie.
Dla tych, którzy napotykają awarię przeglądarki, gdy próbują użyć gwiazdki *, aby zresetować styl elementów potomnych, a ponieważ wiedziałem, że to nie zadziałało, zastąpiłem gwiazdkę „*” wszystkimi nazwami tagów HTML. . Przeglądarka nie uległa awarii; Korzystam z Chrome w wersji 46.0.2490.71 m.
Na koniec warto wspomnieć, że te właściwości zresetują styl do domyślnego stylu najwyższego elementu głównego, ale nie do wartości początkowej dla każdego elementu HTML. Aby to naprawić, wziąłem style przeglądarki użytkownika „user-agent” i zaimplementowałem ją w klasie „reset-this”.

Pobierz arkusz stylów „kopiuj / wklej”, aby zresetować właściwości css do domyślnych (styl UA):
https://github.com/monmomo04/resetCss.git

Styl użytkownika użytkownika:
domyślny CSS przeglądarki dla elementów HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Specyfika CSS (zwróć uwagę na specyfikę):
https://css-tricks.com/specifics-on-css-specificity/

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

W moim konkretnym scenariuszu chciałem pominąć stosowanie typowych stylów do określonej części strony, lepiej zilustrowane w ten sposób:

<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>

Po zadziałaniu z resetowaniem CSS, który nie przyniósł wiele sukcesów (głównie ze względu na pierwszeństwo reguł i złożoną hierarchię arkuszy stylów), na ratunek przyszedł wszechobecny jQuery, który wykonał zadanie bardzo szybko i dość brudno:

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

(Teraz powiedz, jak złe jest używanie JS do radzenia sobie z CSS :-))

Dla tych z Was, którzy próbują dowiedzieć się, jak faktycznie usunąć styl z elementu, bez usuwania css z plików, to rozwiązanie działa z jquery:

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

jeśli ustawisz swój CSS w ramach klas, możesz łatwo usunąć je za pomocą metody jQuery removeClass (). Poniższy kod usuwa klasę .element:

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

Jeśli nie zostanie określony parametr, ta metoda usunie WSZYSTKIE nazwy klas z wybranych elementów.

Nie, to tylko kwestia lepszego zarządzania strukturą css.

W twoim przypadku zamówiłbym mój css coś takiego:

.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}
}

Po prostu eksperymentuj.

Czy jest szansa, że ​​szukasz ważnej zasady? Nie powoduje cofnięcia wszystkich deklaracji, ale umożliwia ich zastąpienie.

„Gdy!! Ważna reguła jest używana w deklaracji stylu, deklaracja ta zastępuje każdą inną deklarację złożoną w CSS, gdziekolwiek jest na liście deklaracji. Chociaż! Ważne nie ma nic wspólnego ze specyfiką.”

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