Revision of Randomize Class Names in Astro Web Framework

1 file changed, 48 insertions

README.md(file created)

		@@ -0,0 +1,48 @@
1	+	# Randomize Class Names in Astro Web Framework
2	+
3	+	If you're wanting to have your class names in your Astro website randomized, no extra integrations or packages are needed. This can be done simply using the module method.
4	+
5	+	## Module Method
6	+
7	+	Your CSS file needs to have the module name in it, such as `*.module.css`. For this example, we'll use `index.module.css`.
8	+
9	+	```css
10	+	/* index.module.css */
11	+	.card {
12	+	background: #121212;
13	+	color: #eee;
14	+	border-radius: 3px;
15	+	border: 1px #232323 solid;
16	+	}
17	+	.version {
18	+	font-size: 12px;
19	+	text-align: center;
20	+	}
21	+	```
22	+
23	+	In your Astro file, import the CSS module file and change your class names to use it directly, here's an example with the CSS file I just showed:
24	+
25	+	```jsx
26	+	---
27	+	import Style from "./index.module.css"
28	+	---
29	+
30	+	<div class={Style.card}>
31	+	<h1>Card Title</h1>
32	+	<p>Card content</p>
33	+	</div>
34	+	<p class={Style.version}>v0.0.1</p>
35	+	```
36	+
37	+	> Classname for card output as `_card_1mdgr_2` and version as `_version_1mdgr_2`. The `_1mdgr_` changes when you make changes to the CSS file, I assume it uses a hash method of some sort.
38	+
39	+	If you need to add another class name onto the class attribute, do something like this:
40	+	```jsx
41	+	<p class={"extra-classname " + Style.card}</p>
42	+	```
43	+
44	+	or
45	+
46	+	```jsx
47	+	<p class={`extra-classname ${Style.card}`}></p>
48	+	```

Newer Older