This diagram is a OpenMind mock-up.
Separation of concerns claims that each file of code should concern itself only with its designated part of an application. The files (or modules) should not mix and intertwine their code in a way that one file does a job of others.
In case of web pages, the HTML files can hold CSS code (in <style> tags) and JavaScript code (in <script> tags) and still perform the same functionality. However, putting all code in HTML files violates the separation of concerns principle. Instead, the web concerns should be properly split amongst the three file types: a HTML file should hold the web content, a CSS file should contain the styling and design decisions and a JavaScript file should contain the interactivity and animation.
The CSS class names should not contain the actual style information, since they are called and used in HTML files. This way the style specifics wouldsip into HTML files and not be contained in CSS. A common examples of such mistakes that I often see are .width-80, .square-icon-40, .absolute-pos, .blue-section. The class names should instead describe the general usage of the class. Instead, the classes should be names as .half-page, .main-widget, .blog-section.