CoreMedia HTML in templates follow the B.E.M. pattern, standing for block, element, modifier, for naming. Make sure you understand the principles (see for example http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax.
Usage of IDs
Avoid styling IDs. IDs should be used for the semantic of a page. CSS rules bound to IDs have a higher order than css rules bound to class names. This leads, if not used carefully, in long term to very bad workarounds in CSS styles and so to much more CSS styles than needed and to very difficult maintenance.
In general only elements that occur exactly once inside a page are valid candidates for IDs. However, this doesn't mean that it is a good idea to make them an ID. Only use IDs in these two cases:
You need to identify a DOM element where you want to explicitly say that it may only occur once per page and you need to make sure that this is the case. This is useful to jump to specific sections of a page, for a screen reader, for instance.
You need to distinct an element of a certain common class from the other ones and you can not find it through relatively moving over the DOM tree.
When you are in doubt, use a class name.
CoreMedia CSS files follow a style guide to which you should adhere when you write your own stylesheets.
Coding Style
In class names use dashes to separate, not camelCase or underscores.
Indent property declarations by two spaces.
In property declarations, put a space after the colon.
In rule declarations, put spaces before the curly bracket.
In parameter listings, put a space after each comma.
Write empty property values without a unit. That is "width: 0" instead of "width: 0px".
Use hexadecimal color codes (#00000a) with lowercase instead of RGB unless you are using RGB.
Use 6-character hexadecimal code, if you use 3-character code every character is duplicated. That is, for instance, #abc is short for #aabbcc and not #abcabc.
.styleguide-format {
margin: 0;
border: 1px solid #0f0;
color: #000000;
background: rgba(0, 0, 0, 0.5);
}Example 6.8. CSS code that follows the style guide
 |  |  |
 |