How to separate Text and HTML with CSS

Tags: html,css,text,pseudo-element

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

    <h1 class="home-title"></h1>
    <p class="description"></p>

    <!-- and much more elements... -->

CSS file with all the text

.home-title:after {
    content: "Welcome to my website!";

.description:after {
    content: "This is a demo ok?";


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

    CSS Howto..

    How do I design my CSS with ASP.NET MVC?

    Use ::after selector to show line number but also display a element next to it when hovering over the containing table td cell

    how to horizontally center a div of 10000px (wider than full screen) in CSS?

    How to rotate a chart 90 degrees including the text values?

    Qt: Hower effect overlapped with selected tab

    How to Assemble HTML,CSS and JS with EachOther

    How to 'clip away' part of a div using CSS?

    Rails 4 - how to write a helper method

    How to center menu css

    How to make a website to occupy the entire element?

    How to hide a