In this article, I am going to explorer how I use CSS – i.e. my way of using CSS – or how I design using CSS?
I prefer classes over tags and IDs.
.class-name { }
It doesn't mean that I don't use <tags> and #ids – I use them when appropriate!
My CSS classes are lowercase, hyphen-separated:
.header-top
.header-h1
.red-background
.skew-90deg
I always place repeated code in a separate class, and use it on demand. In future, I don't have to change CSS anymore; I just have to edit HTML class attributes:
.red-background { }
<span class="red-background">go ahead</span>
<div class="allow-select red-background">Long DIV selectable</div>
<a class="skew-90 rotate-180 red-background">Login</a>
Above code is much better than using comma separated selectors in CSS, in my opinion!
I never use !important in my code, trust me, never!
I don't use !important because it overrides previous styles and whenever I've to override any previous style; I place overridden code at the bottom of the CSS file without using !important - so everything works fine for me!
!important NEVER allow upcoming code to override it until you explicitly use !important in the later code! That's why I never use it.
For the sake of clarity and simplicity, I always order CSS selectors according to HTML elements priority.
(ORDER OF CSS SELECTORS)
html, body top most priority
header, h1 second priority
menu third priority
.content fourth priority
footer last priority (+media queries etc.)
This makes me comfortable regarding my CSS and I feel no confusion in later edits.
I use child, attribute and sibling selectors often without concerning IE6! - It is progressively enhanced way of using CSS!
For example see this code:
footer ~ * {
display: none !important;
}
If someone dynamically appends HTML code at my page! I'll hide his HTML; however if he uses !important himself; there is no solution to hide his HTML!! – Remember this is the only place where I use !important. (Note: I use CSP [Content Security Policy] for inline/out-line CSS/JS protection; however it is still in draft! )
I never like default styles; so I always override them.
I use :after and :before pseudo selectors in the way that my layout also looks great in old browsers like IE6.
li:before {
content: "-";
margin-right: 5px;
}
IE6 will ignore it, and margins will NEVER apply.
I use negative margins too - IE6 is still stupid for this!
.dialog-box {
margin-top: -20px;
}
There are a lot other alternatives for negative margins (float, text/word wrapping etc.); but I don't know why I always use negative margins! – It is easy to use and gives control over stuff! (Note: display: inline-block is not an alternative for negative margins!) [Well, clearfixing is also helpful for old IE]
For anchors (<a>), I use border-bottom instead of text-decoration – it looks great!
a {
text-decoration: none;
border-bottom: 1px solid blue;
padding-bottom: 3px;
}
You may know that CSS values' order doesn't matter; however I always follow standard (common) style. As you can see the value of border-bottom; this is most common style on the web!
Negative text-indent is better for hiding text over images – I use it when needed:
.menu-button {
background-image: url(about.png);
text-indent: -111111px;
}
I use position:absolute often! - sometimes I also use position:fixed - however I strongly care IE6 in that case!
.fix-position {
position: fixed;
*position: absolute; /* IE6 Hack */
}
I never used visibility:hidden - I use display:none instead. I know display: none causes reflow but I still use it!
I use line-height in unit-less format:
p, p {
line-height: 1.5;
}
It inherits value from font-size.
In case when CSS value is zero; I use zero units-less!
When editing CSS within JavaScript; I use display:'' for allowing elements get their default display value.
header.style.display = '';
I love well-decorated code and I love using Unicode special characters to decorate and clarify my code!
There are many other tricks too – This is how I use CSS – Are you have any question, suggestion etc.?
