Ocelot-Social/assets/scss.html-Cg6fmwql.js

import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a as n,o as a}from"./app-42vVvAb-.js";const t={};function o(l,e){return a(),i("div",null,e[0]||(e[0]=[n(`<h1 id="scss-code-guidelines" tabindex="-1"><a class="header-anchor" href="#scss-code-guidelines"><span>SCSS - Code Guidelines</span></a></h1><h2 id="we-use-classes-over-tags-and-ids" tabindex="-1"><a class="header-anchor" href="#we-use-classes-over-tags-and-ids"><span>We use classes over tags and ids</span></a></h2><p>Never apply styles to <code>tags</code> or <code>ids</code> – use <code>classes</code> instead!</p><p>Why?</p><ul><li>HTML tags are responsible for the document <em>structure</em>, not the looks</li><li>targeting HTML tags comes with performance issues</li><li>ids are responsible for identifying a unique element, not for styling it</li><li>ids have higher specificity than classes and therefore don&#39;t play well together</li><li>classes can be combined and reused while ids are unique</li></ul><p>For more background see the following articles on <a href="https://frontstuff.io/you-need-to-stop-targeting-tags-in-css" target="_blank" rel="noopener noreferrer">why not to style tags</a> and <a href="https://dev.to/clairecodes/reasons-not-to-use-ids-in-css-4ni4" target="_blank" rel="noopener noreferrer">why not to style ids</a>.</p><h2 id="we-use-design-tokens-instead-of-magic-numbers" tabindex="-1"><a class="header-anchor" href="#we-use-design-tokens-instead-of-magic-numbers"><span>We use design tokens instead of magic numbers</span></a></h2><p>In order to achieve a consistent look and feel we use a set of pre-defined <code>design tokens</code> to style our components, for example <code>colors</code>, <code>sizes</code> and <code>box-shadows</code>. These tokens are stored as <code>SCSS variables</code> and reused throughout the app.</p><p>So, instead of typing <em>pixel values</em> or <em>hex codes</em> make sure you use design tokens such as <code>height-header</code> or <code>color-input-border</code>.</p><h2 id="we-name-our-classes-after-components" tabindex="-1"><a class="header-anchor" href="#we-name-our-classes-after-components"><span>We name our classes after components</span></a></h2><p>Our SCSS styles live within the corresponding component (see the <a href="https://vuejs.org/v2/guide/single-file-components.html" target="_blank" rel="noopener noreferrer">Vue.js docs for single-file components</a> for reference) and should therefore carry the same <em>unique</em> name.</p><p>Why?</p><ul><li>it clearly ties the styles to the one component</li><li>having unique class names means styles will not be accidentally overwritten in other files</li><li>we can avoid using <code>scoped CSS</code> which <a href="https://vue-loader.vuejs.org/guide/scoped-css.html#also-keep-in-mind" target="_blank" rel="noopener noreferrer">comes with performance caveats</a></li></ul><h2 id="we-use-variants-instead-of-overriding-styles" tabindex="-1"><a class="header-anchor" href="#we-use-variants-instead-of-overriding-styles"><span>We use variants instead of overriding styles</span></a></h2><p>Components will sometimes need to look different depending on the context in which they are used – a button might for example be <code>green</code> when it represents a call to action and <code>red</code> when it triggers a destructive action. Rather than making the <code>rounded-button</code> component <code>green</code> by default and then overriding the <code>color</code> for, say, the <code>delete-account</code> action – use variants! Pass the <code>rounded-button</code> a prop, such as <code>color: danger</code>, and then apply the respective <code>variant class</code>.</p><p>Name variant classes with a dash prefix, such as <code>-danger</code>, then target them like this:</p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.rounded-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;">  /* other css styles */</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">  &amp;</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.-danger</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">    color: </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-danger</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">  }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="we-style-within-the-component-we-position-when-we-use-it" tabindex="-1"><a class="header-anchor" href="#we-style-within-the-component-we-position-when-we-use-it"><span>We <em>style</em> within the component, we <em>position</em> when we use it</span></a></h2><p>In order to make components truly reusable it is important to limit their styles to, well, their actual <em>styling</em>. What color are they, how big is the text, what happens on <code>hover</code>, do they have a rounded border – all that is part of it.</p><p>Margins, alignment and positioning on the other hand need to be defined in the <em>parent</em> because the same component might sometimes be aligned to the left, sometimes to the right and sometimes float above other content. For more details see the <a href="https://rscss.io/layouts.html" target="_blank" rel="noopener noreferrer">rscss guidelines</a>.</p><p>To do that, use the <code>child selector</code>, like this:</p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.login-form</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;">  /* other css styles */</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">  &gt; </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.rounded-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">    margin: </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$margin-small</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">    justify-self: </span><span style="--shiki-light:#383A42;--shiki-dark:#D19A66;">flex-end</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">  }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>A special case are dimensions like <code>width</code> and <code>height</code>. If it is important that a component always has the same dimensions (the height of a button should be consistent, for example) define it <em>within the component</em> itself, if a component should have flexible dimensions (a card, for example, could stretch over the whole screen in one place and be limited to a certain width in another) define the dimensions <em>in the parent</em>.</p><h2 id="recommended-reads" tabindex="-1"><a class="header-anchor" href="#recommended-reads"><span>Recommended reads</span></a></h2><p>For a deeper dive into the WHY and HOW have a look at the following resources which the above guidelines are based on:</p><ul><li><a href="https://rscss.io/index.html" target="_blank" rel="noopener noreferrer">rscss – reasonable system for css stylesheet structure</a></li><li><a href="https://csswizardry.net/talks/2014/11/itcss-dafed.pdf" target="_blank" rel="noopener noreferrer">itcss – inverted triangle architecture for css</a></li></ul>`,26)]))}const h=s(t,[["render",o],["__file","scss.html.vue"]]),c=JSON.parse(`{"path":"/webapp/scss.html","title":"SCSS - Code Guidelines","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"We use classes over tags and ids","slug":"we-use-classes-over-tags-and-ids","link":"#we-use-classes-over-tags-and-ids","children":[]},{"level":2,"title":"We use design tokens instead of magic numbers","slug":"we-use-design-tokens-instead-of-magic-numbers","link":"#we-use-design-tokens-instead-of-magic-numbers","children":[]},{"level":2,"title":"We name our classes after components","slug":"we-name-our-classes-after-components","link":"#we-name-our-classes-after-components","children":[]},{"level":2,"title":"We use variants instead of overriding styles","slug":"we-use-variants-instead-of-overriding-styles","link":"#we-use-variants-instead-of-overriding-styles","children":[]},{"level":2,"title":"We style within the component, we position when we use it","slug":"we-style-within-the-component-we-position-when-we-use-it","link":"#we-style-within-the-component-we-position-when-we-use-it","children":[]},{"level":2,"title":"Recommended reads","slug":"recommended-reads","link":"#recommended-reads","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":2.07,"words":622},"filePathRelative":"webapp/scss.md","localizedDate":"July 17, 2025","excerpt":"\\n<h2>We use classes over tags and ids</h2>\\n<p>Never apply styles to <code>tags</code> or <code>ids</code> – use <code>classes</code> instead!</p>\\n<p>Why?</p>\\n<ul>\\n<li>HTML tags are responsible for the document <em>structure</em>, not the looks</li>\\n<li>targeting HTML tags comes with performance issues</li>\\n<li>ids are responsible for identifying a unique element, not for styling it</li>\\n<li>ids have higher specificity than classes and therefore don't play well together</li>\\n<li>classes can be combined and reused while ids are unique</li>\\n</ul>"}`);export{h as comp,c as data};