Styles dependent on parent's width

Question

I'm coding project that uses atomic design. It gave me an idea not to change css properties according to viewport (by media queries) but according to parent's width.

E.g. I have element that looks differently when it is 1200px wide and when it is 280px wide. But depending on different context I need to use 280px version on desktop too.

Is there some best practice how to do this? Do you have any ideas? Here's an example of what I'm trying to achieve (of course that @has syntax is made up):

.element {
    @has (max-width: 1000px) {
        .element-something1 {
            display:none;
        }
        .element-something2 {
            display:block;
        }
    }
    @has (max-width: 800px) {
        .element-something1 {
            display:block;
        }
        .element-something2 {
            display:none;
        }
    }
}