Reply To: Creating a CSS Plan

[Krish1980]

I’ve observed that I get better with experience and when I make a conscious effort to organize code and keep it dry. Each iteration usually produces better results. Visiting this forum frequently, reading different opinions on best practices such as

smacss

also helps tremendously. I’m no expert(far from it) but I am much better now than how I was when I started.

The biggest hurdle is between the standard CSS, and then the modifications for mobile devices. For example, I might have an h2 tag that’s 48px, but reduce it on mobile to 30px. But in order to make that work, I find that I have to use the !important tag on almost everything.

In this simple example that you’ve provided, all you have to do is write a default h2 style, and then a media query for mobile devices. There is no need to use !important.

h2 {
         font-size: 30px;
}

@media only screen and (min-width:your break point in px/ems ) {
       h2 {
                font-size: 48px;
        }
}

I understand that the problem you may have encountered could be much more complex than this one. If it is, perhaps you could create a sample on CodePen so that forum members could troubleshoot, and you’d get a myriad of opinions.

Of course, there’s always the button issue, where if you make a general declaration for a default such as text-align: center; then you find yourself running into a situation where you want the button right or left justified. Now I need to create a whole new css class, and copy and paste the other rules with only one difference.

No need. You could chain classes.

.btn {
    /*default styles here */
}

.btn.state{
   /*just the changes you want over the default ones ; the remaining would be automatically applied */
}