In your HTML, you'd just need to add an extra class, so class="problemo problemo-big" instead of class="problem-big". The CSS in the latter part of the above stylesheet is cleaner and shorter.
![simple css reset simple css reset](https://image.slidesharecdn.com/css-reset-100422192736-phpapp01/95/css-reset-15-728.jpg)
If you want to keep your CSS short, think of one of the most important principles of clean code: Don't Repeat Yourself. Of the below two examples, which one do you prefer: /* Example 1 */īackground: #FF0 url(.css.png) no-repeat center
![simple css reset simple css reset](http://www.boagworld.com/blogImages/Blogger-20090305-122333.jpg)
#Simple css reset code
For example, don't write the hex code of #FFFF00 when you can write it as #FF0. This is particularly true for border, margin, padding, and background, but it counts for other properties too. Use CSS shorthand properties wherever possible. Make sure to keep enough whitespace between these sections too. For example, /* || General Styles */, /* || Typography */, and /* || Colors */ can make a stylesheet much easier to read. What seems obvious when you're writing CSS probably won't be a month from now.Īdditionally, use comments to divide logical sections in your stylesheet. Add links to tutorials if it's a particularly crafty bit of CSS. That's why you need to add comments to the specific decisions you make in your stylesheet. But it's not because the syntax is easy to read that people (including your future self) will understand what you're trying to do. Make It UnderstandableĬSS is fairly explanatory and doesn't seem to require any comments. It doesn't matter how you divide it, as long as it's neatly organized and properly cross-referenced. Or different stylesheets for your blog and your static pages. Have one stylesheet with all the global rules and smaller stylesheets with specific rules. From generic to header to the navigation menu to the main content and so on until you reach the footer.Īs a final point, if you're working on a large project, break large stylesheets into smaller ones. Alternatively, go from top to bottom on the website.Only then include the CSS for specific things. Start with the default styling, define the utility classes you'll need, and then add the basic page layout: header, main content, footer, etc.You can do this in many different ways, but here are two: In addition, once you've written the HTML, make sure you organize your stylesheet while writing CSS. If you do this instead of writing CSS along with the HTML, you'll save a tremendous amount of rewriting. Once that's done, you'll have a much clearer idea of how you want to style your website's components. Don't style the header while you're coding it.
![simple css reset simple css reset](https://www.downloadnow.top/wp-content/uploads/2020/11/9070/psd-to-html-css-series-1-unresponsive-7-adding-a-simple-css-reset.jpg)
That's why you should not write CSS alongside HTML. It's hard to know what you want to style when you don't know what the HTML framework will look like. You need a good reason to deviate from these CSS best practices. This blog post is a collection of 6 CSS best practices to adopt for better and more readable CSS.ĭisclaimer: as with all best practices, these might not apply everywhere at all times. Writing CSS professionally and efficiently in large projects is harder than it seems. CSS is one of the easiest web languages to learn, which is why we underestimate it.