Styling Best Practices

• Use Notepad++ or a CSS editor to write your custom CSS files. This promotes proper syntax and improves formatting.
• Use the tab key for indentation.
• Curly brackets should open at the end of a line with a selector, and close at the beginning of the line following the last property and value.
• Before changing or adding a stylesheet, it's always a good idea to download the existing or default stylesheet to your local computer, in case you need to revert or refer to the standard options.
• Properly comment and organize your CSS when you make additions or changes.
• Document your changes, where you made them and why in your project's build tracker.
• Beware of special characters. Some characters are reserved in HTML, XML, or XHTML because the browsers will mix them with tags. So if you need to use a special character use the HTML Entity.
  • Reserved characters: < > & "
  • HTML Entities can be numeric or named; they all start with "&" and end with ";".
  • Use an entity name instead of a number; it's easier to remember.
  • Some browsers may not support all entity names.
• Be aware that your user might be using an older browser and not all browsers follow the newest web standards. IE can be particularly troublesome. For the latest information on browser specific issues, visit: http://caniuse.com/
• Use the hex code value instead of typing a color name. This ensures continuity for branding purposes.
  • When removing a selector color: either comment out the property & value or delete the entire line.

  • Never leave a value blank after the #.

    GOOD	BAD
    .bundle-list {   border-color: #000000;   border-style: solid; }	Example 1: .bundle-list {   border-color: black;   border-style: solid; }
    	Example 2: .bundle-list {   border-color: #;   border-style: solid; }

• Headings: <h1> through <h6>. Avoid using heading tags simply to bold text or format something differently.
  • h1: Intended to be the page/main subject title (think of this as a book title). Search engines often use h1 tags when looking at your site; overusing h1 tags can flag your site as spam.
  • h2: Intended for section titles (think of these as chapter titles).
  • h3-h6: Sub-section titles; these are intended to be used in descending order.
• Paragraphs: <p>
  • <br/> tag: Forces a line break within the text flow of a paragraph to continue your text on a new line. Avoid using <br/> to end a paragraph or to change the length of your text lines.
  • Avoid using <p>&nbsp;</p> to add more space between elements. It can result in awkward-looking HTML, which is confusing to edit later, and unexpected spacing in different browsers.
  • Use a class name with the formatting found in your style sheets to achieve your desired spacing amount and type ( for example, indent, padding, first line indent, and so on).
• Text emphasis
  • CSS is the best way to format your text.
    • Assign a class to the text element (for example, span, cell, group, grid). That class can be used to format font-weight, font-face, size, color, alignment, and so on.
    • However, if you need to assign the styling within the HTML, use the correct tags.
  • Bold text Use <strong>. <b> is an outdated tag; it works for now, but may not be supported in the future.
  • Italic text: Use <em>. <i>is an outdated tag.; it works for now, but may not be supported in the future.
• Always close your tags. Failing to close a tag results in unwanted formatting, or in the worst case scenario, can break your site (by interfering with JavaScripts or making critical elements inaccessible, invisible, or incorrectly displayed).
• Use lower case markup.
• Avoid inline styles. Instead, use CSS to style a class.
  • Never use inline JavaScript.
• Validate your HTML.

• Classes can be reused as needed throughout your site.
  • Config: classes can be applied to Tabs and Grids ( within "Properties").
  • If a class name is not specified, Oracle CPQ will automatically assign a Grids name, based on default functionality.

  • Class name always begins with a "."

    For example: .group-list).

  • Avoid assigning either too many or too few classes to your elements.
• IDs are a unique styling: generally they're used to designate a special element (e.g. Body or Navigation bar) that are only used once per page.

  • ID names always begins with a "#"

    For example: #nav-bar).

• Elements are the standard HTML components.

  Examples:

  • h1 = Heading 1
  • p = paragraph
  • td = table cell

Best Practices for Naming

• When styling an element, avoid applying a style across an entire site if that style is only intended for use in one section or a specific item.
• Always begin with a letter (CSS rules allow you to begin with an underscore_ but this is not a best practice and should be avoided)
• Do not use spaces: Separate words 'with-a-dash'

• No special characters

• Use short descriptive names
  • Try to create descriptive names that describe the function, not the appearance of the section.
  • For example: For an element that will be on the right hand side of the page but will hold a list of bundle names, consider naming that element 'bundle-list' instead of 'right-hand-column.'

Specificity is a concept in CSS that determines how a conflict is resolved (competing CSS rules). The concept of specificity states that when two or more declarations apply to the same element, set the same property, and have equal importance or origin, the declaration with the most specific selector takes precedence.

• Be as specific as possible with your selector when writing a new CSS rule.
• When there is a conflict, use a Web Developer to discover which rule is conflicting with yours.
• Avoid using the '!important' tag to resolve conflicts that can be more easily resolved using the principles of specificity.

Specificity example

Calculating specificity

Before hiding elements using the CSS, ask yourself the following questions:

• Is the element part of an Attribute or something that can be hidden using Access/Hiding Rules?

  If yes, use Oracle CPQ rules instead. Hiding an element with CSS doesn't remove it from the HTML (therefore, can still be accessed).

• Can the element be removed through the Layout Editor or by changing the flow?

  If, yes, do it that way.

Hiding elements

Example

/*Hiding Price Book Element*/
.pricebook-container{
display:none;
}

In the process of implementing, upgrading, or maintaining a client site, you will likely find yourself needing to make a change to an existing stylesheet.

• Before replacing an existing stylesheet with your edited version, download and save a copy of the current stylesheet.
• Search the stylesheet before adding your change to see if a declaration with the same exact selector already exists.

  •  If the exact selector already exists within the CSS:

    Place your change into the declaration rather than create a duplicate, conflicting one. Place a dated comment next to your changed line.

  •  If the particular selector or selector group doesn't already exist in the CSS:

    Add new code. For more information, see the topic Stylesheet Manager.

• When adding brand new code (for example, new selector or selector group) to the stylesheet, place it in the appropriate section of related content. If no such section exists or it is an isolated situation, place your code at the bottom and comment out a new section for it.
• Place a comment above the selector with a clear explanation of what the CSS rule is accomplishing (include your initials & date if there are multiple people working on the CSS). You can group related code together with a comment above the first rule and the word "BEGIN" followed by a comment below the last rule with the word "END".
• Maintain proper spacing between rules and comments.
  • Each rule should be spaced by (at least) one empty line from other rules.
  • Comments should be placed directly above the rules they reference.
  • Grouped comments ("BEGIN" and "END") should have an empty line between the first and last rules they group.

Example

Design principles

External resource: websites

External resources: books