StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>We're using a style guide in the form of a simple HTML page with examples of <strong>every</strong> CSS rule in the stylesheet. It's very easy to tell if you add a new, incompatible rule since the examples are aligned on top of eachother.</p> <p>An example I like: <a href="http://getbootstrap.com/components/" rel="nofollow noreferrer">http://getbootstrap.com/components/</a> (added 2015)</p> <p>The other pro you get from this method is reusability: you know what you got and you know that you want the style guide to be as small as possible - therefore: reuse.</p> <p>When you make changes to styles already in use: check the style guide. If it doesn't change it's probably good (you might need to browse around a bit if you've just changed something including box model-issues, or width, height, padding, margin in general).</p> <blockquote> <p>How do you move from a legacy, mess of css to cleaned up, nicely cascading, DRY stylesheets?</p> </blockquote> <p><strong>Use the style guide as a unit test</strong>. Once you got the essential parts in it: reduce, refactor and combine (you most probably will find some collissions between <code>.campaign_1 span</code> and your regular rules, inheritance can be your friend).</p> <blockquote> <p>Conflicting styles: one developer adds a .header { font-weight: bold;} but .header was already used in other modules and shouldn't be bold in those.</p> </blockquote> <p>In reply to Adriano Varoli Piazza's comment and the quote above: I don't recall this as a problem fully belonging to the CSS but more to the HTML markup. No matter what you do, it will be some heavy lifting. Decide which rule you'd want to keep and take actions towards cleaning out the lesser-used-ones; for example: via inheritance: <code>#news a .header { ... }</code> or renaming the HTML-class <code>a .stand_out_header { ... }</code>.</p> <p>About the following idea</p> <blockquote> <p>Namespace all new widget classes - if you have a widget foo all sub-classnames will be .foo_ so we get: .foo, .foo_header, .foo_content, .foo_footer. This makes our css essentially FLAT, but we see no other way to organize our code going forward without running into the legacy styles or the cascading problems I mentioned above.</p> </blockquote> <p>Use a containing element instead, which will be much more easy to maintain:</p> <pre><code><div id="widget_email"> <h2>One type of h2</h2> </div> <div id="widget_twitter"> <h2>Another h2</h2> </div> </code></pre>

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