<story><title>Semantic UI</title><url>https://semantic-ui.com/</url></story><parent_chain><item><author>yoran</author><text>I disagree. I find that SASS mixins provide the same reusability as classes but in a much cleaner way. True, it makes your HTML and CSS very coupled, but it does provide you with a true clean separation of content and presentation.&lt;p&gt;I find&lt;p&gt;&lt;pre&gt;&lt;code&gt;  &amp;#x2F;&amp;#x2F; style.scss
  @mixin button($color, $size) { ... }

  .download-book {
    @include button(
      $color: red,
      $size: big
    );
  }

  .send-email {
    @include button(
      $color: blue,
      $size: small
    );
  }

  &amp;#x2F;&amp;#x2F; index.html
  &amp;lt;button class=&amp;quot;download-book&amp;quot;&amp;gt;Download book&amp;lt;&amp;#x2F;button&amp;gt;
  &amp;lt;button class=&amp;quot;send-email&amp;quot;&amp;gt;Send email&amp;lt;&amp;#x2F;button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
much cleaner than&lt;p&gt;&lt;pre&gt;&lt;code&gt;  &amp;#x2F;&amp;#x2F; style.scss
  .button { ... }
  .red { ... }
  .blue { ... }
  .big { ... }
  .small { ... }

  &amp;#x2F;&amp;#x2F; index.html
  &amp;lt;button class=&amp;quot;button big red&amp;quot;&amp;gt;Download book&amp;lt;&amp;#x2F;button&amp;gt;
  &amp;lt;button class=&amp;quot;button small blue&amp;quot;&amp;gt;Send email&amp;lt;&amp;#x2F;button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
1. When you change the visual aspect of an element, you go to the stylesheet and don&amp;#x27;t go adding&amp;#x2F;removing classes from the content layer (HTML).&lt;p&gt;2. When using generic names like &amp;quot;button&amp;quot;, &amp;quot;big&amp;quot;, &amp;quot;small&amp;quot;, etc... I always find myself in a naming conflict at some point. The likelihood of semantic names having conflicts is much smaller.&lt;p&gt;Of course, your CSS file becomes a lot bigger. But when enabling compression, the stylesheets using mixins turn out to be smaller (see &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;tech.bellycard.com&amp;#x2F;blog&amp;#x2F;sass-mixins-vs-extends-the-data&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;tech.bellycard.com&amp;#x2F;blog&amp;#x2F;sass-mixins-vs-extends-the-d...&lt;/a&gt;). Also, your HTML file is likely smaller too when using semantic classes.</text></item><item><author>adamwathan</author><text>I used to think this way until reading this article by Nicolas Gallagher:&lt;p&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;nicolasgallagher.com&amp;#x2F;about-html-semantics-front-end-architecture&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;nicolasgallagher.com&amp;#x2F;about-html-semantics-front-end-a...&lt;/a&gt;&lt;p&gt;These days I&amp;#x27;m quite convinced trying to author your markup such that you can redesign a site by applying a different stylesheet has the dependencies backwards.&lt;p&gt;If you try to keep visual information out of your HTML, you end up authoring stylesheets designed to nimbly navigate your DOM structure to precisely target elements to style in a way that makes your CSS &lt;i&gt;extremely&lt;/i&gt; coupled to the particular site you are building.&lt;p&gt;Your HTML documents are already coupled to your project, so rather than writing CSS that&amp;#x27;s coupled to that HTML, I&amp;#x27;ve found it to work much better to author CSS from a mindset that the CSS knows &lt;i&gt;nothing&lt;/i&gt; about the document it&amp;#x27;s trying to style.&lt;p&gt;This leads to writing what I call &amp;quot;library-style&amp;quot; CSS, where you are almost trying to build your own Bootstrap or similar; something that you could actually use on multiple projects if you wanted.&lt;p&gt;A class like &amp;quot;download-book&amp;quot; is not very useful if you have multiple buttons in a project that are meant to look the same way and not all of them trigger a book download.</text></item><item><author>jameslk</author><text>I&amp;#x27;ve always found it ironic that this library calls itself &amp;quot;Semantic UI&amp;quot; but doesn&amp;#x27;t follow the practice of semantic HTML&amp;#x2F;classes[0]. W3C suggests[1] that classes should be used for semantic roles (e.g. &amp;quot;warning&amp;quot;, &amp;quot;news&amp;quot;, &amp;quot;footer&amp;quot;), rather than for display (&amp;quot;left&amp;quot;, &amp;quot;angle&amp;quot;, &amp;quot;small&amp;quot; -- examples taken from Semantic UI&amp;#x27;s docs). So instead of giving a button the class of &amp;quot;button&amp;quot; it would be better to give it a class such as &amp;quot;download-book.&amp;quot; The benefit of this is when it comes time to redesign parts of a site, you only have to touch your stylesheets instead of manipulating both the stylesheets and HTML. That is, so we don&amp;#x27;t fall into the old habits of what amounts to using &amp;lt;b&amp;gt; &amp;lt;font&amp;gt; &amp;lt;blink&amp;gt; tags.&lt;p&gt;0. &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;css-tricks.com&amp;#x2F;semantic-class-names&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;css-tricks.com&amp;#x2F;semantic-class-names&amp;#x2F;&lt;/a&gt;&lt;p&gt;1. &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;www.w3.org&amp;#x2F;QA&amp;#x2F;Tips&amp;#x2F;goodclassnames&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;www.w3.org&amp;#x2F;QA&amp;#x2F;Tips&amp;#x2F;goodclassnames&lt;/a&gt;</text></item></parent_chain><comment><author>sklivvz1971</author><text>A class called &amp;quot;download-book&amp;quot; wouldn&amp;#x27;t be semantic either.&lt;p&gt;A semantic choice of classes should represent the &lt;i&gt;roles&lt;/i&gt; that things have in the UI hierarchy: if a &amp;quot;book download&amp;quot; button is the main action of the page, it should have a class of, say &amp;quot;main-action&amp;quot;, possibly with an extra &amp;quot;download&amp;quot; class to show UI specific to download actions.&lt;p&gt;If a &amp;quot;book download&amp;quot; button is just an action, for example a button that is repeated multiple times in a table, then it needs a different class, like &amp;quot;action&amp;quot;, still possibly with &amp;quot;download&amp;quot;.&lt;p&gt;This is exactly like properly written HTML is semantic, elements represent hierarchical roles (&amp;quot;nav&amp;quot;, &amp;quot;footer&amp;quot;), not their look, nor their content.</text></comment>
<story><title>Semantic UI</title><url>https://semantic-ui.com/</url></story><parent_chain><item><author>yoran</author><text>I disagree. I find that SASS mixins provide the same reusability as classes but in a much cleaner way. True, it makes your HTML and CSS very coupled, but it does provide you with a true clean separation of content and presentation.&lt;p&gt;I find&lt;p&gt;&lt;pre&gt;&lt;code&gt;  &amp;#x2F;&amp;#x2F; style.scss
  @mixin button($color, $size) { ... }

  .download-book {
    @include button(
      $color: red,
      $size: big
    );
  }

  .send-email {
    @include button(
      $color: blue,
      $size: small
    );
  }

  &amp;#x2F;&amp;#x2F; index.html
  &amp;lt;button class=&amp;quot;download-book&amp;quot;&amp;gt;Download book&amp;lt;&amp;#x2F;button&amp;gt;
  &amp;lt;button class=&amp;quot;send-email&amp;quot;&amp;gt;Send email&amp;lt;&amp;#x2F;button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
much cleaner than&lt;p&gt;&lt;pre&gt;&lt;code&gt;  &amp;#x2F;&amp;#x2F; style.scss
  .button { ... }
  .red { ... }
  .blue { ... }
  .big { ... }
  .small { ... }

  &amp;#x2F;&amp;#x2F; index.html
  &amp;lt;button class=&amp;quot;button big red&amp;quot;&amp;gt;Download book&amp;lt;&amp;#x2F;button&amp;gt;
  &amp;lt;button class=&amp;quot;button small blue&amp;quot;&amp;gt;Send email&amp;lt;&amp;#x2F;button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
1. When you change the visual aspect of an element, you go to the stylesheet and don&amp;#x27;t go adding&amp;#x2F;removing classes from the content layer (HTML).&lt;p&gt;2. When using generic names like &amp;quot;button&amp;quot;, &amp;quot;big&amp;quot;, &amp;quot;small&amp;quot;, etc... I always find myself in a naming conflict at some point. The likelihood of semantic names having conflicts is much smaller.&lt;p&gt;Of course, your CSS file becomes a lot bigger. But when enabling compression, the stylesheets using mixins turn out to be smaller (see &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;tech.bellycard.com&amp;#x2F;blog&amp;#x2F;sass-mixins-vs-extends-the-data&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;tech.bellycard.com&amp;#x2F;blog&amp;#x2F;sass-mixins-vs-extends-the-d...&lt;/a&gt;). Also, your HTML file is likely smaller too when using semantic classes.</text></item><item><author>adamwathan</author><text>I used to think this way until reading this article by Nicolas Gallagher:&lt;p&gt;&lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;nicolasgallagher.com&amp;#x2F;about-html-semantics-front-end-architecture&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;nicolasgallagher.com&amp;#x2F;about-html-semantics-front-end-a...&lt;/a&gt;&lt;p&gt;These days I&amp;#x27;m quite convinced trying to author your markup such that you can redesign a site by applying a different stylesheet has the dependencies backwards.&lt;p&gt;If you try to keep visual information out of your HTML, you end up authoring stylesheets designed to nimbly navigate your DOM structure to precisely target elements to style in a way that makes your CSS &lt;i&gt;extremely&lt;/i&gt; coupled to the particular site you are building.&lt;p&gt;Your HTML documents are already coupled to your project, so rather than writing CSS that&amp;#x27;s coupled to that HTML, I&amp;#x27;ve found it to work much better to author CSS from a mindset that the CSS knows &lt;i&gt;nothing&lt;/i&gt; about the document it&amp;#x27;s trying to style.&lt;p&gt;This leads to writing what I call &amp;quot;library-style&amp;quot; CSS, where you are almost trying to build your own Bootstrap or similar; something that you could actually use on multiple projects if you wanted.&lt;p&gt;A class like &amp;quot;download-book&amp;quot; is not very useful if you have multiple buttons in a project that are meant to look the same way and not all of them trigger a book download.</text></item><item><author>jameslk</author><text>I&amp;#x27;ve always found it ironic that this library calls itself &amp;quot;Semantic UI&amp;quot; but doesn&amp;#x27;t follow the practice of semantic HTML&amp;#x2F;classes[0]. W3C suggests[1] that classes should be used for semantic roles (e.g. &amp;quot;warning&amp;quot;, &amp;quot;news&amp;quot;, &amp;quot;footer&amp;quot;), rather than for display (&amp;quot;left&amp;quot;, &amp;quot;angle&amp;quot;, &amp;quot;small&amp;quot; -- examples taken from Semantic UI&amp;#x27;s docs). So instead of giving a button the class of &amp;quot;button&amp;quot; it would be better to give it a class such as &amp;quot;download-book.&amp;quot; The benefit of this is when it comes time to redesign parts of a site, you only have to touch your stylesheets instead of manipulating both the stylesheets and HTML. That is, so we don&amp;#x27;t fall into the old habits of what amounts to using &amp;lt;b&amp;gt; &amp;lt;font&amp;gt; &amp;lt;blink&amp;gt; tags.&lt;p&gt;0. &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;css-tricks.com&amp;#x2F;semantic-class-names&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;css-tricks.com&amp;#x2F;semantic-class-names&amp;#x2F;&lt;/a&gt;&lt;p&gt;1. &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;www.w3.org&amp;#x2F;QA&amp;#x2F;Tips&amp;#x2F;goodclassnames&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;www.w3.org&amp;#x2F;QA&amp;#x2F;Tips&amp;#x2F;goodclassnames&lt;/a&gt;</text></item></parent_chain><comment><author>always_good</author><text>I find tha the library-style &amp;quot;button&amp;quot; &amp;quot;red&amp;quot; &amp;quot;blue&amp;quot; &amp;quot;big&amp;quot; example prevents me from having to flip over and maintain CSS with every HTML change.&lt;p&gt;Yet your first example has everyone editing CSS files and appending new classes to it all the time, which in my experience is the fastest way to end up with unmaintainable CSS.&lt;p&gt;Mixins sounded good to me at first, but I&amp;#x27;ve only experienced less maintainability when the CSS was too clever.</text></comment>