Assigning different classes on different screen sizes with css - html

Question

Let I have 2 classes named class1 and class2. Also I have an element with id="responsive_element". What I want is to assign class1 to this element when screen size is below 768px and class2 otherwise.
I can do this in Less like:
#media screen and (max-width:768px){
#responsive_element{
.class1()
}
}
#media screen and (min-width:769px){
#responsive_element{
.class2()
}
}
Is there any "CSS only" way to achieve this?
Edit: I think I couldn't explain my question clear enough. I am already able to do this by compiling less, but the size of css file grows for the long class definitions and using them too much. I want to handle it with simply changing class of the element .

Answer 1

Except for the .class1() and .class2() calls, your Less code already is CSS. Specifically, the #media queries that apply styling based on screen size aren't Less-specific. So, for example, the following is pure CSS:
#media screen and (max-width:768px){
#responsive_element{
color: blue;
}
}
#media screen and (min-width:769px){
#responsive_element{
color: red;
}
}
If you want to convert your Less into CSS, all you need to do is copy the CSS code from .class1 and .class2 into the place of the .class1() and .class2() calls. In fact, since Less is implemented as a converter to CSS, you can just use the online converter at LESS2CSS to do the conversion for you.
If you're asking if there's a way in plain CSS to write these queries so that they use an existing .class1 and .class2 style definition without copying, then I believe the answer is no. The main reason Less was invented was because CSS doesn't support this kind of reuse of styling information.

Answer 2

If you mean, is there a way to use CSS alone to change the class of an element in response to changing screen sizes (literally, adding or removing new classnames to the element's HTML "class" attribute so CSS for different classes will take effect on that element), then the answer is simply "no, you cannot do this with CSS alone".
(Less can't do this either. Your original Less code doesn't change the class attribute of the element, as you can plainly see by looking at the generated CSS. It just uses classes as a handy trick to name sections of shareable CSS.)
The only way to change the element's class in the manner you seem to want is to make changes to the DOM, which you can obviously do via JavaScript but not with CSS alone.