Need a collapsible CSS selector that does nothing

[pinnacled34498554]

I have a very large CSS stylesheet that controls the appearance of my squarespace site.

I've organized the file as much as possible and labeled it the best I could with comments.

Still, navigating the document would be much easier if I could just collapse certain sections.

But I'm having trouble coming up with an innocuous CSS selector I can to apply to different sections of the code just for the purpose of collapsing them.

I've tried just using brackets without any selectors, but it comes up as a syntax error in squarespace.

I've tried using media queries like @media only screen{ } but it seems to mess with the responsiveness of the site, even when I use the correct screen sizes.

Any ideas ??

Thanks!

[Jon Fritz]

In CC2018, CSS files collapse two ways, by selector and by highlight.

There's no way to encompass a group of selectors in a selector to collapse the group in DW without causing problems in your file (as you've found). However, you can highlight any amount of code, then click the first triangle in the left margin to collapse the entire highlighted area. That way, you could write css comments at the beginning and end of sections, highlight from open comment to end comment...

...then collapse the entire block...

It's not as nice as having the ability to wrap and collapse with some form of tag like html, the structure of straight css just doesn't really allow for that, but it might do the trick for you.

Personally, if I have an overly massive css file, like the plodding monster that comes with Bootstrap, I create an overwrite file, rather than trying to work through someone else's mess, and link that after the giant file in my html. That way, my css is separate from "theirs" and much easier to manage.

[pinnacled34498554]

So there are no CSS selectors that technically do something, but they are so rarely relevant that it will effectively just serve the function of being collapsible in Dreamweaver?

[Nancy OShea]

  wrote

So there are no CSS selectors that technically do something, but they are so rarely relevant that it will effectively just serve the function of being collapsible in Dreamweaver?

No.

You're trying to customize Squarespace code?  Personally, I'd rather have a root canal!

Isn't the whole point of using a site builder like Wix  or Squarespace is so you don't have to do any coding?   Find a template you like.

Website Templates — Squarespace

[pinnacled34498554]

squarespace templates aren't as customizable as one would like

[Nancy OShea]

All I know is if you're customizing Scquarespace templates, you had better know exactly how they work and what language they use.  

What Is JSON-T? — Squarespace Developers

[pinnacled34498554]

Well it's been a process of trial and error, and a lot of using the browser's Inspect feature, but I so far have it pretty well handled.

But specifically would there be a problem with repeatedly using @supports (font-weight:bold) as a means of making my code collapsible?  Looks like font-weight:bold is supported as far back as IE4.

[pinnacled34498554]

Like could I use @supports(display:block){ ? Seems like that would apply to every conceivable browser to the point of being meaningless?  Seems like I was having problems nesting @media queries within each other but I can probably nest @support queries within @media's.  I'm gonna give a go.

[pinnacled34498554]

This seems to be working.

Though if someone wants to tell me why this could be potentially catastrophic, please don't be shy.

[Nancy OShea]

pinnacled34498554  wrote

Still, navigating the document would be much easier if I could just collapse certain sections.

To collapse code, click on the down triangles.  See screenshot.

[pinnacled34498554]

I meant pre-defined sections of the code, right now only delineated by comments.