5 ms·

I tried this kind of selectors for styling and I don't like it. I can explain why with a question : What if you want a button that looks like a like and a link

I tried this kind of selectors for styling and I don't like it. I can explain why with a question : What if you want a button that looks like a like and a link that looks like a button. In your case you will have to overwrite "button" selector, which is with very high specificiy and to override the main selector styles. button.link { color: white; border: 0; background: none... } and then copy the relevant for only a link styles to your link selector ( a ). This works good for small code base, but once you go to several pages and need specific links it starts to make a lot of problems. I stopped using this way of styling buttons not so long ago and I switched it to : <button class='button'></button> <button class='button button-primary'></button> <button class='button button-danger'></button> And also for links <a class='link'>Link</a> <a class='link link-primary'></a> And then I can easily switch <button class='link link-primary'></button> <a class='button button-danger'></a> without touching my code. Same applies for input[type='...'] rules. I just add class name.

franciscop 12y ago
While it's true that sometimes you want a link to act as a button ( <a class = "button">Looks like button</a> ), I cannot think of the case when you want a button to look like a link. May I ask, in what situation did you encounter this? I still think this is way too specific (I have never had to do something like that). Picnic lets buttons be buttons, and links be links OR buttons, just buttons cannot be links. I think in this way you can achieve less bloated classes and better readability. I value that higher than allowing buttons to be links. That's just my preference. Thank you for the insight though, it's a clear and good explanation of Picnic limits.
- deleted 12y ago
  [deleted]
- jackmoore 12y ago
  I second drinchev's comment. You have no way of knowing what all potential contexts people are going to want to use buttons for. Applying styling to the bare element means frequently resetting those styles. It's always better to extend than to reset. I use button elements for any control that is handled via JavaScript. Only a minority of buttons I use are actually for form submission.

franciscop 12y ago

While it's true that sometimes you want a link to act as a button ( <a class = "button">Looks like button</a> ), I cannot think of the case when you want a button to look like a link. May I ask, in what situation did you encounter this? I still think this is way too specific (I have never had to do something like that). Picnic lets buttons be buttons, and links be links OR buttons, just buttons cannot be links. I think in this way you can achieve less bloated classes and better readability. I value that higher than allowing buttons to be links. That's just my preference. Thank you for the insight though, it's a clear and good explanation of Picnic limits.

deleted 12y ago
[deleted]
jackmoore 12y ago
I second drinchev's comment. You have no way of knowing what all potential contexts people are going to want to use buttons for. Applying styling to the bare element means frequently resetting those styles. It's always better to extend than to reset. I use button elements for any control that is handled via JavaScript. Only a minority of buttons I use are actually for form submission.