DevsZone gives you some tips to write a CSS that is clean, efficient and useful.

Writing better CSS doesn’t have to be a painstaking ordeal. A few minor adjustments to how you work within your CSS code file can have a big impact. In this article, we’ll take a look at some tips to write a CSS that you  can improve your CSS skills and write cleaner, more efficient, and better CSS code.

1.     Start with a CSS Reset

CSS Reset gives you a clean base to work.

CSS Reset allows you to start with a clean base, making it easier to style your website, with more predictable outcomes across the board.

A CSS Reset resets or overrides the default styles of the browser. You may write your own, use one of the many resets available online, or use a combination of the two.

2.     Know when to use CSS shorthand

DevsZone gives you a way is Shorthand should reduce your file size and help speed up load times

CSS shorthand enables you to set multiple properties of an element in a single line. Using shorthand saves space and takes less time to load. However, you shouldn’t use it for everything.

Sometimes longhand provides much-needed clarity. But more importantly, when you only need to set one or two properties – or you simply need to override something – longhand may actually be better.

3.     Keep it DRY

Quite possibly the best advice for writing better CSS code is to follow the DRY methodology. DRY means ‘don’t repeat yourself’ – essentially, don’t use the same bits of code over and over again.

One way to keep things DRY in CSS is to group things together. Let’s look at an example.

Original CSS

.menu li {

color: red;

}

.menu li a {

color: red;

}

Refactored and DRY

.main li, .main li a {

color: red;

}

As you can see, not only will this reduce the overall size of your CSS file – which creates faster load times – but you’ll also benefit in the area of maintenance too. If the color property needs updating, you’re only updating it one spot.

You can also use CSS custom properties to help stay DRY. Custom properties are created like so:

:root {  –primary-color: red;}

And then can be used anywhere within your CSS code, as often as you’d like:

.main li, .main li a {  color: var(–primary-color);}

05. Keep consistent

Regardless of how you write your CSS, and in which order you add the properties, keep it consistent. Some people order their properties alphabetically, while others use more of a logical approach – for example, organising things by line length or type. I opt for the former, but it’s entirely up to you. The bottom line is whatever you choose, stick with it so it’s easy to find things later.

06. Name things intelligently

Use a standard naming convention for your selectors

This seems like a no-brainer, but when naming your selectors, don’t get overly complicated. Be succinct and stick with a standard naming convention.

Some things to consider when coming up with your selector names:

• Avoid presentation words: These are the ones that involve colour and display location (for example, green-text or top-menu-bar)
• Only use lowercase: CSS is case-sensitive, so don’t create names like, MeNuBaR. It should be noted, however, that camel case (menuBar) is an acceptable practice, just not preferred in some cases
• Separate multiple words using a dash: For example, main-menu. You may also use camel case (mainMenu), but again, this is often not preferred
• Don’t be too specific: You’ll end up using multiple selectors for the same type of element. For instance, list-one and list-two can be combined, creating a single list-items

DevsZone rounded up some tips to write a  CSS for designer. These are helps you a to create a design.

Our main target is our client’s satisfaction to provide best web design or development.