How To Write Modular HTML And CSS
Posted By : Rajan Rawat | 26-Jun-2017
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{ 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; }
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rajan Rawat
Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.