<story><title>CSS Classes Considered Harmful</title><url>https://www.keithcirkel.co.uk/css-classes-considered-harmful/</url></story><parent_chain><item><author>donatj</author><text>The problem is the modern webs hyper focus on appearance over content. Content first, style second.&lt;p&gt;I still say that the answer is just semantic HTML&amp;#x2F;CSS. You&amp;#x27;re coming at the problem from the wrong direction naming things for how you want them to appear. Name them for what they are. Write the HTML agnostic to how it&amp;#x27;s intended to appear, and then just use CSS as a tool to style the already existing document.&lt;p&gt;SCSS and extending placeholder[1] selectors makes this insanely easy and viable. You can write your &amp;quot;how things appear&amp;quot; classes as placeholder classes, and then simply extend those from your &amp;quot;what they are&amp;quot; classes. Super easy to keep organized.&lt;p&gt;1. &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;naxoc.net&amp;#x2F;2014&amp;#x2F;01&amp;#x2F;28&amp;#x2F;placeholder-selectors-in-sass&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;naxoc.net&amp;#x2F;2014&amp;#x2F;01&amp;#x2F;28&amp;#x2F;placeholder-selectors-in-sass&amp;#x2F;&lt;/a&gt;</text></item></parent_chain><comment><author>9dev</author><text>Time and again, people argue as if everyone was just trying to style their blog. HTML isn&amp;#x27;t only used for documents that roughly look like a printed page, but also for actual web &lt;i&gt;applications&lt;/i&gt;. Applications don&amp;#x27;t map too well onto HTML, and while the pedants are hung up on separating content from appearance, the rest of us is busy working on actual software.&lt;p&gt;If nobody &amp;quot;does it right&amp;quot;, maybe right is just wrong?</text></comment>
<story><title>CSS Classes Considered Harmful</title><url>https://www.keithcirkel.co.uk/css-classes-considered-harmful/</url></story><parent_chain><item><author>donatj</author><text>The problem is the modern webs hyper focus on appearance over content. Content first, style second.&lt;p&gt;I still say that the answer is just semantic HTML&amp;#x2F;CSS. You&amp;#x27;re coming at the problem from the wrong direction naming things for how you want them to appear. Name them for what they are. Write the HTML agnostic to how it&amp;#x27;s intended to appear, and then just use CSS as a tool to style the already existing document.&lt;p&gt;SCSS and extending placeholder[1] selectors makes this insanely easy and viable. You can write your &amp;quot;how things appear&amp;quot; classes as placeholder classes, and then simply extend those from your &amp;quot;what they are&amp;quot; classes. Super easy to keep organized.&lt;p&gt;1. &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;naxoc.net&amp;#x2F;2014&amp;#x2F;01&amp;#x2F;28&amp;#x2F;placeholder-selectors-in-sass&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;naxoc.net&amp;#x2F;2014&amp;#x2F;01&amp;#x2F;28&amp;#x2F;placeholder-selectors-in-sass&amp;#x2F;&lt;/a&gt;</text></item></parent_chain><comment><author>prmph</author><text>&amp;gt; Write the HTML agnostic to how it&amp;#x27;s intended to appear, and then just use CSS as a tool to style the already existing document.&lt;p&gt;But it&amp;#x27;s not possible to write HTML agnostic to how it&amp;#x27;s intended to appear, in the general sense. That&amp;#x27;s the issue with CSS. This whole thing about separating content and styling is carried too far leading to very bad UI architectures.&lt;p&gt;Stuff like colors and fonts can be separated from content. Stuff like positioning, hierarchy, etc. cannot be meaningfully separated from content in many cases, and trying to do so is the root of UI evil.&lt;p&gt;This is why the component approach is so powerful. By combining content (with its implied style) with explicit styling in an integrated package, large UI trees become composable and easier to reason about.&lt;p&gt;But many devs still don&amp;#x27;t grasp this, and continue to fantasize about pure content that can exist totally separate from presentation, a pipe dream.</text></comment>