(c) Shubham Ramdeo


  • Introduction
  • Getting Started
  • Bol
  • Structure
  • Guidelines
  • License


bol is a design methodology. It stands for .base .-object ._layer.

Why bol?

bol is designed on purpose that new developers of a project can understand the code easier, while css remains logical.

Why not bol

There are lot of other naming methodology which may be more productive than bol. Please choose the one which suits your project.

Getting Started

BOL can be divided as:


User doesn't want to waste time on this that's why he choose a specific framework.


User wants to have different kinds of object that's why he choose a specific framework.


User wants to style the elements by his own theme and designs or want to play by mixing the avaible options that's why he choose a specific framework.

What does BOL says?


Base classes are includes the independent styling elements. So it also includes all the HTML tags. These classes can be used alone independently as resulting elements. For example, button, headings, tooltip, navbar etc comes in base elements. They are named as follow.

.base { ; } //If new element.
base { ; } //If its an HTML element.

base example

/* -CSS- */
p { ; }
.navbar { ; }
.tooltip { ; }
<p> ... </p>
<div class = "navbar"> ... </div> 
<div class = "tooltip"> ... </div> 


Object classes are purely dependent on the the base classes. Although Base classes can be used independently with objects and they would use the default object styling, objects classes ads more base dependent customization. They are named as follows.

.base .-object { ; }

Always declared along with base for specificity.

object example

/* -CSS- */
.tooltip .-right  { ; }
.tooltip .-icon  { ; }
.navbar .-icon { ; }
<div class = "navbar -icon"> ... </div> 
<div class = "tooltip -right"> ... </div> 
<div class = "tooltip -icon"> ... </div> 

This pretty much looks like : "navbar navbar-icon" or "tootltip tooltip-right". But instead repeating base, using only hyphen also makes it clear.


Layer classes are not bound to any other class and can be used independently. But using them without any base (includes HTML elements) or objects will not make any sense. They are the Utilities and Modifiers. They can be mixed up. And are named as follows.

._layer { ; }
Use ._[adjective]-[verb]-[noun] in order.

!important tag can be used as layers holds the final style. But try to avoid if possible.

layer example

/* -CSS- */
._width-full { ; }
._desktop-hidden { ; }
._black { ; }
<div class = "navbar _desktop-hidden"> ... </div> 
<div class = "tooltip -right _width-full"> ... </div> 
<div class = "tooltip -icon _black _desktop-hidden"> ... </div> 

For Example

<div class="navbar">
    <div class="-dropdown _disabled">

base navbar
object -dropdown
layer _disabled

For Example Contd...

<div class="tooltip -right Color">
    <div class="-text _blinking">
        I am a blinking tooltipText of a tooltip in right.

base tooltip
object -right-text
layer Color_blinking

BOL Structure

For easy maintainance, all css should be made into different files for each base along with its objects and an independent layer file.


For production version, all should be put into a single file.



/* -html.css- */
p { ; }
/* -tooltip.css- */
.tootltip { ; }
.tooltip .-right  { ; }
.tooltip .-icon  { ; }
/* -navbar.css- */
.navbar { ; }
.navbar .-icon{ ; }
/* -layers.css- */
._width-full { ; }
._desktop-hidden { ; }
._black { ; }

General Guidelines for HTML with BOL

  1. Try to avoid using !important;
  2. Stay away from #ids. Always use classes for styling.
  3. No child without parent.
  4. Follow DRY, Don't Repeat Yourself.


BOL Methodoly is designed by Shubham Ramdeo and is copyrighted. The code is Licensed under MIT and the document is Licensed under CC-4.0. Which means you can use the code, document and BOL Methodology itself, till you are giving back proper credit and attribution to the author, Shubham Ramdeo

Designed with ♥ by Shubham Ramdeo (c)