How to separate text and HTML with CSS
To improve the maintainability of a website, is it a good idea to strip all text from the HTML and put it in a unique CSS stylesheet ? I mean, something like this:
HTML file
<body>
<h1 class="home-title"></h1>
<p class="description"></p>
<!-- and much more elements... -->
</body>
CSS file with all text
.home-title:after {
content: "Welcome to my website!";
}
.description:after {
content: "This is a demo ok?";
}
...
source to share
NOT! For SEO (Search Engine Optimization) you have to make your site as web-spider readable as possible, and filling all your elements with CSS will be terminal!
CSS is strictly for
HTML layout strictly for content
Your site should be as easy to read as the tutorial - imagine a page in the tutorial that says you'll find content that should be there in another tutorial and how annoying it is. This is actually what you are doing.
Keep HTML and CSS separate!
Think of it this way:
If and only if you can't do it in HTML, use CSS
If and only if you can't do it in CSS, use JavaScript
source to share
No, this is not a good idea, and I cannot stress it.
The content attribute is for adding decorative text. HTML is for the main content of your page.
Search engines won't be able to index content, accessibility tools won't be able to interpret content. And it would be terribly bad to work.
What you can't do with HTML, CSS, JavaScript and some server-side language is probably not worth doing.
source to share
No, this is not a good idea.
Are you trying to templatize your site? Basically, you want certain html to appear on every page, but you don't want to copy the paste every time you update that code? I have a feeling that you mean maintainability. In this case, you need to use a server side scripting language like PHP.
This way you can do something like:
**some_page.php**
<?php
require("template.php");
open_template();
echo '<p>Hello world!</p>';
close_template();
?>
**template.php**
<?php
function open_template() {
echo '<html><head><title>Title!</title></head><body>';
}
function close_template() {
echo '</body></html>';
}
?>
Where open_template and close_template are functions defined in template.php that basically render whatever comes before your content and after your content. Obviously this can get a lot more complicated than that, but it will be much better than a maintenance solution than placing content in CSS.
source to share