5 ms·

For me personally, the hardest problem in CSS is the inability to automate testing effectively. If I change this declaration to fix this bug, who knows what's g

by blowski 10y ago

For me personally, the hardest problem in CSS is the inability to automate testing effectively. If I change this declaration to fix this bug, who knows what's going to happen across the rest of the project? It's less likely to break something else if I add a new class to fix this bug. Of course, I know in the long run, that will lead to even more bugs but I don't have an effective workflow around that.

freshyill 10y ago
Easy solution: don't go writing styles that affect more than one thing. Avoid styling elements and descendent classes, and it becomes pretty safe. Once you pick a system and stick to it, it takes care of itself. A visual regression testing tool can help you keep your sanity as well.
- blowski 10y ago
  You sound much more confident with CSS than me. On day one, my designer gives me PSDs and all the buttons are red with 10px padding so I create a button class with those properties. Later I get green buttons with 20px padding and the sad trombone rings loudly.
steveax 10y ago
I've used two techniques: 1) use a prefix (t-) for test selectors and do not attach any styles to them (put them on the elements you need to target directly so the tests do not have to know about the DOM structure) 2) use data- attributes for test selectors (again directly on the target elements so DOM changes won't break the tests) The second I got from this article, which is a bit Ember specific, but makes a lot of good recommendations: https://dockyard.com/blog/2015/09/25/ember-best-practices-acceptance-tests https://dockyard.com/blog/2015/09/25/ember-best-practices-ac...
- blowski 10y ago
  Actually this is a really good idea... But I was referring to to testing the CSS itself - in the same way I text my JavaScript. I'd love to have a suite of tests that say "this element should be 10px from the left of the page" or something like that. I've seen tools that attempt to make this possible but they are hard to work with. Thanks for the suggestion on how to work with test classes anyway. Very useful.
  - steveax 10y ago
    Probably the best way to test things like that is with a visual regression testing tool [1][2]. In practice these are difficult to get right and tend to produce a lot of false positives and negatives. See for instance Huxley [3] [1]: https://github.com/BBC-News/wraith https://github.com/BBC-News/wraith [2]: https://percy.io/ https://percy.io/ [3]: https://github.com/facebookarchive/huxley https://github.com/facebookarchive/huxley

by blowski 10y ago

freshyill 10y ago

Easy solution: don't go writing styles that affect more than one thing. Avoid styling elements and descendent classes, and it becomes pretty safe. Once you pick a system and stick to it, it takes care of itself. A visual regression testing tool can help you keep your sanity as well.

blowski 10y ago
You sound much more confident with CSS than me. On day one, my designer gives me PSDs and all the buttons are red with 10px padding so I create a button class with those properties. Later I get green buttons with 20px padding and the sad trombone rings loudly.

steveax 10y ago

I've used two techniques: 1) use a prefix (t-) for test selectors and do not attach any styles to them (put them on the elements you need to target directly so the tests do not have to know about the DOM structure) 2) use data- attributes for test selectors (again directly on the target elements so DOM changes won't break the tests) The second I got from this article, which is a bit Ember specific, but makes a lot of good recommendations: https://dockyard.com/blog/2015/09/25/ember-best-practices-acceptance-tests https://dockyard.com/blog/2015/09/25/ember-best-practices-ac...

blowski 10y ago
Actually this is a really good idea... But I was referring to to testing the CSS itself - in the same way I text my JavaScript. I'd love to have a suite of tests that say "this element should be 10px from the left of the page" or something like that. I've seen tools that attempt to make this possible but they are hard to work with. Thanks for the suggestion on how to work with test classes anyway. Very useful.
- steveax 10y ago
  Probably the best way to test things like that is with a visual regression testing tool [1][2]. In practice these are difficult to get right and tend to produce a lot of false positives and negatives. See for instance Huxley [3] [1]: https://github.com/BBC-News/wraith https://github.com/BBC-News/wraith [2]: https://percy.io/ https://percy.io/ [3]: https://github.com/facebookarchive/huxley https://github.com/facebookarchive/huxley