How I use CSS?

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:


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.

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. = '';

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.?

No comments:

Post a Comment