How to separate Text and HTML with CSS

css, html, pseudo-element, text

Solution

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

Problem

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?"; } ... ```

Original source