23screens

Class naming conventions

• oc-namespace
• Hierarchical
• Reusables/generics
• Two-class naming
• Case studies

Hierarchical classes:
Hierarchical elements take class names from their parents, within reason. The idea is to keep it consistent while avoiding 10-part class names. Use your best judgement here.

<div class="oc-widget oc-widget-feed">
  <h2>Recently updated projects</h2>
  <ul class="oc-widget-feed-list">
    <li class="oc-feed-item oc-clearAfter" tal:repeat="project view/recentprojects">
      <img class="oc-avatar" src="" tal:attributes="src project/image_src | nothing" />
      <h3 class="oc-feed-item-title">
            <a href="" tal:attributes="href project/absolute_url" tal:content="nocall: project/title">Project Title</a>
      </h3>
      <p class="oc-feed-item-data oc-discreetText" tal:define="nmembers python: len(project.projectMemberIds())">
        <span tal:replace="nmembers">YY</span> member<span tal:condition="python: nmembers > 1" tal:replace="string:s" />, active since <span tal:replace="python: view.create_date(project)">Jan 1937</span>
      </p>
      <p class="oc-feed-item-description" tal:content="project/mission | string: project mission statement goes here">
        This is the descriptive text for a project. Apparently it doesn’t quite work right yet. Is there even a field for users to fill out or entry to call from a database?
      </p>
  </li>
  </ul><!– end .oc-widget-feed-list –>
</div><!– end .oc-widget-feed –>

Reusable/generic classes:
Reusable / generic classes can go anywhere, without specifying anything more. For example, an oc-headingBlock can go inside any block-level element, including “widgets”.

<div class="oc-headingBlock">
   <h1>Projects on OpenPlans</h1>
   <p class="oc-headingContext">Currently serving <span tal:replace="view/nprojects"/> projects</p>
</div><!-- end .oc-headingBlock -->

Two-class naming structure for generics.
First class name defines generic. Second enables customizations.

<div class="oc-widget oc-widget-feed">

<!– some stuff –>

</div><!– end .oc-widget.oc-widget-feed –>

Case studies:
A few code examples here… (simple to complex)

1. Feed
2. Wiki
3. Forms