Do you have a collection of 'snippets' of code that you use?

Get Started
1

I’m thinking that it would be extremely useful to have a vast collection of different elements of a website from which one could cut and paste into a layout.

Things like navbars, slideshows, basic page layouts, etc.

Do you do this? If so, how do you organize them, and is there a good way to add it to your code.

2

Many code editors have tools for storing snippets of code and easily adding them to your template with a click.

3

Thanks, I’ll have to check that out.

I am also a bit confused as to how you store such snippets and add them to your code when there are always going to be style and script that go with the snippets.

Would you, for example, say, keep a nice navbar sample in its own separate folder, along with a style sheet specific to that navbar in the same folder?

And then when you add that navbar snippet code to your HTML page would you then add your css link to the style in that folder?

Would you do this for every snippet element?

Forgive me if this question is elemental. When searching the internet many of these basic questions are assumed knowledge and are not addressed.

4

As ralph.m said many code editors have a facility for storing snippet.

I also keep a few text files with various bits of code in them for various uses, easy to cut n paste :slight_smile:

5

That might be something you’d keep somewhere else on your computer. Most likely you wouldn’t want the nav bar styles the same way on every site, but even so, you’d probably keep the HTML as a snippet and the CSS for it as a separate snippet. Then they can easily be associated or not as required.

6

Yea, that’s something that I’ve been doing, organizing a library of basic code that can be quickly added and then styled to fit the feel of the subject matter.

The style and script are on separate sheets and linked to from the index.

As we speak however, I did run across a ‘script conflict’, where only one of the two functions would only appear on a page at a time. If one script was running, the other wouldn’t!

Is this common, can it be avoided in any way?

I can see where too many external css sheets could cause ‘confusion’ for the html.

7

With the CSS you could specify an id in front of all the entries so that they only apply to the part of the HTML inside of the tag having that id.

With JavaScript if you wrap all the code in an anonymous function then the only thing exposed are any ids and classes that the script references. Then the only possibility of a clash is if the different scripts interact with the same HTML trying to make it do contradictory things at the same time.

8

Thanks felgall,
That sounds like a neat idea and I think I get what you’re saying, my trouble is that I have a horrible time visualizing things.
Could I trouble you to type a quick example of what you are explaining with the javascript?

And to see if I’m getting what you’re saying with stylesheets…say if you have 2 navigation bars on your site, each one with its own stylesheet, would you do something like this where the top navbar has it’s own sheet and is assigned a class, named “topnav”? Like this…?

topnav ul {properties}
topnav ul il {properties}

And let’s also say there’s a different bottom navbar that has its own stylesheet and the elements are assigned a class named “botnav”? Like this…

botnav ul {properties}
botnav ul il {properties}

And then the html page would be something like…? (simplified for clarity)

 <div id="topnav">
           <ul>
                 <li></li>
                 <li></li>
             </ul>
 </div>

<additional page content>

 &lt;div id="botnav"&gt;
           &lt;ul&gt;
                 &lt;li&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;/li&gt;
             &lt;/ul&gt;
 &lt;/div&gt;

So to sum up, the ‘topnav’ has its own stylesheet, and the ‘botnav’ has its own stylesheet as well so the 'ul’s and list items won’t be in conflict…sound right?

Thanks!