Grouping in ZindaCSS
There are cases when you have elements with similar properties, such as those in a navigation bar or list
Adding these properties can be done in two ways
<li class="color-blue bg-red">This is a list item</li>
<li class="color-blue bg-red">This is a list item</li>
<li class="color-blue bg-red">This is a list item</li>
<li class="color-blue bg-red">This is a list item</li>
<li class="color-blue bg-red">This is a list item</li>
<li class="color-blue bg-red">This is a list item</li>
All list items have thte common properties 'color-blue' and 'bg-red'. After writing all this code, if I want to add another property like 'border-solid' to each list item, we have to rewrite it again. This is a time consuming process
Saving the valuable time of developers being our priority, we have created a solution to this called zindagroup
First create a new element of type zindagroup and give it an id and the classes.
Rewriting the above example:
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>
In the above code, all the lists with the class 'listItem' will have the properties 'color-blue' and 'bg-red' in them automatically. This is the magic of
'zindagroup'.
Now, by simply adding 'border-solid' class to zindagroup, the 'border-solid' class is automatically added to all the
list items (with class 'listItem').
This is such an easy process and saves us the hassle of rewriting everything incase we ever need to add or remove any classes.
The zinda group element is invisible, and it only holds the information of properties. The Class of the zindagroup has the properties that are applied to every item which has the class 'listItem'.You can choose the class the list items will have based on the id.
This example uses lists (<li>), but you can use zindagroups for any elements such as buttons(<button>), paragraphs(<p>), links(<a>), menus(<nav>) etc.
You can also add properties like :hover, custom values etc. in zindagroups