Website template for Cardshifter game

I'm putting together a template for easy formatting of content pages, to be used in putting together a website for an online trading card game.

I've been using the Bootstrap library (and finding it wonderful) and since we will be using this template for basically all pages, I want to make sure it's top-notch before we deploy anything. Any and all useful feedback is appreciated.

I have also been told that there is a way to use this boilerplate navigation menu code in a more modular fashion using JavaScript or other such. I'm not asking for any gimme-teh-codez but if you have any link to anything useful I can dig into, I'm all ears.

P.S.: The CSh- prefix in class names is used to differentiate Cardshifter custom classes vs. Bootstrap classes.

index.html

`

SECTION -->









Cardshifter





















Toggle navigation




Cardshifter



Home

• About

• Contact

Home
Play Cardshifter!
News
Latest Release
New Git issues
Project
Contributors
Images
Wiki
Contribute!
Mods
Cyborg Chronicles
Start a New Mod!
Contact Us
Report a bug
Request a feature
Chat room




Header 1




Header 2
Header 3

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur rutrum velit et sagittis. Nullam vitae mi sed sapien ornare tincidunt. Suspendisse vel magna a nulla consectetur consectetur.

Link to Google.

Strong text

Italic text

I'm no HTML / CSS guru so take this with a grain of sand (and wait for better).

This kind of CSS class name looks like a bad idea:

div.CSh-body-padding {
    padding-left: 15px;
}

Including styling hints in the class name seems to go against the philosophy of stylesheets.
The HTML markup should not contain things like this,
and focus on the logical structure and elements of the document.

To put that in contrast, this is a good name:

a.CSh-top-link {
    // ...
}

The name contains no styling hints, it's about a logical element in the document.

The word "formatting" in this style name is superfluous:

div.CSh-alert-formatting {
    font-size: 1.2em;
}

All CSS is about formatting, so no need to include that in the name.
Also note the names Bootstrap uses for interesting variations in formatting:

• alert

• alert alert-danger

• alert alert-success

• ...

I would also rename the file itself to cardshifter.css instead of cardshifter-formatting.css.

I very rarely see mixed case CSS class names like CSh-....
Of course if you lowercase it becomes csh-,
reminiscent of the C shell in UNIX,
but I think that's still ok, and might be better (and easier to type).

This looks an interesting guide for writing efficient CSS.

(I'll be very interested to see what solution you come up with for generating the navigation. That is, without duplicating the (almost) same menu code code on all pages that need it.)

StackExchange Code Review Q#69686, answer score: 6