6 ms·

For css this is the best explanation that I can find: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-cl

For css this is the best explanation that I can find: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-... For react maybe this one: https://medium.com/madhash/rethinking-separation-of-concerns-with-react-7e5de1b5c0f7 https://medium.com/madhash/rethinking-separation-of-concerns... People are confusing separation of concerns with separation of languages. They are also acting as if we are all writing websites like zen garden where the html is fixed and we are changing the stylesheet every week. In reality react & most frontend technologies are used by webapp were UI consistency is achieved with a small css stylesheet and a base set of components (buttons, forms, etc). The css gives the design rules and the html implements them. The component are implemented in some files and the business rules in other files. Instead of making fun of this approach I invite you to try it out.

mattacular 6y ago
I've never worked on a production website or web app that managed to achieve the "small css stylesheet and a base set of components." Especially not in the responsive design era. Can it be done in theory? Sure. But in my experience working as a web developer it's one of those goals that always seems attainable at the beginning of a project but for various reasons never comes to fruition by the time it's launched and certainly not by the time it's being retired after months or even years of extending, iteration, changing development teams and maintenance.
- ratww 6y ago
  I've worked in a few. The trick is starting with a development team with a good grasp of CSS and a designer with a clear direction, instead of jumping straight into Bootstrap or something similar. You can replace the designer with a developer with design experience. It's far from impossible. One of the coolest I did was when I was lead dev in a university and our CSS for the teacher/student dashboard was less than 20k. I used ASP.NET WebForms components, and we didn't have too much variety in terms of components. It looked pretty good for the time (2012) and it was also responsive and teachers/students added it to their iPhone/Android screen. Another one was a web version of a Windows Desktop App. Also didn't use Bootstrap, but got it done pretty quickly. Bootstrap wouldn't work for us since we had to keep the look and feel of a native app. I've also transitioned one app that had more than 1MB of minified css to less than 100kb, which is not exactly small but it's still one order of magnitude less. The trick was vendoring the three third-party frameworks we were using and removing everything we weren't using, and also using PurifyCSS to detect unused nodes and deleting them. Then we refactored to put the CSS back into Vue.js components and voila. A lot of people in HN will say it's a huge waste of time but our market was a 3rd world country, so it made a lot of financial sense for us to make me waste a week on that. One of the most fun and rewarding experiences I ever had. I wish most developers weren't so bullish about not wanting to spend time optimizing this stuff.
  - nbzso 6y ago
    "You can replace the designer with a developer with design experience. It's very far from impossible." And go ask why websites are looking the same. Disclaimer: I am designer (real one). I have become frontend dev with time and moved in this direction naturally driven by challenges in implementation. At first challenge was to move away from table based layouts (xhtlm/separation of content and presentation), next was AJAX,jQuery and now is React, Vue, Angular. In all of this mess I judge the final results. The Product is made to serve the user. In some point in time the incentive moved to "technology serves developers and business" first. This is the real problem for me. I have found in my practice when hiring designers the problem is lack of proper design foundation, using frameworks and tricks is not design process, its design implementation. I have suggestion: Obviously developers hate designers (I doubt that they have worked with real one - and reaction towards "designers" is right), do me a favor and eliminate design by building AI solution already. You have ton of historically proven quantitive data what the principles of visually good design are. Just throw it in GAN, use style transfer and do it. You can split test UX and UI and decorate the results with GAN data. Problem solved. In design space education is broken, business owners and managers don't value design highly so everyone will be happy. Designers will find what to do with their talents, don"t worry:)
    - deleted 6y ago
      [deleted]
- sbergot 6y ago
  Functional libraries such as tailwindcss are popular because they are a good way to achieve this goal.
  - mattacular 6y ago
    Maybe if you're not working with a designer/team.
    - wildrhythms 6y ago
      I promise you can achieve what the designer envisions with Tailwind, and I would challenge you to describe a design case outside of Tailwind's abilities. I was skeptical too for a long time.
wildrhythms 6y ago
I used to follow the "separation of concerns" ideology, but there's a single sentence in the Tailwind CSS guide[1] that changed my entire perspective on this: "No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container." I work in front-end primarily, and so much of my time is spent building a tightly coupled dependency between a HTML template and a stylesheet, coming up with names like ".container" and ".wrapper" and ".content", and when the layout changes, I have to change the stylesheet too. Do these things really need to be separated? Outside of uniquely implemented animations, I'm now of the opinion that... no, they really don't, and I've started adopting Tailwind into my projects to great success, less maintenance toil, and faster iterations. [1] https://tailwindcss.com/docs/utility-first https://tailwindcss.com/docs/utility-first
- cptskippy 6y ago
  I feel like the ability to separate concerns has been sabotaged in the pursuit of performance. It's often recommend to reduce the complexity of CSS Selectors to speed things up. Common performance analysis sites will ding your site for using all but the simplest selectors. When you couple that with tools that can never understand page layout or relationship, you get horrible CSS where every element has a corresponding unique CSS class or any number of utility classes.
cptskippy 6y ago
> For css this is the best explanation that I can find My take away from reading that article is that the author completely misses the fundamental concepts of CSS and only ever tried to use tools to generate it. I realize that in the pursuit of high performance websites, it's been recommended to avoid complex CSS selectors but, beyond that, the author chooses to style each element individually. I kept reading hoping for him to have an "Ah-ha!" moment but instead he just finds different ways to bang his head on the table.

mattacular 6y ago

I've never worked on a production website or web app that managed to achieve the "small css stylesheet and a base set of components." Especially not in the responsive design era. Can it be done in theory? Sure. But in my experience working as a web developer it's one of those goals that always seems attainable at the beginning of a project but for various reasons never comes to fruition by the time it's launched and certainly not by the time it's being retired after months or even years of extending, iteration, changing development teams and maintenance.

ratww 6y ago
I've worked in a few. The trick is starting with a development team with a good grasp of CSS and a designer with a clear direction, instead of jumping straight into Bootstrap or something similar. You can replace the designer with a developer with design experience. It's far from impossible. One of the coolest I did was when I was lead dev in a university and our CSS for the teacher/student dashboard was less than 20k. I used ASP.NET WebForms components, and we didn't have too much variety in terms of components. It looked pretty good for the time (2012) and it was also responsive and teachers/students added it to their iPhone/Android screen. Another one was a web version of a Windows Desktop App. Also didn't use Bootstrap, but got it done pretty quickly. Bootstrap wouldn't work for us since we had to keep the look and feel of a native app. I've also transitioned one app that had more than 1MB of minified css to less than 100kb, which is not exactly small but it's still one order of magnitude less. The trick was vendoring the three third-party frameworks we were using and removing everything we weren't using, and also using PurifyCSS to detect unused nodes and deleting them. Then we refactored to put the CSS back into Vue.js components and voila. A lot of people in HN will say it's a huge waste of time but our market was a 3rd world country, so it made a lot of financial sense for us to make me waste a week on that. One of the most fun and rewarding experiences I ever had. I wish most developers weren't so bullish about not wanting to spend time optimizing this stuff.
- nbzso 6y ago
  "You can replace the designer with a developer with design experience. It's very far from impossible." And go ask why websites are looking the same. Disclaimer: I am designer (real one). I have become frontend dev with time and moved in this direction naturally driven by challenges in implementation. At first challenge was to move away from table based layouts (xhtlm/separation of content and presentation), next was AJAX,jQuery and now is React, Vue, Angular. In all of this mess I judge the final results. The Product is made to serve the user. In some point in time the incentive moved to "technology serves developers and business" first. This is the real problem for me. I have found in my practice when hiring designers the problem is lack of proper design foundation, using frameworks and tricks is not design process, its design implementation. I have suggestion: Obviously developers hate designers (I doubt that they have worked with real one - and reaction towards "designers" is right), do me a favor and eliminate design by building AI solution already. You have ton of historically proven quantitive data what the principles of visually good design are. Just throw it in GAN, use style transfer and do it. You can split test UX and UI and decorate the results with GAN data. Problem solved. In design space education is broken, business owners and managers don't value design highly so everyone will be happy. Designers will find what to do with their talents, don"t worry:)
  - deleted 6y ago
    [deleted]
sbergot 6y ago
Functional libraries such as tailwindcss are popular because they are a good way to achieve this goal.
- mattacular 6y ago
  Maybe if you're not working with a designer/team.
  - wildrhythms 6y ago
    I promise you can achieve what the designer envisions with Tailwind, and I would challenge you to describe a design case outside of Tailwind's abilities. I was skeptical too for a long time.

wildrhythms 6y ago

I used to follow the "separation of concerns" ideology, but there's a single sentence in the Tailwind CSS guide[1] that changed my entire perspective on this: "No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container." I work in front-end primarily, and so much of my time is spent building a tightly coupled dependency between a HTML template and a stylesheet, coming up with names like ".container" and ".wrapper" and ".content", and when the layout changes, I have to change the stylesheet too. Do these things really need to be separated? Outside of uniquely implemented animations, I'm now of the opinion that... no, they really don't, and I've started adopting Tailwind into my projects to great success, less maintenance toil, and faster iterations. [1] https://tailwindcss.com/docs/utility-first https://tailwindcss.com/docs/utility-first

cptskippy 6y ago
I feel like the ability to separate concerns has been sabotaged in the pursuit of performance. It's often recommend to reduce the complexity of CSS Selectors to speed things up. Common performance analysis sites will ding your site for using all but the simplest selectors. When you couple that with tools that can never understand page layout or relationship, you get horrible CSS where every element has a corresponding unique CSS class or any number of utility classes.

cptskippy 6y ago

> For css this is the best explanation that I can find My take away from reading that article is that the author completely misses the fundamental concepts of CSS and only ever tried to use tools to generate it. I realize that in the pursuit of high performance websites, it's been recommended to avoid complex CSS selectors but, beyond that, the author chooses to style each element individually. I kept reading hoping for him to have an "Ah-ha!" moment but instead he just finds different ways to bang his head on the table.