How to avoid repeating html and css commands?

Question

How to avoid repeating html and css commands?

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)

1

How do I not repeat the HTML and CSS code of a website structure? For example, I made the structure of a web page and I want this structure to be applied to the other 5 pages that I will create for this site. Follow the print of the page:

For this I created an HTML file and a CSS. To replicate this structure to the other pages I have created HTML and CSS files for each of the other 5 pages I have copied and pasted the codes of that structure into them. But this is very repetitive, I think there is a more efficient way of doing this. If I change something in this sidebar, I have to change it in the other 5 files, eg

Is there a method to avoid this repetition?

html css

asked by anonymous 14.08.2017 / 16:43

3 answers

Accent characters are considered as two characters [duplicate] Function to summarize string in php [duplicate]

score 2 · Answer 1

This solution is only if you want the same content in other pages. If it's just the stylization, just import the same file CSS on other pages and set the same #id's or .classes in same elements.

You can do this using JQuery .

Suppose you have content in the menu.html file that should be on all your pages.

Just include the code below on your other pages that should contain menu.html content:

    <script src="jquery.js"></script> <!-- Importar biblioteca do Jquery -->
    <script> 
    $(function(){
      $("#includedContent").load("menu.html"); // incluir conteúdo do menu.html na div com id #includedContent
    });
    </script> 
    <div id="includedContent"></div> <!-- o menu.html será incluído nessa div -->

Source: link

Another way: link

score 2 · Answer 2

In addition to the way Diego Costa commented, there is an old technique called Server Side Includes. With Iframe it is also possible to achieve the same result.

Here has more resolutions on the same issue

score 1 · Answer 3

I highly recommend that you use Gulp or Grunt for this. With it you can use a template engine like nunjucks, pug or handlebars. They make it much easier to create the front end.

I've created a boilerplate, it might be useful for you: link