How To Write Modular HTML And CSS

Modular HTML and CSS

Whenever you have to build a website, you would probably aware they will tend to scale, or require the ability to in future.  That is why development for scalability is almost a necessity in the current state of the web.

Modules  in a website are like a Legos. Take modules as Legos pieces which will make and buils you website. When you connect all the Legos together in right way, they will form a web pages. To make or build a website like Legos, you have to suppose a website as a collection of all independent modules. this blog will help you to know that front-end and design 

MODULES

Modules means you have to build something that can capable of growing and expanding with ease. With this kind of development will allow you to make or build components that can be reused by you throughtou your whole project.  This is will help you make your code neat and clean and modular which gives you the advantage of speeds up the development time

MODULES FOR FRONT-END DEVELOPMENT

Lets's take and example of button, when ever you have make button in html you will use the <button> tag in that page . Now lets's imagine you building a button and you need to code a orange button which is generally used in contact form. Now let' s see the code for that

submit
       

                .submit{
background: orange;
color:#fff;
padding: 10px 10px;
font-size: 14px;
}

Now .submit class will solve your problem, but what happened if you want a create a new button with black background color. You will copy and paste then change the class name and background color. Now again you have to use same button with orange background again. You can see what is going on there and you may end up with lots of css is being repeated. So to avoid these kind of thing you have to make a modular button 

MODULAR BUTTON

Now let's see how to write the code in modular way. A modular way is that approach would be to write a code which can reused. So these are Legos which can be used and reused all over again

          .button{
	padding:10px 10px;
	font-size: 14px;
} 
        

              .button-orange{
	background:orange;
	color:#fff;
} 
     

submit