Everyone loves shortcuts. Whether you’re a new CSS developer or a seasoned pro, it never hurts to learn some new, easier ways to do things. It’s the trademark of our times: we want the best result possible in the least amount of time.
Tips and tricks are not often taught in classrooms, whether they are online or in person. You often just have to learn them through experience or by talking to seasoned developers. Luckily, this list is here to help. The following ten tricks can help both newly self-taught and seasoned programmers alike.
1. One liners are your friends.
You really want to keep CSS declarations in one line. Using multiple lines might look prettier, but it will be a nightmare when you have to go back and find something in your code. Having everything on one line makes scanning the document much quicker, since it allows you to see more on a page. When looking for a particular piece, you can simply scan for the ruleset you’re looking for, and find the property you want, since there are rarely that many. Viola, you’re done.
2. CSS shorthand exists for a reason, use it.
Avoiding shorthand is for beginners. Shorthand CSS gives you a shorter way (surprise) of writing your CSS code, which not only saves you typing time, but also makes the code cleaner and easier to understand.
You can waste time writing code like this:
.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
Or you can simply write it like this:
.header {
background: #fff url(image.gif) no-repeat top left
}
Your choice.
3. Use reset.css across browsers.
Different browsers, like Firefox, Internet Explorer, or Safari, all have different ways of rendering CSS styles. By using reset.css you can reset all fundamental styles and start with real blank new stylesheets. This is extremely important, since it helps reduce browser inconsistencies in things like default line heights, margins, font sizes of headings, and more.
4. Know the difference between “class” and “id”.
This is often a confusing distinction for beginners. When working in CSS, class is represented by a dot “.” while id is represented by a hash “#”. Conceptually, class can be reused while id is used on style that is unique and doesn’t repeat itself.
5. Match images to site color scheme.
This is more of a visual trick than a coding trick, but it’s still an important one. You can completely change the cohesiveness of a site by using CSS to apply tones to grayscale images. Using high resolution PNGs and CSS filters, you can match any portrait to an event’s color scheme or any site photo to a business’s company colors. You can even reuse images across multiple themes by adding a new CSS rule for each.
6. Watch your image size.
For responsive design layouts, you want to optimize images for each layout to reduce scaling and bandwidth issues. Make use of JPEG, GIF and PNG-8 file formats. Try not to use PNG unless it’s completely necessary (say, for the trick above), because it can increase your files sizes by five to ten times.
7. Take advantage of debugging tools.
While tweaking your CSS, it always helps to get an instant preview of your site to help with finding problems and debugging your code. You can find a number of CSS debugging tools online that you simply install on your browser. The best debugging tool actually depends on the browser you’re using, so make sure to look up different options for Firefox, Internet Explorer, or others.
8. Consider a mobile first strategy.
If you’re not familiar with mobile first design, it simply means building the mobile site first before scaling up to build tablet and desktop designs. It’s critical to work with mobile designers who are capable of doing this, and for CSS developers, one of the biggest benefits of adopting a mobile first strategy is to see the way text and logos are viewed. If text is easy to ready on a mobile device, then it probably won’t be an issue on a desktop or tablet. However, text that is easily readable from a computer might not be that readable on a mobile phone.
9. Keep your code clean.
Having a clean code is especially important with responsive design. If you have a messy code, you’ll have a hard time referring to previous code, and the whole thing will turn into a giant mess. As you write, create proper indentation and comment them properly. As you review your code, strip away any nonessentials, which will not only help things look clean, but also improve page loading time.
10. Look at other sites for inspiration.
Often coming up with ideas is one of the hardest parts of CSS design. Go through some of your favorite websites and identify components of each that you really like. You shouldn’t copy and entire site’s design, but it often helps to isolate aspects that could be useful in the site you’re building.
Tips and tricks are not often taught in classrooms, whether they are online or in person. You often just have to learn them through experience or by talking to seasoned developers. Luckily, this list is here to help. The following ten tricks can help both newly self-taught and seasoned programmers alike.
1. One liners are your friends.
You really want to keep CSS declarations in one line. Using multiple lines might look prettier, but it will be a nightmare when you have to go back and find something in your code. Having everything on one line makes scanning the document much quicker, since it allows you to see more on a page. When looking for a particular piece, you can simply scan for the ruleset you’re looking for, and find the property you want, since there are rarely that many. Viola, you’re done.
2. CSS shorthand exists for a reason, use it.
Avoiding shorthand is for beginners. Shorthand CSS gives you a shorter way (surprise) of writing your CSS code, which not only saves you typing time, but also makes the code cleaner and easier to understand.
You can waste time writing code like this:
.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
Or you can simply write it like this:
.header {
background: #fff url(image.gif) no-repeat top left
}
Your choice.
3. Use reset.css across browsers.
Different browsers, like Firefox, Internet Explorer, or Safari, all have different ways of rendering CSS styles. By using reset.css you can reset all fundamental styles and start with real blank new stylesheets. This is extremely important, since it helps reduce browser inconsistencies in things like default line heights, margins, font sizes of headings, and more.
4. Know the difference between “class” and “id”.
This is often a confusing distinction for beginners. When working in CSS, class is represented by a dot “.” while id is represented by a hash “#”. Conceptually, class can be reused while id is used on style that is unique and doesn’t repeat itself.
5. Match images to site color scheme.
This is more of a visual trick than a coding trick, but it’s still an important one. You can completely change the cohesiveness of a site by using CSS to apply tones to grayscale images. Using high resolution PNGs and CSS filters, you can match any portrait to an event’s color scheme or any site photo to a business’s company colors. You can even reuse images across multiple themes by adding a new CSS rule for each.
6. Watch your image size.
For responsive design layouts, you want to optimize images for each layout to reduce scaling and bandwidth issues. Make use of JPEG, GIF and PNG-8 file formats. Try not to use PNG unless it’s completely necessary (say, for the trick above), because it can increase your files sizes by five to ten times.
7. Take advantage of debugging tools.
While tweaking your CSS, it always helps to get an instant preview of your site to help with finding problems and debugging your code. You can find a number of CSS debugging tools online that you simply install on your browser. The best debugging tool actually depends on the browser you’re using, so make sure to look up different options for Firefox, Internet Explorer, or others.
8. Consider a mobile first strategy.
If you’re not familiar with mobile first design, it simply means building the mobile site first before scaling up to build tablet and desktop designs. It’s critical to work with mobile designers who are capable of doing this, and for CSS developers, one of the biggest benefits of adopting a mobile first strategy is to see the way text and logos are viewed. If text is easy to ready on a mobile device, then it probably won’t be an issue on a desktop or tablet. However, text that is easily readable from a computer might not be that readable on a mobile phone.
9. Keep your code clean.
Having a clean code is especially important with responsive design. If you have a messy code, you’ll have a hard time referring to previous code, and the whole thing will turn into a giant mess. As you write, create proper indentation and comment them properly. As you review your code, strip away any nonessentials, which will not only help things look clean, but also improve page loading time.
10. Look at other sites for inspiration.
Often coming up with ideas is one of the hardest parts of CSS design. Go through some of your favorite websites and identify components of each that you really like. You shouldn’t copy and entire site’s design, but it often helps to isolate aspects that could be useful in the site you’re building.
0 comments:
Post a Comment