Streaming live at 10am (PST)

Duplicate Style... Please!


#1

@brryant, @thesergie

Oh that would be such a great, great gift for this new year... Wouldn't that save us a lot of precious minutes when building a website?

How it would look:


#2

I second that. This would be a huge timesaver smile


#3

@Zacchino, @perkristian - How would this behave if the class has nested dependencies (e.g. :hover, :active, media query variations, and nested classes)? For example, if I have this:

  • Button
    &:hover
    &:active
    • &.Special
      &.special:hover

And if I have 4 different variations (desktop, tablet, phone landscape, phone portrait), that's 20 actual CSS selectors. When you duplicate a style, do you want to duplicate the entire set of dependencies and just give it a different name?

Also, can you let me know the main use cases where you're seeing a need for this? Usually when I build in Webflow, I'm thinking of not repeating the same definitions multiple times (to eventually output cleaner CSS), but I'm wondering in what situations this would be really useful.

Thanks!


#4

Hello @callmevlad , and thank you for your reply.

  1. It would duplicate:
  2. Its states (:hover, :active, etc.)
  3. Its media query variation (desktop tablet, phone)

  4. Nested Classes:
    If the style I'm duplicating has nested classes, it would ask me whether I want to also duplicate its nested classes or not (in a dialogue box, that would let me choose which nested classes I want to duplicate and I guess also rename, with tick boxes to enable multiple choice)... If that's too complicated and you think there's no use to it, then it's up to your logic. I'm not using nested class that much (only twice so far with webflow)... So I'm not the best advice for this choice.

  5. Different Name :
    Yes, of course it would ask me to set a different name (and if I try to rename it the same as the one I'm duplicating, it would tell me : "This style name already exists. Please choose another name".

  6. For instance, on www.ateliersainthonore.com, I created pop-up boxes (Contact, Address, Legal Mentions). Most of these popups looked very much alike, but I needed to call them differently, so I needed to duplicate style. Why ? Because when I call them with the popup script, I call them thanks to their class name. So I need a specific class name for each popup box.

I hope I was clear enough.


#5

@callmevlad

Vlad, by the way now that we're talking, you should check the work of @bartekkustra on the link below, he created a private access with a login / pass, a jquery cookie, showing more pictures in the Private Showroom section
http://www.ateliersainthonore.com/private-showroom-jackets


#6

@Zacchino, thanks a ton for the additional thinking around this.

The the www.ateliersainthonore.com example, it feels like a textbook case of using nested selectors. We would actually encourage the use of reused styles here, and would honestly suggest that duplicating styles would be an anti-pattern if the main thing you need is uniquely selectable content.

For example, here's a super small site I just created that has one main "Popup" class that holds all the styles: http://popuptest.webflow.com/

I created one block, gave it a class "Popup", and copy-pasted it 6 times to get six separate instances that share the same style. Then, I went through each block and gave it an additional "nested" class.

So my style structure looks like this in the style manager:

If I look at the generated HTML, each node has two classes: the shared "popup" one, and an additional unique one.

I can still select each popup individually using jQuery:

$('div.popup.one').fadeIn(); or $('div.popup.two').fadeIn();`

But I also have the following advantages:

  • My CSS only has one style definition for all popups, so there's less CSS to load/parse

  • If I decide to change the style of all popups (e.g. add rounded corners), I simply click on any popup, choose the 'parent selector' menu, choose 'Popup' and style away:

  • I don't need to delete a bunch of duplicated styles if I make a mistake, since I only ever need to update one style to affect all 6 popups:

  • I can have variations on the additional styles that specify styles on top of the 'Popup' styles. For example, I can give my third popup a custom height (blue) while still inheriting all the other style properties from the master Popup style (orange).


Also, if you need to target one specific node directly via JavaScript, you can use HTML IDs instead of class names. So you can select a specific popup, switch to the settings tab, and assign a Unique ID:

Then, in your scripts, you can reference that element directly:

$('#contact-popup').fadeIn();


With that in mind, I can't personally think of any advantages to duplicating styles in this case. It seems like it would only create more work, not less - but would love to hear your thoughts around it.


#7

To use the nested style where you can is a smart thing to do.
My thoughts on use of a duplicate function would be as a starting point. So instead of setting the properties from scratch such as padding, background color and so on you could duplicate the style and then style it as needed. For example if you have done some styling on "popup" and are making a sidebar, you could just duplicate it and keep the part you want. Or if you are making buttons in different sizes, text styles and so on.
As for the duplicate function and if it should also duplicate the nested style there could be a choice to either keep the nested style, duplicate this to or remove it.

It would also be sweet if it could be possible to rename the classes directly by double clicking on the blue boxes in the styling panel rather than have to go to the list of all the styles smile


#8

Vlad,

Thank you so much for this tutorial... Well now that I understand the nested styles, it really seems like there's no need to duplicate style, in my case.

Could you perhaps add this Post you created to the Help / Tutorial of Webflow ? That might help alot of other users in my opinion !


#9

+1 for editing names directly from the ble boxes in the styling panel.


#10

Nested styles (aka combo classes) are in no way an adequate replacement for duplicated styles. Combo classes easily become a mess - e.g. making changes is very difficult and confusing - you may forget to apply a change to the main class and apply it to the the combo class instead... If you want to style an element in the same way as an element with a combo class, you'd need to add two classes. And if you have two combo classes to an element, and want to change something, then welcome to hell...

One scenario for using duplicated styles is templates - let's save we have an element of 400px width in the template, because it best fits the template design that way. But what if the final user wants to change that template element to fit his own, modified design and wants the width 600px? The easiest way to achieve that modification and preserve the original styles (for reference purposes) at the same time, would be the option to duplicate the original class.

(And just think what shambles would set on if you opt to use combo classes in this scenario.)


Duplicate Classes
CSS improvements…It's time
#11

So is there one?
Can't see it=((


#12

seems like nested selectors can't be used by interactions? thus, i need to make separate parent styles for every single modal window from scratch (because no duplicate). is this true? i tried doing it with a nested selector... "computer says no."


#13

I'm tuning in for the answer to this also. I'm not savvy with Javascript, so if targeting nested styles, or a unique ID is possible, I'm all :ear::ear:🏻:ear:🏼:ear:🏽:ear:🏾:ear:🏿


#14

@bartkowalski

Can you give a more graphic example of what you're talking about?

I'm also feeling this "Duplicate Style" is still needed. Sometimes I don't want a Nested style, I want a clean new one started from another "template" style.

PS: I never understood this dilemma when I'm adding a Nested style that has the same name of another Nested style from another style... It's getting weird (I'm mister meeseeks).


#15

It's easy. It's not that Webflow can't target sub classes, it's more than it doesn't list them.

If you want to target, for example:

.modal.primary-modal

then create a div, give it the class .primary-modal, go target it in your interaction, delete the div

now your interaction targets .modal.primary-modal


#16

Hi Vincent. I see what you did: target a class that only exists as a subclass by making it exists as a main class temporarily with a new div, make the interaction target that, then remove that div. The interaction will then work on the subclasses with that name. This is good to know, but not what I needed.

http://bart-s-fantabulous-site.webflow.io/target-sub-class

In the above example, I want a way to target only the grey box that is clicked so only the dropdown beneath opens. If I have a class of "open", all items with the class open will be affected. I want to avoid making an interaction for each instance of the grey item. Not sure if it's possible :frowning:

Actually, I think I've hijacked this thread. I've created a specific topic over here: https://forum.webflow.com/t/sidenav-created-with-dropdowns-can-it-stay-open-when-a-page-is-selected/35088


#17

Can you help me with this @vincent, the issue sounds similar to what is happening here?


#18

Would this help?


#19

whoa... i seriously never thought of creating a dummy DIV. Thanks for the pro tip @vincent :smiley:


#20

But doesn't this still mean, that I have to copy the interaction 12 times, to make it apply to all these subclasses?