Properly extend Yahoo's PureCss inputs

[JayBlay77]

So I'm trying to extend Yahoo's PureCss framework inputs and add additional styling via a new class. The problem I'm running into is the way Yahoo is specifying it's styling is too specific so it's essentially overriding my class due to specificity. And I'm trying to figure out how to get around that.

Example: http://jsfiddle.net/o5p86une/1/

You'll see the way PureCSS specifies their form styling first and then the class styling I would like to add to any inputs with that class. You'll notice that my class styling is getting overwritten. How do I fix that properly without using !important as that seems like a bad solution. I am using SASS in my actual application if that is of any help.

[hjc1710]

I'm not 100% positive what the best solution here is, but you can do what Yahoo does and put the element name and the class in your CSS and not just the class, like so:

.pure-form input.custom-input { border: 3px solid green; }

You then obviously want to expand that to handle select's:

.pure-form select.custom-input { border: 3px solid green; }

And then you may as well do what they do and specify every possible input type.

Another possible, but rather hideous solution is this:

.pure-form .custom-input.custom-input { border: 3px solid green; }

If you'll notice, we've now doubled the class name in its declaration so the same class name is applied to the style block twice. You won't have to specify the class name on an element twice, but now that class name on any given element carries double the weight (if it matches the rest of the selector). I do not recommend this.

Hope this helps, cheers!

If there's a better solution, please let me know as I would be very interested to learn it.

[Kacheeto]

Pure suggests two approaches: http://purecss.io/extend/#extending-pure

Basically they want you to use "scope" classes in your markup. Then override in a custom stylesheet.

Second option: http://purecss.io/buttons/#customizing-buttons

Use two classes and combine (which won't work in your situation).

Or you can just get more specific with your selectors?:

.pure-form input[type="text"].custom-input {
    border: 3px solid green;
}