Naming Conventions

General Guidelines

Naming sections

Sample code

<section id = "product">

<div class = "product‐module">

<div class = "image‐container">
<img src = "img/product.jpg" alt= "product image" width= "320">
</div>

<div class = "detail‐container">
<h5> best‐seller</h5>
<h2 class = "product‐name"> Whole‐grain cereal</h2>
<h3 class="product‐price"> $ 25.00 CAD </h3> <p></p>
<h4> select flavour </h4>
<div class ="flavour‐container">
<div class ="left‐flavour‐item">
<button class = "disabled‐button"> honey</button>
<button class = "disabled‐button"> cinnamon </button>
</div>

</div>

<h4> select size </h4>
<div class = "size‐container">
<ul>
<li> <button class = "size‐button"> 300g </button></li>
<li> <button class = "size‐button"> 500g </button></li>
<li> <button class = "size‐button">1kg</button></li>
</ul>

</div>
<div class ="product‐add‐button">
<button class = "default‐button"> Add to Cart </button></div>
</div>

</div>
</section>