Add “CSS Specificity Graph” report for all methodologies examples

[ihorzenich]

Via https://jonassebastianohlsson.com/specificity-graph/

[iamstarkov]

why?

[AleshaOleg]

@iamstarkov what you mean?

[iamstarkov]

why does @ihorzenich want to add “CSS Specificity Graph” report for all methodologies examples?

[ihorzenich]

@iamstarkov cause it's simple and popular tool to keep control the quality of the generated CSS code. See: https://csswizardry.com/2014/10/the-specificity-graph/

Also, if we already had so much senseless (in my opinion) stats about css-rules count and so on, we should add something really helpful like specificity-graph.

[iamstarkov]

one approach to build bulletproof UI components is actually to increase specificity with bunch of IDs. so its kinda debatable, is it a good metric or not

[AleshaOleg]

Done. You can find example, for each implementation by path: http://aleshaoleg.me/holy-grail-markup/<implementation_name>/specificity-graph/. For example, raw specificity-graph example, placed here: http://aleshaoleg.me/holy-grail-markup/raw/specificity-graph/

This graphs will be updated by each commit automatically, with using pre-commit npm package.

[SenDen1]

@AleshaOleg I'm currently working on issue #8. Can you please describe the workflow of set up handling the specificity-graph directory. As I got after creating the methodology implementation I should add a few lines into index.js file. Such as:

comb.processPath('./<path to folder that contains index.html file>');

and

fs.readFile('./<path to the .css file>', 'utf8', function(err, data) {
  specificityGraph('./<implementation_name>/specificity-graph', data, function(directory) {
    console.log('specificity-graph files created in ' + directory);
  });
});

In case of multiple .css files I have to concat them. E.g. smacss methodology was concated:

concat([
  './<path to a .css file>',
  './<path to a .css file>',
  './<path to a .css file>',
  './<path to a .css file>',
  './<path to a .css file>'
], './<implementation_name>/build.css', function(err) {
  fs.readFile('./<implementation_name>/build.css', 'utf8', function(err, data){
    specificityGraph('./<implementation_name>/specificity-graph', data, function(directory){
      console.log('specificity-graph files created in ' + directory);
    });
  });
});

Also looks like I have to add another line in Gruntfile.js into src array :

          '<implementation_name>/<path to the .css file>'

What else should I do to build and complete the specificity-graph setting up correctly?