Geekpulp

concerns dude

This is our concern, Dude

In web development, there’s a concept called “the separation of concerns” between your HTML, CSS and JavaScript. Each language plays a role in web development and it pays to remind ourselves what these roles are:

  1. HTML = Structure
  2. CSS = Appearane
  3. JavaScript = Behaviour

There are some overlaps between them, but this should be minimised wherever possible.

There is some overlap between HTML, CSS and JavaScript but this should be minimised wherever possible.

For example, while JavaScript can affect individual CSS styles but it’s good practice to define classes in your CSS files instead. Then you can use JavaScript to call those classes like this:

<!DOCTYPE html>
<html>
<head></head>

<body>
<div id="concerns">
  <ul>
    <li>JUST BECAUSE WE'RE BEREAVED DOESN'T MEAN WE'RE SAPS!</li>
    <li>Sir, please lower your voice</li>
    <li>Hey man, don't you have something else you could put it in?</li>
    <li>That is our most modestly priced receptacle.</li>
    <li>GODDAMNIT! IS THERE A RALPH'S AROUND HERE?!</li>
  </ul>
</div>
</body>

</html>
.concerns li {
  font-weight: bold;
  font-size: 100px;
}
var myConcerns = document.querySelector( "#concerns" );
myConcerns.classList.toggle( "concerns" );

This way the CSS is still where the appearance of the page is manipulated and the JavaScript is still handling the behaviour component. Following this sort of structure makes it easier for your fellow developers (and you) to know where to do what in your code.

Posted

in

by

Glen Young

Tags: