csscss/index.html at gh-pages · cs673p1/csscss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>csscss by zmoazeni</title>

    <link rel="stylesheet" href="stylesheets/styles.css">
    <link rel="stylesheet" href="stylesheets/pygment_trac.css">
    <script src="javascripts/scale.fix.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1 class="header">csscss</h1>
        <p class="header">A CSS redundancy analyzer that analyzes redundancy.</p>

        <ul>
          <li class="download"><a class="buttons" href="https://github.com/zmoazeni/csscss/zipball/master">Download ZIP</a></li>
          <li class="download"><a class="buttons" href="https://github.com/zmoazeni/csscss/tarball/master">Download TAR</a></li>
          <li><a class="buttons github" href="https://github.com/zmoazeni/csscss">View On GitHub</a></li>
        </ul>

        <p class="header">This project is maintained by <a class="header name" href="https://github.com/zmoazeni">zmoazeni</a></p>


      </header>
      <section>
        <h2>What is it?</h2>

<p>csscss will parse any CSS files you give it and let you know which
rulesets have duplicated declarations.</p>

<h2>What is it for?</h2>

<p>One of the best strategies for me to maintain CSS is to reduce
duplication as much as possible. It's not a silver bullet, but it sure
helps.</p>

<p>To do that, you need to have all the rulesets in your head at all times.
That's hard, csscss is easy. Let it tell you what is redundant.</p>

<h2>How do I use it?</h2>

<p>First you need to install it. It is currently packaged as a ruby gem:</p>

<pre><code>$ gem install csscss
</code></pre>

<p>Then you can run it in at the command line against CSS files.</p>

<pre><code>$ csscss path/to/styles.css path/to/other-styles.css

{.contact .content .primary} and {article, #comments} share 5 rules
{.profile-picture}, {.screenshot img} and {a.blurb img} share 4 rules
{.work h2:first-child, .archive h2:first-child, .missing h2:first-child, .about h2, .contact h2} and {body.home h2} share 4 rules
{article.blurb:hover} and {article:hover} share 3 rules
</code></pre>

<p>Run it in a verbose mode to see all the duplicated styles.</p>

<pre><code>$ csscss -v path/to/styles.css
</code></pre>

<p>Run it against remote files by passing a valid URL.</p>

<pre><code>$ csscss -v http://example.com/css/main.css
</code></pre>

<p>You can also choose a minimum number of matches, which will ignore any
rulesets that have fewer matches.</p>

<pre><code>$ csscss -n 10 -v path/to/style.css # ignores rulesets with &lt; 10 matches
</code></pre>

<p>If you prefer writing in sass, you can also parse your sass/scss files.</p>

<pre><code>$ gem install sass
$ csscss path/to/style.scss
</code></pre>

<h2>I found bugs</h2>

<p>This is still a new and evolving project. I heartily welcome feedback.
If you find any issues, please report them on
<a href="https://github.com/zmoazeni/csscss/issues">github</a>.</p>

<p>Please include the smallest CSS snippet to describe the issue and the
output you expect to see.</p>

<h2>Who are you?</h2>

<p>My name is <a href="https://twitter.com/zmoazeni">Zach Moazeni</a>. I work for <a href="http://www.getharvest.com/">an
awesome company</a>. And <a href="http://www.getharvest.com/careers">we're
hiring!</a></p>

<h2>I'm a dev, I can help</h2>

<p>Awesome! Thanks! Here are the steps I ask:</p>

<ol>
<li>Fork it</li>
<li>Create your feature branch (<code>git checkout -b my-new-feature</code>)</li>
<li>Commit your changes (<code>git commit -am 'Add some feature'</code>)</li>
<li>Make sure the tests pass (<code>bundle exec rake test</code>)</li>
<li>Push to the branch (<code>git push origin my-new-feature</code>)</li>
<li>Create new Pull Request</li>
</ol>
      </section>
      <footer>
        <p><small>Hosted on <a href="https://pages.github.com">GitHub Pages</a> using the Dinky theme</small></p>
      </footer>
    </div>
    <!--[if !IE]><script>fixScale(document);</script><![endif]-->

  </body>
</html>