I feel like you’ve just pushed CSS to the HTML, which if you’re going to do that you might as well just use CSS in HTML with react or something. Sometimes I wonder if running away from learning and using CSS proper only sets us up for rediscovering it later on.
Inline styles don’t respect media queries, which basically rules out responsive design
Do people still do responsive design? Genuinely curious. There’s not really so many screen resolutions these days, right? It’s basically mobile, tablet, and desktop. And you can probably get by with just mobile and desktop, and set tablet whichever of those best suits for your site. In my most recent React work I just did a single media query and used it to switch between either the mobile components or the desktop components. Works great - one of the unsung benefits of React’s components over older ways of doing things.
It depends on the design of the page. If you have a simple, mostly text site, you can get by with minimal responsive styles. Start adding some visual complexity though, and you need more.
There are many screen resolutions these days; probably more than ever.
I guess I meant - are there really more than 3 categories of screen size? Your mobile site, if it’s built with something modern like flexbox or css grid, is probably going to look fine on most every mobile device. And it’s much easier, IMO, to build a mobile site/web-app and a desktop site/web-app than it is to build one site/web-app that works across both.
You’re not really wrong, but again it depends on the design. With a typical web-app, you can usually get away with two categories of size. If you have a more complicated visual design — if the designer used “digital noise” (no I didn’t invent this term) — then it gets more fiddly. Example I made earlier.
Also, whether you have two separate apps or one that works across both is a decision that usually takes into account more constraints than just media queries.
I don’t see why functional CSS couldn’t be combined with traditional separation of concerns. You could have a .button class for all buttons, but instead of doing this:
… where .button is defined in the strictly presentational and non-semantic stylesheet, to which the stylesheet above serves as a “link”.
Now, both the semantic HTML and the presentational CSS are completely reusable. You just have to specify via another stylesheet how they should be connected.
Edit: for anyone who’s interested, I specified this idea a little more clearly in a short blog post.
I don’t buy the “the point of separating HTML and CSS is to let you specify the data orthogonally to its presentation” argument. If you want to build a layout that’s not just a bunch of boxes in a column you’re gonna have to start reordering elements in the HTML and creating wrapper divs everywhere anyway.
I feel like you’ve just pushed CSS to the HTML, which if you’re going to do that you might as well just use CSS in HTML with react or something. Sometimes I wonder if running away from learning and using CSS proper only sets us up for rediscovering it later on.
The author addresses this point quite plainly in the post so I’m not sure why you would feel that way.
The author addresses inline styles, not any other component based solutions.
Do people still do responsive design? Genuinely curious. There’s not really so many screen resolutions these days, right? It’s basically mobile, tablet, and desktop. And you can probably get by with just mobile and desktop, and set tablet whichever of those best suits for your site. In my most recent React work I just did a single media query and used it to switch between either the mobile components or the desktop components. Works great - one of the unsung benefits of React’s components over older ways of doing things.
Depends on your user base. If android is popular then you have a whole lot of range just in mobile.
It depends on the design of the page. If you have a simple, mostly text site, you can get by with minimal responsive styles. Start adding some visual complexity though, and you need more.
There are many screen resolutions these days; probably more than ever.
I guess I meant - are there really more than 3 categories of screen size? Your mobile site, if it’s built with something modern like flexbox or css grid, is probably going to look fine on most every mobile device. And it’s much easier, IMO, to build a mobile site/web-app and a desktop site/web-app than it is to build one site/web-app that works across both.
You’re not really wrong, but again it depends on the design. With a typical web-app, you can usually get away with two categories of size. If you have a more complicated visual design — if the designer used “digital noise” (no I didn’t invent this term) — then it gets more fiddly. Example I made earlier.
Also, whether you have two separate apps or one that works across both is a decision that usually takes into account more constraints than just media queries.
I am a very inexperienced CSS user, basically just cargo-culting for all my needs. So I have little knowledge of maintaining CSS at scale.
I don’t understand what problem this approach solves though. And how does the frameworks work? Are they pre-processors or what?
Maybe your inexperience has enabled you to point at that the emperor is naked.
Typically, CSS “frameworks” are more like libraries, in that they are a collection of prewritten style rules you can include in your own work.
Many of the hyped libraries/ideas are over-engineered.
I don’t see why functional CSS couldn’t be combined with traditional separation of concerns. You could have a
.buttonclass for all buttons, but instead of doing this:… you could do this:
… where
.buttonis defined in the strictly presentational and non-semantic stylesheet, to which the stylesheet above serves as a “link”.Now, both the semantic HTML and the presentational CSS are completely reusable. You just have to specify via another stylesheet how they should be connected.
Edit: for anyone who’s interested, I specified this idea a little more clearly in a short blog post.
I don’t buy the “the point of separating HTML and CSS is to let you specify the data orthogonally to its presentation” argument. If you want to build a layout that’s not just a bunch of boxes in a column you’re gonna have to start reordering elements in the HTML and creating wrapper divs everywhere anyway.