How to separate Text and HTML with CSS
Question
In order to improve the maintainability of a website, is it a good idea to separate all the text from the HTML and put it all 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 the text
.home-title:after {
content: "Welcome to my website!";
}
.description:after {
content: "This is a demo ok?";
}
...
4 answers
solution1
5 2012-04-05 09:56:42
No.
Style sheets are supposed to be used for the layout. The content should be in the HTML code.
Also, as jacktheripper pointed out, it would be a disaster for SEO purposes, as search engines will think that your page just contains a lot of empty elements.
solution2
3 ACCPTED 2012-04-05 09:56:35
NO! For SEO (search engine optimisation) you should make your site as easy to read by a web-spider as possible, and filling all of your elements using CSS would be terminal!
CSS is strictly for layout
HTML is strictly for content
Your site should be as easy to read as a textbook - imagine a page in a textbook saying go find the content that should be here in a different textbook, and how annoying that would be. That is in effect what you are doing.
Keep HTML and CSS separate!
Think of it like this:
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
solution3
1 2012-04-05 10:01:10
No, it's not a good idea, and I can't stress that enough.
The content attribute is for adding decorative text. HTML is for the core content of your page.
Search engines won't be able to index the content, accessibility tools won't be able to interpret the content. And it would be horribly buggy to work with.
What you can't do with HTML, CSS, JavaScript and some kind of server-side language probably isn't worth doing.
solution4
0 2012-04-05 09:58:33
No, this is not a good idea.
Are you trying to templatize your website? Basically, you want certain html to show up on every page, but you don't want to copy paste every time you update that code? I have the feeling that's what you mean about maintainability. In that case you need to use a server side scripting language such as PHP.
This way you could 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 which basically display anything that comes before your content and after your content. Obviously it can get a lot more complicated than this but this will be a much better maintainability solution than putting content in CSS.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.