11 ms·

> Open the inspector, select an element and you will find all the styles that apply. That tells me which styles apply to an element. You also need the converse

by lmm 6mo ago

> Open the inspector, select an element and you will find all the styles that apply. That tells me which styles apply to an element. You also need the converse - find which elements a given style applies to - and there's no way to do that AFAIK. It's very hard to ever delete even completely unused styles, because there is no way to tell (in the general case) whether a given style is used at all. > This way, your styles shouldn't need updates that often unless you change the semantics of your DOM. In my experience the DOM doesn't have semantics, or to the extent that it does, they change all the time.

skydhash 6mo ago
> You also need the converse - find which elements a given style applies to - and there's no way to do that AFAIK. I've never needed to do this, because I pay attention to my DOM structure and from CSS selectors can figure where a style applies. But I've just checked and the search bar for Firefox Inspector supports css selectors. > In my experience the DOM doesn't have semantics, or to the extent that it does, they change all the time. The DOM semantics are those of a hyper linked documents|forms. Take a page and think about what each elements means and their relations to each order. They will form a hierarchy with some generic components replicated. The due to how CSS is applied, you go from generic to specific elements, using the semantic structure to do the targeting As an example, the structure of HN's reply page is page header logo + Title body comment_box upvote_button + comment_metadata comment_text textbox // reply text button // reply This and the structure of the other pages will give you an insight on how to target the relevant elements.
- lmm 6mo ago
  > As an example, the structure of HN's reply page Is made up of table tags, which the CSS people will tell you is wrong/impossible/has different semantics.
  - skydhash 6mo ago
    > Is made up of table tags, which the CSS people will tell you is wrong/impossible/has different semantics A table is a grid. Lot of UI toolkits have a grid container, and even CSS added it specifically as a layout engine.
    - lmm 6mo ago
      > A table is a grid. Lot of UI toolkits have a grid container Sure. As long as the end result is the same grid, it shouldn't matter. But in a CSS world you switch your table for grid-layout divs (or vice versa) and suddenly one corner case thing that is in one grid cell somewhere in your app gets its styling flipped.

by lmm 6mo ago

skydhash 6mo ago

> You also need the converse - find which elements a given style applies to - and there's no way to do that AFAIK. I've never needed to do this, because I pay attention to my DOM structure and from CSS selectors can figure where a style applies. But I've just checked and the search bar for Firefox Inspector supports css selectors. > In my experience the DOM doesn't have semantics, or to the extent that it does, they change all the time. The DOM semantics are those of a hyper linked documents|forms. Take a page and think about what each elements means and their relations to each order. They will form a hierarchy with some generic components replicated. The due to how CSS is applied, you go from generic to specific elements, using the semantic structure to do the targeting As an example, the structure of HN's reply page is page header logo + Title body comment_box upvote_button + comment_metadata comment_text textbox // reply text button // reply This and the structure of the other pages will give you an insight on how to target the relevant elements.

lmm 6mo ago
> As an example, the structure of HN's reply page Is made up of table tags, which the CSS people will tell you is wrong/impossible/has different semantics.
- skydhash 6mo ago
  > Is made up of table tags, which the CSS people will tell you is wrong/impossible/has different semantics A table is a grid. Lot of UI toolkits have a grid container, and even CSS added it specifically as a layout engine.
  - lmm 6mo ago
    > A table is a grid. Lot of UI toolkits have a grid container Sure. As long as the end result is the same grid, it shouldn't matter. But in a CSS world you switch your table for grid-layout divs (or vice versa) and suddenly one corner case thing that is in one grid cell somewhere in your app gets its styling flipped.