StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Files should be modularized, so you can make use of <code>@import</code>s. I typically have a base.css file for base classes (such as typography and colors). Depending on your site structure, it may be advantageous to also have other CSS "partials" to reuse throughout user-facing stylesheets. These descendant stylesheets can extend base styles with more granularity as needed (E.g., <code>.warn {color:red;}</code> might get extended by <code>p.warn {font-style:italic;}</code>, or <code>h1.warn {border:5px solid red;}</code>), which is a great design pattern for implementing so-called <a href="http://github.com/stubbornella/oocss/wiki" rel="nofollow">object-oriented CSS</a>.</p> <p>Within the files themselves, I like to alphabetize my selectors and property lists. I have tried maintaining separate lists for different types of selectors (an id list first, then my list of classes, and then my list of element selectors), but I've found this unnecessarily difficult, so I have all selectors in the same alphabetical list. That way I can quickly find the root of all complex selectors or any styles given to a simple selector.</p> <p>Within complex selectors, I list each selector alphabetically.</p> <p>If I can't use Sass for some reason, I might imitate its <a href="http://sass-lang.com/tutorial.html#nesting" rel="nofollow">nesting</a> pattern (I'm still unsure if this is working out or not), like so:</p> <pre><code>@import url('/css/base.css'); a { color:#369; font-family: Helvetica, sans-serif; font-weight: bold; text-decoration: underscore; } a img { border: 0; } blockquote, .nav, p { margin-bottom: 10px; } blockquote { background: #eee; padding: 10px; } h1, h2, h3, h4 { font-family: Georgia, serif; } h1.warning { border: 5px solid red; } .nav a { font-size: 150%; padding: 10px; } .nav li { display: inline-block; } p.warning { font-style: italic; } p.warning a { background: #fff; border-bottom: 2px solid #000; padding: 5px; } p.warning .keyword { text-decoration: underline; } </code></pre> <p>Unfortunately, you may look for the margin for <code>p</code> and not realize that it's part of the <code>blockquote, .nav, p</code>. This also isn't very "object-oriented" design, but it's arguably better than putting strings of classes on virtually every element that requires styling.</p> <p>So, this approach isn't perfect and doesn't completely free you from sometimes having to find-in-file, but it's the best approach I have developed when I cannot use CSS templating tools for reasons beyond my control. I would love to hear any suggestions on improving this method :)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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