Using the Style via Classes feature to use classes instead of IDs

Web Export Tips and Tricks
1

The Style via Classes is an often overlooked feature but can provide alternative export option by setting element styles by classes instead of IDs.

image
image1450×778 61.3 KB

By default every element is given a unique ID. If we exported a Group with a Rectangle this is the code we’d get:

<div id="Group_1">
	<svg class="Rectangle_1">
		<rect id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="50" height="50">
		</rect>
	</svg>
</div>

And the CSS:

#Group_1 {
	opacity: 1;
	position: absolute;
	width: 118px;
	height: 50px;
	left: 20px;
	top: 20px;
	overflow: visible;
}
#Rectangle_1 {
	opacity: 1;
	fill: rgba(102,119,245,1);
}
.Rectangle_1 {
	position: absolute;
	overflow: visible;
	width: 50px;
	height: 50px;
	left: 68px;
	top: 0px;
}

When you enable the Style via Classes option an element’s styles are defined in a class selector instead of an identity selector.

Here is the output with Style via Classes enabled:

<div id="Group_1" class="Group_1_Class">
	<svg class="Rectangle_1">
		<rect id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="50" height="50" class="Rectangle_1_Class">
		</rect>
	</svg>
</div>

And the CSS:

.Group_1_Class {
	opacity: 1;
	position: absolute;
	width: 118px;
	height: 50px;
	left: 20px;
	top: 20px;
	overflow: visible;
}
.Rectangle_1_Class {
	opacity: 1;
	fill: rgba(102,119,245,1);
}
.Rectangle_1 {
	position: absolute;
	overflow: visible;
	width: 50px;
	height: 50px;
	left: 68px;
	top: 0px;
}

Is this better or worse?

Currently a unique ID is given to each element while this feature is enabled.

But in the next release the IDs may be removed by default when this option is enabled except when you define your own ID.

2

I like the idea of removing the generated ID for styles if checked. What if additional classes are used in the Element Properties Modal, would it use those classes instead of a generated one?

1 Like
3

Any classes you add would still be added to the class attribute value but the original classes values would still be there.

So if the ids were removed and you added two classes it would look like this:

<div class="Group_1_Class MyGroupClass">
  <svg class="Rectangle_1 MyClass2">
	<rect rx="0" ry="0" x="0" y="0" width="50" height="50" class="Rectangle_1_Class">
	</rect>
  </svg>
</div>

From conversations it seems that your goal is markup only?

So if there was a markup only export and you added two classes you would end up with:

<div class="MyGroupClass">
  <svg class="MyClass2">
	<rect rx="0" ry="0" x="0" y="0" width="50" height="50">
	</rect>
  </svg>
</div>

If that’s the case create an issue with a use case or example code so it can be discussed and referenced.

4

You nailed it!
A markup only flag would do everything I need it to do for ID’s and classes, while still allowing other users who just want to spit out the generated code the ability to do so.

1 Like
5

FYI here is the markup only option:

Enable this option and the IDs will be removed except if explicitly defined by you. The CSS will still be generated by default but you can remove that by editing the style sheet template.

This feature will sort of “break the page” untt trying you fix it because it is now up to you to style, position and size the content.