Menu

#6482 Class naming strategy

Parent Category:
DPCalendar
Category:
Misc
Last Updated:
Allon Moritz, Tuesday, 06 November 2018 11:41
Created:
Tuesday, 06 November 2018 10:04
Hits:
2616

Introduction

DPCalendar uses BEM as strategy to define it's markup and classes. This is a well known and widely accepted approach. BEM knows only blocks, elements and modifiers, this means you do arrange your markup and classes within this borders. If you want to know more about it, there is a very good documentation at bem.info.

An important part is the class naming concept which comes hand in hand with the markup. The block element gets a simple name like dp-flatcalendar which defines it's purpose. This block can have multiple elements. The name of such an element is prefixed from the block name with two underscores like dp-flatcalendar__day or dp-flatcalendar__month. The last piece are the modifiers which do define the state or behavior like dp-flatcalendar__month_disabled. So basically, a class name is defined by block-name__elem-name_mod-name.

In a nutshell you would create a block with elements like:

<div class="dp-flatcalendar">
    <span class="dp-flatcalendar__day"><?php echo $displayData['date']->format('j', true); ?></span>
    <span class="dp-flatcalendar__month dp-flatcalendar__month_disabled">
        <?php echo $displayData['date']->format('M', true); ?>
    </span>
</div>

Comments (0)

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.