Merge Selectors/clean up

Author Posts

deanphillips1991

Hey man,

1. Is there any auto clean up system for when we make a selector but don’t end up adding anything? The amount of selectors and long lists is definitely a mass disadvantage of MT vs directly using O2.

2. Can we merge selectors anyway? I have tonnes that just target the same thing:

3. Probably impossible but it would be great to have css we create inside of O2 be easily moveable to MT. Because of #1 and having to create a selector every time (no click and instantly style) it’s often easier to edit in O2. However, MT offers more options and I’d prefer to use that. Being able to move the css/merge with parts that we haven’t already done would be great.

And in case you’re wondering: “What, Dean you’re crazy, why would you want any of this?!”
https://www.loom.com/share/e8d70ee89d294dee8fad096446de5b0b + https://www.loom.com/share/c826db42fb4e46dea2a452208ee22af6

4. I know we can see all the code MT generates, but can we edit it all in one view at all? Doing search and then replacing things for example vs having to go selector by selector?


Sebastian

Hey Dean,

1. There isn’t an auto-cleanup system. You can manually delete selectors that don’t have a blue dot when viewing them via the selectors menu at the top left. I think you may have mentioned auto-cleanup in the past, and I’ve been thinking about it, but the obvious downside is that sometimes people might want to create multiple selectors before adding styles. And in this case, it would be annoying for MT to delete them. That’s not to say some solution can’t be found. I think it’s an important issue, and I intend to solve it when I move on to the targeting option improvements.

2. If you have multiple selectors that target the same thing, have you been paying attention the green plus vs blue number signally in targeting mode? If a blue number shows [1] instead of a green plus icon [+] you have already created a selector, so navigate back to it rather than create a duplicate. The getting started video explains this (at the end): https://www.youtube.com/watch?v=NkSinyuvIZk

3. You can import CSS from any CSS stylesheet (or copy and paste CSS) via: Packs > Import > CSS Stylesheet. You can also copy and paste individual styles into the editor, as I saw you did in the video. But if you are asking for an Oxygen specific implementation, that’s unlikely. With the current integration I’m focusing on synchronising the interface views, but not the data generated by either plugin.

4. Global search and replace will come soon. You can’t edit everything in one go at the moment, but in future you will be able to edit whole folders in one go.

I appreciate the insights you’ve shared in your videos – about user pain points, and comparisons with other products. I do intend to address pretty much everything you’ve raised in due course, because you make really good points!

Cheers,
Sebastian


deanphillips1991

1. Awesome, man. I think a good middle ground would be to add an option to clean them up vs an auto clean. That way both people win. Or an option to just clean up a folder vs everything (not sure what would be best, you’re smarter than me)

2. I tend to hover and press enter as I find it helps with being rapid and gets me closer to the instant feedback that O2 gives. Obviously has it’s downsides though as I’m constantly messing up when selecting things.

3. Okay good to know. I guess I’ll just get better at using MT. Once SASS support (for beginners using the preset function) that’ll make my life 10x easier using MT vs O2.

4. Beautiful!

You’re a star and I’m so grateful for you allowing me to give the feedback. I know there’s been so much of it, but hopefully it’s helpful and shows how passionate I am about making this the best product out there for styling a site 🙂


deanphillips1991

Hey man,

With the import CSS options (such a dream btw) do you have any plans to allow us to merge imported CSS with selectors we already have at all?

(I know packs allows this)


deanphillips1991

With the feature that’ll allow us to have nested folders etc and apply folders to certain pages, it would ve fantastic to allow it to be applied to multiple pages (something I don’t know how to do/if it’s possible atm) and page templates (like what YC allows) so only blog posts have the code for example.

Any thoughts on that?


Sebastian

Hey Dean,

Merging imported CSS selector styles with selectors in existing folders, rather than creating new folders and selectors, is unlikely to become a high priority feature. Given the other updates you’ve requested, which have been assigned high priority.

But regarding the ability to assign folders to pages, flexible page logic will be supported. So types of pages, and sets of pages will be doable. Not just single pages or posts.


deanphillips1991

Hey man,

Do you ever see the possibility of being able to track/track selectors based on what we select inside of O2 (in the backend?) or is the out of question tech-wise?

https://www.loom.com/share/1b4eb82c1cba45f2accb60fd9e5472e2 << this explains things a bit better

Thanks so much,


Sebastian

Hey Dean,

Actually, I think this will be possible. It will be supported when I move onto the targeting improvements. I’ve got a solid plan for instant selectors now, and so clicking elements on the page will update the MT styles toolbar at the top anyway. Supporting this with Oxygen active should therefore be fairly routine.

Selector detector‘ – I love it! I’ve never known what to call that feature 🙂


deanphillips1991

Hey mate,

Do you see it ever being possible to see what pages/how many times a selector is used, like webflow does?

https://www.loom.com/share/a843e38f328643519ae2acee62f857ab


Sebastian

Hey Dean,

I didn’t previously have any plans to support this. I’m not sure it’s critical, though I can see the benefit.

There wasn’t any audio in the video by the way.


deanphillips1991

Awesome!

It was also requested in an Oxygen thread here and had good upvotes:

https://github.com/soflyy/oxygen-bugs-and-features/issues/610

When you work on filters and such, will they have fallbacks? I’m not sure if MT adds them or just uses the standard css only.

I noticed Oxygen only does filter: blur(2px) instead of:
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);

Now 100% sure how much that’s needed these days but thought I’d ask 🙂


Sebastian

Hey Dean,

Thanks for sharing the github post.

MT will add -moz and -webkit prefixes for filter property to maximise compatibility for older versions of FF and Chrome/Safari. But browser support looks pretty good for filter. In general, MT does add prefixes to the CSS stylesheet (e.g. animation/transition), but keeps them out of the custom code editor.

Cheers,
Sebastian

You must login or register to reply to this topic.