CSS - Klasa nadpisująca inne klasy

Witajcie
Nie wiem czy dobrze ujmę problem których chcę rozwiązać ale postaram się opisać go najprościej jak się da. Potrzebuję stworzyć jedną klasę css która nadpisze mi kilka innych klas (ale tylko wybrane atrybuty). Dla przykładu, mam sobie 3 klasy:

 .klasa-a {
    atr1
    atr2
}

 .klasa-b {
    atr1
    atr2
    atr3
    atr4
}

 .klasa-c {
    atr1
    atr2
    atr3
}

I teraz muszę stworzyć jedną klasę której wywołanie spowoduje nadpisanie np: atr1 z klasy a, atr2 i atr4 z klasy b i atr3 z klasy c. Czy jeżeli zrobię coś takiego:

 .klasa-andpisujaca {
     .klasa-a {
        atr1
    }

     .klasa-b {
        atr2
        atr4
    }

     .klasa-c {
        atr3
    }
}

To będzie prawidłowo działało?

Nie musisz raczej robić takich rzeczy.

Po prostu klasę nadpisującą zdefiniuj po klasach bazowych (to ważne, kolejność w jakiej dodajesz pliki *.css w swoim html'u też ma znaczenie). Przypisując klasę do elementu (w HTML) wpisz kilka klas oddzielonych spacją, np. class = "klasa-c klasa-nadpisujaca". Z tego co wybadałem, kolejność klas wpisanych w tagu HTML nie ma znaczenia, ważniejsza jest kolejność definicji w pliku CSS.

Ślicznie dziękuję za odpowiedź.

Mam jeszcze jedno pytanie. Czy istnieje możliwość dostania się do jakiejś klasy z pominięciem klas nadrzędnych. Przykład, mam kontrolkę która osadzona jest w różnych kontenerach (jeden w drugim) i kontrolka ta korzysta z klasy 'form-control'. I teraz chcąc nadpisać tą klasę ja robię coś takiego:

.NarrowControl>.form-group.label-left>.input>.form-control{

Czyli dostaję się do tej klasy poprzez klasy macierzyste. I to działa. Minus takiego rozwiązania jest taki że w momencie kiedy zmieni się osadzenie kontrolki i powędruje ona np do innego div-a, styl nadpisujący przestaje działać i muszę pamiętać aby to zmienić. Czy jest jakaś metoda aby zrobić to w sposób uniwersalny tak aby uniezależnić się od klas nadrzędnych?

Wystarczy w CSS samo:

.form-control {

}

Twoja kontrolka z przypisaną klasą form-control może być gdzie tylko chce :)

Czy jest jakaś metoda aby zrobić to w sposób uniwersalny tak aby uniezależnić się od klas nadrzędnych?

Jeśli jakaś klasa jest zdefiniowana np. w zewnętrznej bibliotece, której nie możesz modyfikować, a chcesz nadpisać jego style, to możesz zrobić to np. tak:

div.foo { }
 *.foo { }
.foo.foo { }

Generalnie .foo.foo jest mocniejsze od .foo, a .foo.foo.foo jest mocniejsze od .foo.foo, więc tym sposobem można sobie sporo ułatwić ;)

warto też na początku projektu zainteresować się również:
resetcss
sanitize.css
Normalize.css

poczytaj również o specyficzności. Generalnie każdy selektor w CSS ma jakąś tam liczbę specyficzności i potem się to sumuje, np.:

.abc.def { /* wybierz elementy, które mają jednocześnie klasę abc oraz klasę def */
   color: green;
}

będzie miało większą specyficzność niż

.abc {
  color: red;
}

więc będzie bardziej ważne, więc nadpisze regułę .abc : https://jsfiddle.net/m2nzrb75/1/
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

http://stackoverflow.com/documentation/css/450/cascading-and-specificity#t=201702161206104361816