<\/p>\n<\/p>\n
One quick and easy way to keep your CSS clean and well-structured is to remember (what I\u2019m going to title) the four CSS Rules of Multiplicity. They are:<\/p>\n
Multiple declarations<\/strong> in a single rule is the most fundamental of the four CSS Rules of Multiplicity. Simply stated, it means you can have as many CSS declarations as you want between your opening and closing braces, like so:<\/p>\n Multiple selectors<\/strong> can really help keep your CSS clean by grouping your rules together. Consider the following example: <\/p>\n When rules are identical like this, you can combine them by using sequential selectors, like so: <\/p>\n But what happens when you have two selectors that have very similar, but not quite identical, properties? That\u2019s when multiple rules<\/strong> come into play. Here\u2019s an example: <\/p>\n The paragraph and unordered list share a few properties in common, but not all. But you\u2019re allowed to refer to the unordered list more than once, so you could write something like this: <\/p>\n Another way to tackle having multiple rules in common across elements is to create multiple classes<\/strong>. For example, you could create a rule like this:<\/p>\n But then a while later, you decide you want something that is almost the same as your container class, but the text within is larger and boldfaced. You might be tempted to write a completely new class that includes the padding, border, background, and font size and weight that you need. But instead, you could just create a second class containing just the differences between the two, like this: <\/p>\n And then apply both classes to your XHTML element thusly:<\/p>\n By using all four of these examples of multiplicity together, you can keep your CSS looking lean and clean. And luckily, unlike the movie version of Multiplicity<\/a>, Michael Keaton doesn\u2019t get dumber the more often you use them.<\/p>\nbody {\n\tproperty-1: value;\n\tproperty-2: value;\n\t...\n\tproperty-infinity: value;\n}<\/pre>\np {\n\tfont-size: 110%;\n\tcolor: #333;\n}\nul {\n\tfont-size: 110%;\n\tcolor: #333; \n}<\/pre>\np, ul {\n\tfont-size: 110%;\n\tcolor: #333;\n}<\/pre>\np {\n\tfont-size: 110%;\n\tcolor: #333;\n}\nul {\n\tfont-size: 110%;\n\tcolor: #333;\n\tfont-weight: bold;\n}<\/pre>\np, ul {\n\tfont-size: 110%;\n\tcolor: #333;\n}\nul {\n\tfont-weight: bold;\n}<\/pre>\n.container {\n\tpadding: 5px;\n\tborder: 2px solid #ccc;\n\tbackground-color: #f2f2f2;\n}<\/pre>\n.strong {\n\tfont-size: 150%;\n\tfont-weight: bold;\n}<\/pre>\n<div class=\"container strong\">\n\tThis text is in our container,\n\tbut is also big and bold.\n<\/div><\/pre>\n