adamjgrant/about.md

## about.md

      
    Raw
  

              about.md
            
          
    Scoped components

CSS class names quickly get out of hand. Repos end up with unorganized CSS files all over the place making it difficult to name things and find them in the code.
The scoped components pattern addresses this by grouping classes into "component" scopes.
<div data-component="news-menu">
  <h1 class="title">...</h1>
  <ul class="items">
    <li class="item">...</li>
    ...
  </ul>
  <aside id="breaking"></aside>
</div>

Now, when you want to write some code around the "News" box on your page, you can write everything in the context of the news component.
Instead of
$('#news-menu_breaking').click(function() {
  $('.news-menu_get').html("Loading breaking news...");
});
  
$('.news-menu_item').click(function() {
  $('#news-menu_loading-spinner').show();
  location.href = $(this).data('url');
});

Define a scope
$.component('news-menu', function($scope) {
  $scope('#breaking').click(function() {
    $scope('.get').html("Loading breaking news...");
  });
  
  $scope('.item').click(function() {
    $scope('#loading-spinner').show();
    location.href = $scope(this).data('url');
  });
});

See an example using jQuery or use the plugin
This also lets us keep css class names ultra simple. Instead of .news_menu-breaking or .news_menu-title, just use .breaking or .title keeping your code very readable without fear of it running into other classes.
[data-component="news-menu"] .title {
  font-size: 18px;
  font-family: helvetica, sans-serif;
}

Also see Amadeus

  
## index.html
<!DOCTYPE HTML>

<!-- Use data-component to denote elements as scoped components -->

<html>
  <head>
    <link rel="stylesheet" href="news-menu.css">
  </head>
  <body>
    <div data-component="news-menu">
      <h1 class="title">News</h1>
      <ul class="items">
        <li class="item">War Breaks out in Middle East.</li>
        <li class="item">New Bill Passed into Law.</li>
      </ul>
      <aside id="breaking"></aside>
    </div>
    <script src="news-menu.js"></script>
  </body>
</html>

## news-menu.css
/*  Simply scope classes under the component
    to keep class names simple and separate. */

[data-component="news-menu"] {
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #CCC;
}
[data-component="news-menu"] .title {
  font-size: 18px;
  font-family: helvetica, sans-serif;
}
[data-component="news-menu"] .items {
  list-style: none;
  padding-left: 0;
}
[data-component="news-menu"] .items .item {
  line-height: 20px;
}

## news-menu.js
// Functions can be created to scope event listeners
// to components allowing us to use simple names for
// component ids and organize JS code into component-
// specific files.

component('news-menu', function(scope) {
  scope.click('#breaking', function() {
    scope(this).innerHTML = "Loading breaking news...";
  });

  scope.click('.item', function(scope) {
    $('#loading-spinner').show();
    location.href = scope.dataset.url;
  });
});

## news-menu.scss
/*  Simply scope classes under the component
    to keep class names simple and separate. */

@include component('news-menu') {
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #CCC;

  .title {
    font-size: 18px;
    font-family: helvetica, sans-serif;
  }

  .items {
    list-style: none;
    padding-left: 0;

    .item {
      line-height: 20px;
    }
  }
}

## news-menu.slim
// HTML Preprocessor mixins can make this easy for us.

// See: https://gist.github.com/emilebosch/9e5c25833b8f92dfd4db

component "news-menu" do
  .title News
  ul.items
    li.item War Breaks out in the Middle East.
    li.item New Bill Passed into Law
  #breaking

## organized-code.md

      
    Raw
  

              organized-code.md
            
          
    Keep your code tidy

An actual example of using this pattern from YesNo
	<!DOCTYPE HTML>

	<!-- Use data-component to denote elements as scoped components -->

	<html>
	<head>
	<link rel="stylesheet" href="news-menu.css">
	</head>
	<body>
	<div data-component="news-menu">
	<h1 class="title">News</h1>
	<ul class="items">
	<li class="item">War Breaks out in Middle East.</li>
	<li class="item">New Bill Passed into Law.</li>
	</ul>
	<aside id="breaking"></aside>
	</div>
	<script src="news-menu.js"></script>
	</body>
	</html>