Creating a CSS Plan

[Randy]

While this may be basic to most of you, I’ve learned CSS and HTML on my own, and regularly build websites for clients. However, I’ve been discovering the CSS battle, and am looking for some insight on how to plan my CSS more effectively.

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.

What’s the best way around this?

When it comes to general CSS, I’ve tried a couple of different approaches. The first I’ve been pretty specific about every instance on what I want to style, but it gets out of hand pretty quick and makes for a lot of duplicate declarations as well as consistency on the site gets lost pretty easily.

I’ve also tried being more general such as .blue {color:} This way I can use it virtually anywhere, but then I find I still have to declare that in many cases where it doesn’t come up such as h2.blue

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.

What is the smart way to plan your css?

Thanks for all your input.

[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 */
}

[Paulie_D]

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.

It worth sayng that many deveopers prefer to start with mobile and use media queries for larger devices.

Providing a minimal (or at least stripped down ) experience for mobile helps you set a base set of rules which can then be enhanced for desktops.

[Krish1980]

It worth sayng that many deveopers prefer to start with mobile and use media queries for larger devices.

Providing a minimal (or at least stripped down ) experience for mobile helps you set a base set of rules which can then be enhanced for desktops.

I agree. I don’t know why I used the word mobile there when my sample code using min-width clearly demonstrated what you just said :-)

[Author]

Posts