post

The Development Standards by which Crowd abide

Crowd Developer Standards

<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<p>We make extensive use of HTML5 in all of our builds, doing our best to instil semantic value into the layouts we write. We try to keep our HTML consistent and easy to read/write so that anyone can pick up a project and start working with it.</p>
</div></div>



<div class="wp-block-group has-background" style="background-color:#edf3f3"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Class Naming</h3>



<p>While we don’t follow any specific class naming schemes, e.g. <a href="http://getbem.com/naming/">BEM</a>, we do try to keep a consistent, common sense approach.</p>
</div></div>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Dashes for spaces</h3>



<p>We don’t use camel case, opting for dashes where word separation is required.</p>
</div></div>


<article class='code-snippet'>
    <pre>
        <code :data-lang='content.language.value' class='language-html'>
            
<article class="subscription-cta-component">
    
</article>
        </code>
    </pre>
</article>


<div class="wp-block-group has-text-color has-background" style="background-color:#232323;color:#ffffff"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Add classes where required</h3>



<p>We identify all components with classes at the root element, giving semantic class names. We also add classes to unique elements within that component when we need to style them.</p>
</div></div>


<article class='code-snippet'>
    <pre>
        <code :data-lang='content.language.value' class='language-html'>
            
<article class="subscription-cta-component">
    <header class="subscription-cta-header">
        <h3>You should subscribe to our mailing list</h3>
        <p>Lorem ipsum dolor sit amet pede...</p>
    </header>

    <div class="subscription-cta-body">
        <label for="email">Subscribe with your email</label>
        <input name="email" type="email" placeholder="email@example.com" />
    </div>
</article>
        </code>
    </pre>
</article>


<div class="wp-block-group has-text-color has-background" style="background-color:#232323;color:#ffffff"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<p>In this example classes have been added to the header and body elements of the widget so they can be styled without nesting, allowing us to write SCSS like so:</p>
</div></div>


<article class='code-snippet'>
    <pre>
        <code :data-lang='content.language.value' class='language-scss'>
            
.subscription-cta-component {
    /* ... */
}

.subscription-cta-header {
    /* ... */
}

.subscription-cta-body {
    /* ... */
}
        </code>
    </pre>
</article>


<div class="wp-block-group has-background" style="background-color:#edf3f3"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Avoid using IDs</h3>



<p>We try to avoid using IDs in HTML unless we need to <strong>uniquely</strong> identify elements for JavaScript purposes. This is because IDs are weighted so strongly in CSS, making it difficult to override styles later in the stylesheet.</p>



<p>The following example is acceptable so long as the IDs are not used for styling.</p>
</div></div>


<article class='code-snippet'>
    <pre>
        <code :data-lang='content.language.value' class='language-html'>
            
<ul class="todo-listing">
    <li class="todo-list-item" id="guid-123"></li>
    <li class="todo-list-item" id="guid-124"></li>
    <li class="todo-list-item" id="guid-124"></li>
</ul>
        </code>
    </pre>
</article>