4 ms·

I started writing CSS the same week it was first available in Internet Explorer 3, so "doing it the way you've always done it" isn't really a good excuse. Bein

I started writing CSS the same week it was first available in Internet Explorer 3, so "doing it the way you've always done it" isn't really a good excuse. Being able to click on a value for most things (left, top, width, height, etc) and use the up and down arrow to dynamically move an element around the page, or otherwise tweak anything about it - that's game-changing. If you aren't using the dev tools to tweak your CSS and instead are updating a file and hitting reload, you are way behind in productivity. I'm not even being hyperbolic about this. You want to know how to do it in 2020? Right-click any element, hopefully it has either a class property or a inline CSS style property, dev tools should open and next to the DOM tree view there should be a CSS panel as well as other panels. Just click around in there, you can edit anything to change the layout instantly, add styles, tweak values. Once you're done tweaking values you can copy and paste the CSS just by selecting it in the dev tools, hit CTRL-C, then paste it into your editor, and then hit reload.

derefr 6y ago
I mean, what you're describing doesn't work for me, because the way I write CSS involves heavy reuse of classes and using CSS-Zen-Garden-esque element selectors. I try to "move around an element" in the panel? The whole layout breaks. The approach that makes the CSS inspector functional as a tool for modifying layout, is a completely different paradigm from the one I'm used to. To be clear, I'm a backend engineer; in recent times I only write CSS about once per year, mostly just to update my portfolio site, or to do some interesting little hack. I've never worked with SCSS/SASS, React, web components, etc. But in the past, I have worked full-stack, writing both a backend and the frontend that it works with. And, in those cases, the CSS I've written works, and is responsive and accessible, while also being readable and reusable, in the same sense that a well-factored library of functions is readable and reusable.
- fiddlerwoaroof 6y ago
  So, my CSS is similar, when I use dev tools to tweak CSS, I generally adjust the “element” section rather than my classes, to make the element I’ve selected look right. Once I’ve gotten that down, I think about the best way to integrate the new styles into the existing ones.
- leptons 6y ago
  >I try to "move around an element" in the panel? The whole layout breaks. Just more evidence you are doing it really wrong. But, whatever makes you happy, I guess.
  - dang 6y ago
    Please don't post like this. We're trying for something a bit better here (which is in the interest of everyone participating here). https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
    - leptons 6y ago
      Sorry but when someone describes what they are doing is wrong, maybe they need to hear that. I don't really care about being nice at all costs, because the truth sometimes hurts. If they change one little thing and the entire layout breaks, that says quite a lot about the situation, and that together with their insistence to do everything like they did 20 years ago just adds up to someone needing to hear the truth. They are doing things very wrong. And this also isn't the place to delve deeply into the root of their problems, as they obviously are not really interested in learning or changing - so if you're offended by the truth, well that's not really my problem.
      - dang 6y ago
        Your comment didn't contain any information. It was just mean. When you do that, you make HN a nastier place. These effects are always greater than the person adding the poison imagines they are—and worse, they compound over time. That path leads to the destruction of the forum as the most desirable users gradually get disillusioned and leave, and the proportion of nastiness grows among those who remain. The idea of HN has always been to try to stave that outcome off for as long as we can: https://hn.algolia.com/?dateRange=all&page=0&prefix=false&sort=byDate&type=comment&query=stave%20by:dang https://hn.algolia.com/?dateRange=all&page=0&prefix=false&so.... https://news.ycombinator.com/newswelcome.html https://news.ycombinator.com/newswelcome.html "Someone needs to hear the truth" is not an argument that carries much water because (1) it's what every internet asshole says, and (2) if you present the truth in a nasty way, you actually discredit the truth by giving neutral readers a reason to reject it (https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sort=byDate&type=comment&query=truth%20discredit%20by:dang https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sor...). In the future, if you have some truth to share, doing so respectfully will help protect the forum and will get the information across to more people.
heavenlyblue 6y ago
I could still do all of that by implementing some JavaScript to immediately preview the CSS I am writing. I don’t really think there is a paradigm shift except for general learning curve that is in effect here.

derefr 6y ago

I mean, what you're describing doesn't work for me, because the way I write CSS involves heavy reuse of classes and using CSS-Zen-Garden-esque element selectors. I try to "move around an element" in the panel? The whole layout breaks. The approach that makes the CSS inspector functional as a tool for modifying layout, is a completely different paradigm from the one I'm used to. To be clear, I'm a backend engineer; in recent times I only write CSS about once per year, mostly just to update my portfolio site, or to do some interesting little hack. I've never worked with SCSS/SASS, React, web components, etc. But in the past, I have worked full-stack, writing both a backend and the frontend that it works with. And, in those cases, the CSS I've written works, and is responsive and accessible, while also being readable and reusable, in the same sense that a well-factored library of functions is readable and reusable.

fiddlerwoaroof 6y ago
So, my CSS is similar, when I use dev tools to tweak CSS, I generally adjust the “element” section rather than my classes, to make the element I’ve selected look right. Once I’ve gotten that down, I think about the best way to integrate the new styles into the existing ones.
leptons 6y ago
>I try to "move around an element" in the panel? The whole layout breaks. Just more evidence you are doing it really wrong. But, whatever makes you happy, I guess.
- dang 6y ago
  Please don't post like this. We're trying for something a bit better here (which is in the interest of everyone participating here). https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
  - leptons 6y ago
    Sorry but when someone describes what they are doing is wrong, maybe they need to hear that. I don't really care about being nice at all costs, because the truth sometimes hurts. If they change one little thing and the entire layout breaks, that says quite a lot about the situation, and that together with their insistence to do everything like they did 20 years ago just adds up to someone needing to hear the truth. They are doing things very wrong. And this also isn't the place to delve deeply into the root of their problems, as they obviously are not really interested in learning or changing - so if you're offended by the truth, well that's not really my problem.
    - dang 6y ago
      Your comment didn't contain any information. It was just mean. When you do that, you make HN a nastier place. These effects are always greater than the person adding the poison imagines they are—and worse, they compound over time. That path leads to the destruction of the forum as the most desirable users gradually get disillusioned and leave, and the proportion of nastiness grows among those who remain. The idea of HN has always been to try to stave that outcome off for as long as we can: https://hn.algolia.com/?dateRange=all&page=0&prefix=false&sort=byDate&type=comment&query=stave%20by:dang https://hn.algolia.com/?dateRange=all&page=0&prefix=false&so.... https://news.ycombinator.com/newswelcome.html https://news.ycombinator.com/newswelcome.html "Someone needs to hear the truth" is not an argument that carries much water because (1) it's what every internet asshole says, and (2) if you present the truth in a nasty way, you actually discredit the truth by giving neutral readers a reason to reject it (https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sort=byDate&type=comment&query=truth%20discredit%20by:dang https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sor...). In the future, if you have some truth to share, doing so respectfully will help protect the forum and will get the information across to more people.

heavenlyblue 6y ago

I could still do all of that by implementing some JavaScript to immediately preview the CSS I am writing. I don’t really think there is a paradigm shift except for general learning curve that is in effect here.