We Keep Coding

How HTML, JS and CSS work together

I would like to understand how HTML, JS and CSS work together and reference one another.
I have found that HTML can reference CSS via an id reference.
Example: <div id="left-show"></div>
However, it would be much appreciated if someone could clarify the following:
How would you tell your HTML code to reference a specific JS function.
Within a JS function, is it a good practice to reference a CSS id?
If a JS function and CSS id share the same name, would that create a conflict?

How would you tell your HTML code to reference a specific JS function.
Generally, you don't.
You include a script (with a <script> element) that accesses whatever parts of the DOM you want it to interact with (via the document object that the browser will make available to the script).
You can use the addEventListener method to bind a function so that it will run in response to an event (such as a button being clicked).
Within a JS function, is it a good practice to reference a CSS id?
There is no such thing as a CSS id. HTML has IDs which have a multitude of purposes including being matched by CSS ID selectors, being linked to with a fragment identifier on the end of a URL and allowing a <label> to reference its associated form control with the for attribute.
If you want to access a specific element, then an HTML ID is a good way to identify it (via the getElementById method).
If a JS function and CSS id share the same name, would that create a conflict?
There can be some issues if JavaScript variables of any kind (including functions) match the ID of an HTML element. This is best avoided by staying away from the global scope as much as possible (as per this answer).

Your questions are a bit far-reaching for a full explanation on a concise Q&A site like SA. You would really need to read a lot of material for a full understanding.
However, some brief simplified answers to get you started
1) HTML links to JavaScript via events that trigger JavaScript functions. This is an example of a very simple event on an HTML element that will look for a function in your JavaScript declared as function aJavaScriptFunction(){ } when you click on the button. There are different ways to do this and different types of event, but this is a good place to start.
<input id="thebutton" type="button" value="A Button" onclick="aJavaScriptFunction();" />
2) It very much depends what you are trying to do, but in general selecting HTML DOM elements via their ID is an efficient method of selecting them to do something with them. So this might be the JavaScript function that we're using in the previous example.
function aJavaScriptFunction()
{
var aButtonElement = document.getElementById("thebutton"); // <-- It's not a "CSS id" as such, CSS can use the HTML id
// .... some more javascript that uses aButtonElement like
aButtonElement.style.borderColor = "red";
}
3) No. JavaScript and CSS don't really directly overlap as such in the way you might be thinking, when you're beginning, think of them both as altering the HTML. It is possible to do some of the same things with JavaScript as CSS, but in general they happen at different times. This CSS doesn't conflict with the previous JavaScript, though they both do similar things.
#thebutton { border-color: blue; }
Here are all my examples put together into a jsFiddle where you can play with them.
You'd be best off visiting somewhere like W3 Schools or Code Academy.

how to reference elements in CSS or JS files for fastest parsing?

I'm trying to improve a websites rendering speed.
Both CSS and JS files mostly reference elements like this:
Javascript:
$('.some_element').doSth()
CSS:
.some_element { /* do something */ }
Just curious - is this the optimal way of referencing elements in terms of javascript parsing and website rendering? Wouldn't it be better to do something like div.some_element?
Thanks for some infos!

If speed is a priority you might want to switch to vanilla javascript as much as you can. Native javascript is faster than jQuery.
If you want to keep your jQuery selector use parent context to make the search for the element more efficient. Example $('#parent').find(child)
You can find more tips on javascript an jquery optimization on the web:
http://engineeredweb.com/blog/10/12/3-tips-make-your-jquery-selectors-faster/

div.some_element will be different than .some_element, if you don't just have divs that use the some_element class.
Maybe compare render times using Chrome's built-in developer tools (or an alternative) to see if it helps you, but I doubt it'll be significant.

The fastest way to find a single element is usually with an id, not a class:
document.getElementById("whatever")
If you have to use jQuery (which is not as fast as plain javascript), then you would use:
$("#whatever")
If speed is really important, you can resolve the DOM element once when the page loads and just save the direct DOM reference so you don't have to find it when your code actually executes later.
As with all questions of performance, the only real way to answer a performance question is to benchmark a couple of implementation options and actually test which is faster.

JavaScript: document.createNode or plain html?

Is it better to use
document.createNode();
or plain text like
var foo = '<div> bar </div>';
to create HTML markup with JavaScript?

There is no "better" in this particular case, it is going to boil down to what is most easily maintained. and programmer preference.
In some browsers, using DOM to create elements and nodes is, in terms of performance, faster than others. Some user agents process strings faster, for example by setting the innerHTML property.
I personally prefer to use DOM objects always, but I use the mootools framework which lends itself to this approach. jQuery encourages string-based creation.
Check out this benchmark: http://jsperf.com/string-vs-createelement/3, but also consider these articles: http://www.quirksmode.org/dom/innerhtml_old.html and http://karma.nucleuscms.org/item/101

It is better to use the DOM node functions. If you want to create it using a string, look into jQuery, as it has ways to parse it correctly into DOM nodes for you.
var foo = $('<div> bar </div>');

Using DOM manipulation functions you can have a reference to the created elements, one by one, and will be easier to modify the code later on, for example modify the tree order, adding or removing an element, and also for debugging purposes.
This said, there are some times I experienced myself in which the DOM manipulation functions are not the best way.
For example I had the necessity to modify real time the content of a style tag, to control the style of the elements directly via text css rules, something you can't achieve in all browsers using the various JS style objects, because they contain read-only properties.
In this case the style tag html was read-only for IE (or at least IE didn't like to modify it via innerHtml or similar), the only solution I found was to read the old html value, change it, remove the element and create a new style tag element with the new html directly typed in the string when creating the element.
This said, I would go with the DOM node functions whenever possible.

Do I need somehow "prepare" my HTML before moving on to making my page more sexy with jQuery?

Do I need somehow "prepare" my HTML before moving on to making my page more sexy with jQuery?
What I mean is there some rule that says that HTML modification with jQuery is easier when HTML has "this" and "that" and "that too"? Some "HTML design patterns" like we have in C++ for example?
My HTML is generated by PHP application from templates and data retrieved from mySql database, and it is styled with CSS so I have ids and classes and almost all "components" on pages are inside divs (with id or class or both) so I presume that it is "jQuery ready" but maybe I should add something more to HTML or think about something?
I mostly have a complete vision what I want to accomplish with jQuery and how page should look like and behave when I finish so it is "only" matter of implementing it but I don't want to get too deep and suddenly discover that if I done something at the beginning my work would be easier and faster.

One advice: generate valid HTML according to whatever DOCTYPE you are using and have fun with jquery. Also avoid mixing markup and javascript: keep them separate and progressively enhance your markup with javascript features.

What you need to do is create a bare HTML page that is usable as-is, meaning, no Javascript required to operate it – that's the ideal anyway, building a web app usually means there's a dependency on Javascript, but you should only use JS when necessary.
Adding Javascript should only enhance your UI while CSS should add the presentation on top of the existing HTML structure. In other words, an HTML page without CSS and Javascript should look and read well.

Is there a way to create your own HTML element?

Is there a way to create your own HTML element? I want to make a specially designed check box.
I imagine such a thing would be done in JavaScript. Something akin to document.createHTMLElement but the ability to design your own element (and tag).

No, there isn't.
The HTML elements are limited to what the browser will handle. That is to say, if you created a custom firefox plugin, and then had it handle your special tag, then you "could" do it, for varying interpretations of "doing it". A list of all elements for a particular version of HTML may be found here: http://www.w3.org/TR/html4/index/elements.html
Probably, however, you don't actually want to. If you want to "combine" several existing elements in such a way as they operate together, then you can do that very JavaScript. For example, if you'd like a checkbox to, when clicked, show a dropdown list somewhere, populated with various things, you may do that.
Perhaps you may like to elaborate on what you actually want to achieve, and we can help further.

Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.
An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.
Using it you can make a like button really easily:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

The easiest way would be probably to write a plugin say in Jquery (or Dojo, MooTools, pick one).
In case of jQuery you can find some plugins here http://plugins.jquery.com/ and use them as a sample.

You need to write own doctype or/and use own namespace to do this.
http://msdn.microsoft.com/en-us/magazine/cc301515.aspx

No, there is not. Moreover it is not allowed in HTML5.
Take a look at Ample SDK JavaScript GUI library that enables any custom elements or event namespaces client-side (this way XUL for example was implemented there) without interferring with the rules of HTML5.
Take a look into for example how XUL scale element implemented: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js and its default stylesheet: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css

It's a valid question, but I think the name of the game from the UI side is progressive markup. Build out valid w3 compliant tags and then style them appropriately with javascript (in my case Jquery or Dojo) and CSS. A well-written block of CSS can be reused over and over (my favorite case is Jquery UI with themeroller) and style nearly any element on the page with just a one or two-word addition to the class declaration.
Here's some good Jquery/Javascript/CSS solutions that are relatively simple:
http://www.filamentgroup.com/examples/customInput/
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Here's the spec for the upcoming (and promising) JqueryUI update for form elements:http://wiki.jqueryui.com/Checkbox
If you needed to validate input, this is an easy way to get inline validation with a single class or id tag: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Ok, so my solution isn't a 10 character, one line solution. However, Jquery Code aside, each individual tag wouldn't be much more than:
<input type="checkbox" id="theid">
So, while there would be a medium chunk of Jquery code, the individual elements would be very small, which is important if you're repeating it 250 times (programmatically) as my last project required. It's easy to code, degrades well, validates well, and because progressive markup would be on the user's end, have virtually no cost on the server end.
My current project is in Symfony--not my choice--which uses complex, bulky server-side tags to render form elements, validate, do javascript onclick, style, etc. This seems like what you were asking for at first....and let me tell you, it's CLUNKY. One tag to call a link can be 10 lines of code long! After being forced to do it, I'm not a fan.

Hm. The first thought is that you could create your own element and do a transformation with XSLT to the valid HTML then.

With the emergence of the emerging W3 Web Components standard, specifically the Custom Elements spec, you can now create your own custom HTML elements and register them with the parser with the document.register() DOM method.
X-Tag is a helpful sugar library, developed by Mozilla, that makes it even easier to work with Web Components, have a look: X-Tags.org