Extract exact HTML and CSS tool (SnappySnippet) codes 6.2k lines of css for a header

This is a question for people who use SnappySnippet or this sort of a tool. The extension lets you copy the exact HTML+CSS of a specific element without worrying about ancestors’ properties not being taken into account, and thus, rendering the same result.

I am a beginner web designer and a tool like SnappySnippet is really useful. I tried to copy a “sample” (a header) from my website with this tool and incorporate it in a fiddle. In my local folder that section has a few lines of code,but the extension built 6.2k lines of css for three elements to the point it can no longer load properly https://jsfiddle.net/LauraStoian/6qcgr2uv/ .

HTML

<section id="SECTION_1">
	<!-- /.lqd-custom-menu -->

	<div id="DIV_2">
		<div id="DIV_3">
			<!-- /.col-md-6 -->

			<div id="DIV_4">
				<header id="HEADER_5">
					<h2 id="H2_6">
            The standard chunk of Lorem Ipsum 
					</h2>
				</header>
			</div>
			<!-- /.col-md-6 -->

		</div>
		<!-- /.row -->

	</div>
	<!-- /.container -->

</section>

CSS

You don't want that CSS here

Here are the settings of the extension. https://imgur.com/DeBagA2

Any solution for this? Or could someone recommend a better tool of this type?
Thank you

Looks like it grabbed 6000 lines of code–just to duplicate a header that might at most require 40 or 50?

It looks like it was last updated in 2013, so that might be why it’s not working properly. Personally, if I were trying to learn CSS, I’d spend a lot of time in DevTools (right click and inspect in the browser) and try to learn what’s going on and how the results were achieved. You can see what’s going into a particular element without using an extension. I would build from simplicity and learn what each line of code does, as opposed to starting with 6000 lines and trying to make sense of that.

Realistically, I don’t see any value in completely grabbing all the css properties of a particular real-world element, because in your own designs you’ll be working in an environment that does pass down lots of inherited code and settings.

I don’t want to see what’s going on in a particular element. I just want to copy that element to present it. You never needed to copy a particular element in codepen or jsfiddle? That it’s basically my question. How to copy the exact HTML and CSS of a specific element. With the help of this tool, yes, because this is the only option that I found and I hoped that someone who use this and knows more about it would be able to tell me what is wrong with it or the way I use it so that the file size becomes normal.

If I want to copy something, I look inside the element. Then I can take what I need. But I had to learn CSS in order to do that.

You might look into libraries for designers that have elements you can browse and grab, or go to a designer forum/hangout and see how they do it. Maybe they have tools or apps that coders aren’t aware of.