I am finding it useful to define 'marker' css styles such as 'hidden' or 'selected' so I can easily mark something as hidden or selected - especially when using a tag based technology like ASP.NET MVC or PHP.
.hidden
{
display:none;
}
.newsItemList li.selected
{
background-color: yellow;
}
I don't especially feel like reinventing the wheel here and wanted to know what other things like this are useful or common - or if there are any pitfalls to watch out for.
Should I look at any specific css frameworks for other things like this? Plus is there a name for this type of css class that I can search by.
I agree with the other posters who say only to define what you need, rather than bloating your code with a bunch of unnecessary classes.
That being said, I find myself using the following on a constant basis:
.accessibility - visually hide elements, but keep them intact for screenreaders and print stylesheets
.clear - tied to Easy Clearing
.first-child and .last-child - easily assign styles to the first/last item in a container. This has been a lifesaver many times, and I prefer it over the poorly-supported :pseudo selectors
.replace - tied to Phark IR for transparent image replacement
Finally, I dynamically assign .js to the <html> element with
<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>
This will allow me to define .js (rest of selector) styles to target only browsers with JavaScript enabled.
Let me give you an answer from a very novice web developer who has recently considered using CSS classes as "markers". Please don't take this as a definitive answer, as I may be completely wrong, but look at it as another point of view.
I was going to use some marker classes, too. I created one called .center to center the elements in a DIV tag. However, I was struck with the idea that I'm looking at CSS all wrong. I reasoned that CSS is supposed to define how an element is to be displayed without having to change the HTML page. By using marker classes, like .center for example, I would have to change BOTH the CSS and HTML if I wanted that DIV tag to be right-justified next month. So instead, I created a .latestHeader class (the DIV is to hold the "latest information" such as a news item), and in that class I set the text to align center. Now, when I want to change the justification of the text, I simply change the CSS for that DIV and I don't have to touch the HTML.
In regards to your question about CSS frameworks...
Personally I've always found the W3C has the most complex but also most accurate answer to any CSS question.
After many years of programming and playing around with CSS/HTML/PHP I agree with the above comment.
There is no harm in defining a marker for something to be centered or right-aligned using something along the lines of a '.center' or '.righths', but keep in mind as above that if you want to change a whole slab of text your work will be increased because you have to edit both CSS and HTML.
Defining the format for a whole section will mostly likely work out more logical, because if you want to change the section months down the trail, you just have to edit the format of one CSS declaration as opposed to editing each individual article.
CSS was however designed as the ultimate styling language which could allow an administrator to make a website look exactly what they want it to. Keep in mind though that excess CSS will increase the load on a server, will increase the time before your client sees your page and in line with the 'feng shui of web design' it is possible to go overboard with too much styling.
You should really grow this list on a need basis instead of soliciting a list of generic classes across the board--you'll only end up with bloat. If you want to avoid reinventing the wheel the look into some CSS frameworks (blueprint or 960). In some respect, generic classes like .center { text-align:center } do have some level of redundancy but often times they're needed. For example the following pattern which is all too common but should be avoided:
element.onclick(function(e){ this.style.backgroundColor = 'yellow' }
That's bad because you really ought to be using:
element.onclick(function(e){ this.className = 'highlight' }
The latter allows you to modify your styles by only touching the CSS files. But if a CSS class name has only one style element then you should probably avoid it because it doesn't make any sense to have it (.hidden in your example) and call it directly instead:
element.onclick(function(e){ this.display = 'hidden}
I often find myself keeping two classes in all of my stylesheets: "center" (which simply applies text-align: center;, and a float-clearing class that applies clear:both;.
I've considered adding a "reset" statement to all my styles, but haven't had a need for it yet. The reset statement would be something similar to this:
*
{
margin: 0;
padding: 0;
}
I reuse these often enough to include them in just about everything. They're small enough so I don't feel they bloat the code at all.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
In our project we use SASS for styles development. Also, we use Bootstrap and it contains next well-known mixin:
#mixin clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
And we use it in our styles:
.class-example {
#include clearfix();
. . .
}
After the compilation into CSS, SASS copies all content of mixin into each class we used mixin. So, it's a big amount of duplicated code. We use mixin about 100 times, so it's about 1000 extra lines in css.
So, the question: which is better form performance/support/readability/etc. point of view
Use mixin and allow duplicated code be
Create class .clearfix and use it in markup like <span
class="example-class clearfix"> ... </span> to avoid duplication
Also, if someone has better solution - I'll be glad to get it. Any comments/discussions are welcome.
To begin with, I'd like to mention that applying overflow: hidden to an element with floating children clears the floats much like how including the clearfix mixin you're talking about does it.
For readability and performance, this is probably the clear winner. I don't have any data supporting that overflow: hidden actually renders faster than the clearfix, but I wouldn't be surprised if it does. It's much less CSS, though, so it's definitely a winner in terms of downloaded data.
It's not always possible to use overflow: hidden though as your layout may have some relative positioning going on. In those cases, the best performant method is to create a global class for .clearfix and apply it to all elements that are supposed to clear their children. While it doesn't sound like it's easily maintainable, I'd argue that it is more easily maintainable that including that mixin throughout your CSS since you won't have to clear the cached CSS whenever you make changes.
My recommendation is to use both overflow: hidden and .clearfix. Scrap #include clearfix.
The reasoning is that you can't always get away with just one method (sometimes you may want to use the :after element for something else, sometimes you may want content to stretch outside their containers) so having both available makes sense anyway.
With both methods available you're able to adapt to any scenario. Just remember you could tie overflow: hidden to a class name to keep it just as DRY as .clearfix.
My 2¢.
Edit:
Alternatively, but maybe not ideally, you could use #extend to create an output like this:
.element-1,
.element-2,
.element-3,
.element-4,
.element-5 {
// clearfix stuff
}
So that clearfix is defined at one place rather than multiple times through the document. Personally I'm not a big fan of it, but perhaps it makes sense to you.
I would suggest to make it a "helper" -class as you fine said your self, they are alot more agile and you put them where they are needed, also there are different clearfixes depending on the situration, some are overflow fixes some are table layout fixes and so on, i would rather create a class and add them where its needed, this also makes you layout classes independent of clear fixing. So they can live as stand alone and reusable codes not to have to worry if the clearfix could mess up potential layouts :)
Im using them as classes for a better and more agile way to do my layouts.
Edit, so i would say your solution number 2 is the best also for not as u are saying duplicating 100 lines of code.
Like others have said already, for a simple utility mixin like this, I'd define it as an extension instead, like this:
%clearfix {
//clearfix code
}
And then use it in the SASS like this:
.container{
#extend %clearfix;
}
This way, no matter how many times you extend it, the code that it outputs is in the CSS only once, instead of hundreds of times.
I would argue against using classes like clearfloat or clearfix in the markup unless you reeeallly need to-- why muddle up the markup when you can do it better and faster with CSS? Instead of tracking through a lot of different markup files, you can easily change it in one place, in your SASS file.
This allows you to have everything in one place, instead of spread out in many places, which makes maintaining it much easier, as I know from experience.
I am using bootstrap's less files in my current project and it has the following in mixins.less file:
// UTILITY MIXINS
// --------------------------------------------------
// Clearfix
// --------
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
we can define so-called "mixins", which have some similarities to functions in programming languages. They’re used to group CSS instructions in handy, reusable classes. Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Any CSS class or id ruleset can be mixed-in that way:
.container{
.clearfix();
}
As far as clearfix is concerned, I just use it as clearfix because it is doing one task which is clearing floats and i.e. what bootstrap offers one class to get a particular task. It is independent of other classes.
You can use it in html like this:
<div class="clearfix"></div>
I recommend using the mixin and don't worry about the very small performance hit. In the future if there are certain content types that you no longer want to use the clearfix on, you will have to go through all of your html to remove the tag.
It is always safer to keep your markup clean and do your layout and styling in the css. In this case you are taking a very small performance hit in order to save yourself in terms of future support. If you are seeing performance as an issue, you might want to think about ways that you could set up your markup or css so that you don't have so many classes that call .clearfix.
First of all!
I would start off by suggesting not using overflow: hidden. It is a hack and therefore will lead to confusing code for people in the future, especially new people to any business you apply this code in. There are also repercussions that a JavaScript developer would have to contend with for any position related elements.
So what are the PROS and CONS of applying a clearfix class everywhere or just applying an include within your SASS?
clearfix class
clearfix on a DOM element shows that the content is floating to any person without looking any further. The clearfix styling is written only once, making your Stylesheet files smaller.
#include clearfix
Great whoooop dee doo, let's all use the include everywhere and expand our Stylesheet mass shall we. But wait! I did find an interesting opportunity to really use it, which I will do for this exact reason.
If you have classes not in a template that requires a clearfix, so written all over the DOM. I could imagine wanting to use the include option. Though this is fairly rare.
Also, as a class undergoing responsive changes on the page suddenly requires a clearfix, you can nestle that within a nice #import media() with bourbon neat for example. But even this would be rare as you could just apply the clearfix again and be done with it right from the start.
Conclusion
I think a happy medium is called for, which should always be the case when writing SASS. But that is my personal opinion :-P
I don't want to argue regarding the use of inline styles over external styles however I just want to know your ideas on certain situations wherein inline styling could be used.
For example I have 10 types of tables that have different width but always use the same border color, thickness and padding. What I currently think is I should declare a global CSS class that controls the border and the padding of the table and then use inline styling to specify the width of the table.
E.g
<table class="default" style="width: 320px;">
Is my approach applicable?
yes u can declare a global CSS class and use this in all table. it will work for all table.
I believe its a correct approach in your case. As you are making the correct use of external class "default", by using it in all the tables and specifying the different widths inline with the specific elements.
I think you're misunderstanding something here. If you take this:
<table class = "default" style = "width: 320px;">
Then this does not apply width: 320px; on all tables with class default. It only applies it on this specific element which has the style attribute.
If you're looking to specify such CSS without having to <link> external files, you can embed your CSS within <style> tags:
.default { //or table, or whatever your selector is
width: 320px;
}
If you want to style a particular table with the class default with a different width, give it another class (class = "default width320") and do:
.default.width320 { //selects element with BOTH default and width320 classes
width: 320px;
}
Read more about CSS selectors here, and selector specificity here.
Edit: if you only want to style that particular table, your approach is relatively-fine. But, I suggest using classes and merging your styles in one place (whether it's a .css file or an inline <style> definition) — it's much more maintainable and tidier than scattered style attribute definitions.
Edit 2: it's absolutely correct to use style attributes. It's more of a matter of personal choice. If you're sure that this won't cause maintainability issues ('Hey, why is my table 320 pixels wide? I don't see anything in my CSS file that does that'), then go for it. It's what the style attribute is for.
This is only a problem because, most of the time, if you've done it once then you're going to want to do it again. And now you have two identical style properties. And, well, they should both be red-bordered. Oh, and I need a third one of these tables somewhere. And, wait, they should be a little skinnier...
On the other hand, if you used a one-off class, you can just slap it on the next table. Or you can compare all ten tables and tweak them from one place, etc.
The problem with violating principles is that principles are often hard-earned. :)
I always was told to take out multiple properties in your css that you use more then once, and add them all in one rule. Like below. (please excuse the poor example)
I always seen this:
.button, .list, .items { color: #444; }
With multiple rules, can't that leave a lot of clutter?
Only in css tutorials and examples Ive seen this:
.someColor { color: #444; }
And in the css, just add another class of '.sameColor'. (div class="button someColor")
I've never seen this and feels like it would leave less clutter in your CSS. Would this be okay? Or do you think it could leave with more clutter in your HTML ?
Try to name your classes independently of their visual effect. It is a nature of CSS to play with the design and layout without having to change the HTML. Class names such as .someColor or .left-sidebar are a bad practice. Colors and position can change.
And also apply rules to semantic HTML elements rather than adding classes on all different divs and spans. It should be obvious, although many people get this wrong.
CSS is a limited set of rules and that makes it a perfect creativity stimulator.
It's all based on personal preference. I've tried both methods and prefer the second method you listed, except with more generic class names such as middleParagraph or headerGraphic so it applies to an area rather than a specific color because colors can change.
Good classnames and IDs are the first place you should optimize. THEN move onto multiple class names.
Multiple classnames can help out quite a bit though, consider:
<div class="leftColumn">Left</div>
<div class="rightColumn">Right</div>
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div>
<!-- alternatively, you could have -->
<div class="rightColumn">Right</div>
<div class="middleColumn hasRignt">I have padding right of 210px</div>
<!-- or -->
<div class="leftColumn">Left</div>
<div class="middleColumn hasLeft">I have padding left of 210px</div>
<!-- or -->
<div class="middleColumn">I have no padding</div>
and your css
.leftColumn { width:200px; float:left; }
.rightColumn { width:200px; float:right; }
.middleColumn.hasLeft { padding-left:210px; }
.middleColumn.hasRight { padding-right:210px; }
The result is floated right/left columns and the center area compensates for them with padding. This means you can style your middleColumn how you want to (e.g. .middleColumn .otherCoolSelector ).
It's perfectly acceptable to apply multiple classes to HTML elements. The trick is to be judicious; I usually find that when I do this, the additional classes are additions or exceptions to the basic styling being applied. For example, here are some classes I occasionally add to an element that already has a class:
error -- to style the current element if the user entered invalid data
first -- to style the first element in a list or in a table row, e.g. to suppress padding-left
last -- to style the final element in a list or in a table row, e.g. to suppress margin-right
even -- to apply zebra-striping to alternate elements
hidden -- to hide an element if it's not currently relevant
These extra classes are typically generated dynamically with a server-side language like ASP.NET or PHP. They can also be added or removed on the client side with JavaScript, esp. with a library like jQuery. This is especially useful to show or hide elements in response to an event.
There are a lot of good answers here. The trick is finding out which one fits your situation best.
One thing to consider is your markup size. In a high-traffic situation, your markup size is critical to the speed of your page loads...every byte counts. If this is the case for you, then you may want to create more CSS classes and put less in your markup. That way, the client is caching more and your website is serving up less.
What you're suggesting is a bit like an in-line style, e.g. style="color:#444". So if you want to change the color of your element you'd have to make a change to the html, which means you've defined style as part of your content. Which is exactly what css is supposed to avoid.
Imagine if you'd included 'someColor,' multiple times across multiple html files and you decide some of these elements shouldn't have 'someColor,' after all, you've got a lot of files to go through.
I'd probably avoid the list option too, if I'm making a component, say a button, I want to find .mybutton class in my css file and see all the rules for that component, without having to go through all sorts of unhelpful global classes. Also if someone comes along and changes the color in our global class he may break my button, where as if the button controlled it's own styles it can't be broken in this way.
I have a page that looks like: <div id="header">...</div><div id="navigation">...</div> similar for body and footer.
I'd like to use a grid system to style the page, all of which seem to rely on giving the divs mentioned a class based on their presentation. But I don't want to do this (and can't because of the way the markup is generated)
Is there a way to do this, without just putting a class on the divs? I could copy the details of the class desired to a stylesheet mentioning the divs by id, but that feels wrong.
Edit to clarify:
The OP wants to avoid adding class="grid_3" etc. to the HTML, but also doesn't want to add #header { width: 960px; margin: 0px; } (which I think is okay) – Rory Fitzpatrick 3 hours ago
Exactly, I don't want to put presentation information in my HTML, but I hoped I wouldn't have to just take the css classes that make up the grid system apart, and apply the relevant parts (like margin:0px and width:960px), since that is bad from a maintenance and reuse angle.
So, I'll look at an automated system for doing what I need, unless there is an answer to how do you apply a css class to an HTML element, using css, without adding class="blah" to that element? Because that doesn't seem like a crazy thing to want to do to me.
Well if you use blueprint-css as your grid system you can use the compress.rb to assign the rules for given bp framework classes to a specific selector of your choice like #footer or what have you. for example in your project yaml you could have:
semantic_styles: # i dont think this is the right key definition but you get the idea
'#footer,#navigation': ['span-12','clearfix']
'#footer': ['push-1']
# etc...
Then when you call compress.rb on the project file it will roll up the necessary declaration from the array of selectors on the right into the selector on the left producing:
#footer,#navigation{ /* composite delcalrations from .span-12 and .clearfix */}
#footer {/* declarations from .push-1 */}
But all in all this is essential an automation of copying the declarations to a separate file that you say seems "wrong". But i mean other than doing this (automated or manually) i dont see what the possible options could be.
I'm not sure I understand the question. Why don't you want to put styles in a stylesheet and reference them by id?
#header{
position:relative;
...
}
I have the same reservations about grid systems, adding class names just goes against separating markup and style (but is often sacrificed for productivity).
However, I don't see what's wrong with setting the right column widths and margins using your own CSS. You could have a specific site.grid.css file that contains only selectors and widths/margins for the grid. I think this is perfectly okay, it's just a way of using CSS like variables. For instance, all 3-column elements would appear under
/* 3-column elements, width 301px */
#sidebar, #foobar, #content .aside {
width: 301px;
}
Then rather than adding class="grid_3" to your HTML, you just add the selector to the CSS.
You might want to consider using the class names initially, until you're happy with the layout, then convert it into CSS selectors. Whichever works best for your workflow.
If you don't have access to the markup you must either copy the styles, referencing the ids, or maybe you can apply the class to the ids using javascript?
How does one go about establishing a CSS 'schema', or hierarchy, of general element styles, nested element styles, and classed element styles. For a rank novice like me, the amount of information in stylesheets I view is completely overwhelming. What process does one follow in creating a well factored stylesheet or sheets, compared to inline style attributes?
I'm a big fan of naming my CSS classes by their contents or content types, for example a <ul> containing navigational "tabs" would have class="tabs". A header containing a date could be class="date" or an ordered list containing a top 10 list could have class="chart". Similarly, for IDs, one could give the page footer id="footer" or the logo of the website id="mainLogo". I find that it not only makes classes easy to remember but also encourages proper cascading of the CSS. Things like ol.chart {font-weight: bold; color: blue;} #footer ol.chart {color: green;} are quite readable and takes into account how CSS selectors gain weight by being more specific.
Proper indenting is also a great help. Your CSS is likely to grow quite a lot unless you want to refactor your HTML templates evertime you add a new section to your site or want to publish a new type of content. However hard you try you will inevitably have to add a few new rules (or exceptions) that you didn't anticipate in your original schema. Indeting will allow you to scan a large CSS file a lot quicker. My personal preference is to indent on how specific and/or nested the selector is, something like this:
ul.tabs {
list-style-type: none;
}
ul.tabs li {
float: left;
}
ul.tabs li img {
border: none;
}
That way the "parent" is always furthest to the left and so the text gets broken up into blocks by parent containers. I also like to split the stylesheet into a few sections; first comes all the selectors for HTML elements. I consider these so generic that they should come first really. Here I put "body { font-size: 77%; }" and "a { color: #FFCC00; }" etc. After that I would put selectors for the main framework parts of the page, for instance "ul#mainMenu { float: left; }" and "div#footer { height: 4em; }". Then on to common object classes, "td.price { text-align: right; }", finally followed by extra little bits like ".clear { clear: both; }". Now that's just how I like to do it - I'm sure there are better ways but it works for me.
Finally, a couple of tips:
Make best use of cascades and don't "overclass" stuff. If you give a <ul> class="textNav" then you can access its <li>s and their children without having to add any additional class assignments. ul.textNav li a:hover {}
Don't be afraid to use multiple classes on a single object. This is perfectly valid and very useful. You then have control of the CSS for groups of objects from more than one axis. Also giving the object an ID adds yet a third axis. For example:
<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}
div.wide {
width: 15em;
}
div.narrow {
width: 8em;
}
div#oddOneOut {
float: right;
}
</style>
<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>
Giving a class to your document <body> tag (or ID since there should only ever be one...) enables some nifty overrides for individual pages, like hilighting the menu item for the page you're currently on or getting rid of that redundant second sign-in form on the sign-in page, all using CSS only. "body.signIn div#mainMenu form.signIn { display: none; }"
I hope you find at least some of my ramblings useful and wish you the best with your projects!
There are a number of different things you can do to aid in the organisation of your CSS. For example:
Split your CSS up into multiple files. For example: have one file for layout, one for text, one for reset styles etc.
Comment your CSS code.
Why not add a table of contents?
Try using a CSS framework like 960.gs to get your started.
It's all down to personal taste really. But here are a few links that you might find useful:
http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/
http://www.louddog.com/bloggity/2008/03/css-best-practices.php
http://natbat.net/2008/Sep/28/css-systems/
Think of the CSS as creating a 'toolkit' that the HTML can refer to. The following rules will help:
Make class names unambiguous. In most cases this means prefixing them in a predicatable way. For example, rather than left, use something like header_links_object2_left.
Use id rather than class only if you know there will only ever be one of an object on a page. Again, make the id unambiguous.
Consider side effects. Rules like margin and padding, float and clear, and so on can all have unexpected consequences on other elements.
If your stylesheet is to be used my several HTML coders, consider writing them a small, clear guide to how to write HTML to match your scheme. Keep it simple, or you'll bore them.
And as always, test it in multiple browsers, on multiple operating systems, on lots of different pages, and under any other unusual conditions you can think of.
Putting all of your CSS declarations in roughly the same order as they will land in the document hierarchy is generally a good thing. This makes it fairly easy for future readers to see what attributes will be inherited, since those classes will be higher up in the file.
Also, this is sort of orthogonal to your question, but if you are looking for a tool to help you read a CSS file and see how everything shakes out, I cannot recommend Firebug enough.
The best organizational advice I've ever received came from a presentation at An Event Apart.
Assuming you're keeping everything in a single stylesheet, there's basically five parts to it:
Reset rules (may be as simple as the
* {margin: 0; padding: 0} rule,
Eric Meyer's reset, or the YUI
reset)
Basic element styling; this
is the stuff like basic typography
for paragraphs, spacing for lists,
etc.
Universal classes; this section
for me generally contains things
like .error, .left (I'm only 80%
semantic), etc.
Universal
layout/IDs; #content, #header,
or whatever you've cut your page up
into.
Page-specific rules; if you
need to modify an existing style
just for one or a few pages, stick a
unique ID high up (body tag is
usually good) and toss your
overrides at the end of the document
I don't recommend using a CSS framework unless you need to mock something up in HTML fast. They're far too bloated, and I've never met one whose semantics made sense to me; it's much better practice to create your own "framework" as you figure out what code is shared by your projects over time.
Reading other people's code is a whole other issue, and with that I wish you the best of luck. There's some truly horrific CSS out there.
Cop-out line of the year: it depends.
How much do you need to be styling? Do you need to change the aspects of alomost every element, or is it only a few?
My favorite place to go for information like this is CSS Zen Garden & A List Apart.
There are two worlds:
The human editor perspective: Where CSS is most easily understand, when it has clear structure, good formatting, verbose names, structured into layout, color and typesetting...
The consumer perspective: The visitor is most happy if your site loades quickly, if it look perfect in his browser, so the css has to be small, in one file (to save further connections) and contain CSS hacks to support all browsers.
I recommend you to start with a CSS framework:
Blueprint if you like smaller things
or YAML for a big and functional one
There is also a list of CSS Frameworks...
And then bring it in shape (for the browser) with a CSS Optimizer (p.e. CSS Form.&Opti.)
You can measure the Results (unpotimized <-> optimized) with YSlow.
A few more tips for keeping organized:
Within each declaration, adopt an order of attributes that you stick to. For example, I usually list margins, padding, height, width, border, fonts, display/float/other, in that order, allowing for easier readability in my next tip
Write your CSS like you would any other code: indent! It's easy to scan a CSS file for high level elements and then drill down rather than simply going by source order of your HTML.
Semantic HTML with good class names can help a lot with remembering what styles apply to which elements.