Front-end style guide: Difference between revisions

Line 89:

Name IDs and classes using hyphens, not underscores or camelcase. (e.g. "#front-page", not "#front_page" or "#frontPage"). CSS file names should use the same convention. (Not all of them do, but hopefully that can eventually be corrected.)

== Usage instructions for code, pre and tt tags ==

If you're interested in modifying the 'Hints' sections of the training missions, here are some guidelines regarding the usage variations of the code, pre and tt tags to keep in mind.

The CSS properties for the pre tag and the code tag are such that a pre element has a newline before and after it and is on a newline itself and a code element does not have a newline before or after it but is on a newline itself. A tt element neither has a newline before or after it nor it is on a newline itself.

Note: As of HTML5, the tt tag has been deprecated.

Here are a few examples:

If you write:

<pre>

<p>If you are on Linux, type: <opening tag>man diff<closing tag> at the command line.</p>

</pre>

If you replace the "<opening tag>" and the "<closing tag>" above in the code with pre tags, the output would be as follows:

<pre>

If you are on Linux, type:

man diff

at the command line.

</pre>

If you replace the "<opening tag>" and the "<closing tag>" above in the code with code tags, the output would be as follows:

<pre>

If you are on Linux, type:

man diff

at the command line.

</pre>

If you replace the "<opening tag>" and the "<closing tag>" above in the code with tt tags, the output would be as follows:

<pre>

If you are on Linux, type: man diff at the command line.

</pre>

== JavaScript ==