5 ms·

Your approach wouldn’t work with media queries. In a system like tailwind you can do class=“m-0 md:m-4”

cxr 5y ago
If you're going to use something like Tailwind, please still add legible class names (e.g. "thumbnail") and don't just write things like class="m-0 md:m-4".
- yakshaving_jgt 5y ago
  But then again, if you're going to use meaningful class names, i.e., names that suggest what the thing is rather than what it looks like, then you're not really doing the Tailwind thing.
  - cxr 5y ago
    > rather than You don't have to sacrifice semantics in order to opt in to Tailwind's cutesy approach at expressivity. class="thumbnail m-0 md:m-4" works wherever class="m-0 md:m-4" does and isn't user-hostile.
- jdefelice 5y ago
  One could argue that `class="m-0 md:m-4"` is more legible because it describes exactly what is happening. No margin on small screen, margin of 4 units on medium breakpoints. Where the styling on thumbnail is unknown and the breakpoints are unknown, unless you look at the css, then if you need to override that css you have to worry about specificity.
  - cxr 5y ago
    You're talking about CSS. I'm talking about classes. > `class="m-0 md:m-4"` is more legible because it describes exactly what is happening If by "what is happening" you mean "how it's styled", but that's extremely presumptuous. You might as well argue that there's no difference between Flash and an equivalently styled web page since if you took a screenshot of each they'd be visually identical—as if the whole thing begins and ends with getting the "rectangle full of little lights" to change in a particular way <https://xkcd.com/722/ https://xkcd.com/722/>. It's very narrowminded. I'm not saying you have to be full on schema.org-conformant, but include something that actually makes sense instead of being as useless as the spew that CSS compilers put out.
- thisjeremiah 5y ago
  I think the recommended pattern is something like: If you’re using a component based framework (e.g., Vue), you create a named component. If you’re not using a component-based framework, you create named classes with applied atomic styles. With either approach, your styles are contextualized with a name and can be reused. https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components

cxr 5y ago

If you're going to use something like Tailwind, please still add legible class names (e.g. "thumbnail") and don't just write things like class="m-0 md:m-4".

yakshaving_jgt 5y ago
But then again, if you're going to use meaningful class names, i.e., names that suggest what the thing is rather than what it looks like, then you're not really doing the Tailwind thing.
- cxr 5y ago
  > rather than You don't have to sacrifice semantics in order to opt in to Tailwind's cutesy approach at expressivity. class="thumbnail m-0 md:m-4" works wherever class="m-0 md:m-4" does and isn't user-hostile.
jdefelice 5y ago
One could argue that `class="m-0 md:m-4"` is more legible because it describes exactly what is happening. No margin on small screen, margin of 4 units on medium breakpoints. Where the styling on thumbnail is unknown and the breakpoints are unknown, unless you look at the css, then if you need to override that css you have to worry about specificity.
- cxr 5y ago
  You're talking about CSS. I'm talking about classes. > `class="m-0 md:m-4"` is more legible because it describes exactly what is happening If by "what is happening" you mean "how it's styled", but that's extremely presumptuous. You might as well argue that there's no difference between Flash and an equivalently styled web page since if you took a screenshot of each they'd be visually identical—as if the whole thing begins and ends with getting the "rectangle full of little lights" to change in a particular way <https://xkcd.com/722/ https://xkcd.com/722/>. It's very narrowminded. I'm not saying you have to be full on schema.org-conformant, but include something that actually makes sense instead of being as useless as the spew that CSS compilers put out.
thisjeremiah 5y ago
I think the recommended pattern is something like: If you’re using a component based framework (e.g., Vue), you create a named component. If you’re not using a component-based framework, you create named classes with applied atomic styles. With either approach, your styles are contextualized with a name and can be reused. https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components