Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>My solution, amidst plenty:</p> <ul> <li><strong>base.css / reset.css</strong>: your foundation {base layout, type, color} -- 100% reusability</li> <li><strong>helper.css</strong>: basic layout rules for modules as well as 'utility classes' {grid variations, forms, tables, etc} -- 90+% reusability</li> <li><strong>module.css</strong>: complex layout rules for modules {semantic modules like .post or .comment} - 75% reusability</li> <li><strong>layout.css</strong>: template-based rules {#hd, #bd, #ft, #homePage, etc.}- almost no reusability</li> <li><strong>color.css</strong>: all color rules, combined - 50% reusability</li> <li><strong>type.css</strong>: all type rules, combined - 75% reusability (text styling has less variations)</li> <li>this separation also allows mobile and print versions for the layout sheets, all controlled by @import via the stylesheet I link to the html.</li> </ul> <p>I am using this for a medium-sized site. For extra organization, I keep each sheet sectioned basically the same {wrapper, general, unique, etc}. I also tag my selectors and properties, as well as indent them in order of dependency inside the same selector group, so I know what rules I am referencing or extending. This framework allows nearly infinite expansion while keeping things organized, understandable, and reusable. I've had to refactor a 7000+ line master.css file a month ago, so this is a new system I am trying out. I've found that 100% content-semantic CSS isn't as scalable and easy to understand as a semantic/layout hybrid, since that's what CSS is used for anyway.</p> <p><strong>1.25-yr-later-edit</strong>: Another method which might be more relevant is to just use a good CSS text editor. I'm positive VS is crap for working with CSS, unless you happen upon some extensions. If you're on windows, give <a href="http://e-texteditor.com" rel="nofollow noreferrer">E Text Editor</a> a shot, b/c it's a TextMate Windows port and has bundles designed for CSS and markup that give you much better syntax highlighting and autocompletion. What you then can do is organize, even a 8000-line stylesheet, into collapsible folds: </p> <pre><code>/** Start Module 1 */ [css] /* End Module 1 **/ </code></pre> <p>And use the symbol list to display for you a quick TOC on the fly with a query like <code>Start</code> or <code>Module 1</code> It also indexes lines with <code>/** these types of comments **/</code> (great for tagging areas) and all CSS selector chains. You should have no trouble working with single big files with E. Besides, unless you're progressively enhancing your CSS it's all going to get minified anyway. I would also make sure to indent your CSS to somewhat mimic the structure of DOM section it is referring to.</p> <pre><code>.container {} .container .inner {} .container .head {} .container .inner.alt {} </code></pre> <p>Otherwise, I agree with the '1 Base CSS and 1 Page/Section CSS` method, though it entirely depends on your business requirements.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload