This article is continuation of a previous piece that covered both HTML and CSS. Here, the focus is on CSS alone. My intention is to give you, the reader, many different viewpoints. In this article, several industry experts will share their knowledge with you.
The first set of tips comes from Dustin Montgomery:
Consider using a framework such as Bootstrap to begin. It has many default CSS styles and settings that make sense for the modern web. Using it will improve your development time and you will learn some good development habits as well.
Embed small SVG files in your CSS files. This saves the page from having to load that SVG file separately. You can do this by copying the contents of the SVG file into the CSS element.
When using CSS files created by someone else, only use what you need. This cleans up your file and saves the user from downloading needless rules. You can do this with Chome’s Dev Tools .
Stay up to date on the latest CSS developments by reading the drafts at the W3C. There is a good chance those things could end up as a standard in the future.
Here are some perspectives from Brandon Connolly:
Brandon finds code snippets in two different ways, by browsing to learn something new, or when troubleshooting an issue. When browsing for something new, he uses Codepen.io, and Github.com. When troubleshooting an issue, he finds code snippets on stackoverflow.com or Mozilla Developer Network.
He organizes CSS based on the cascade, the HTML markup hierarchy. He uses several files, each dealing with a different function of CSS, such as grid.css, typography.css, and blog.css. He tends not to break out new CSS files for partials since each partial is usually only a few lines of code (partials are repeatable elements on a website).
The next round of information comes from Lauren Fach and Christopher Peterson, a computer science student at University of Advancing Technology (UAT) in Tempe, Arizona.
Whether to use multiple files or not: It depends on the situation. Not every page on a website needs the same CSS. For example, if you’re putting a calendar on an “Events” page, you don’t need that CSS on the “About Us” page. Putting the CSS in its own file keeps everything organized and reduces loading times on other pages.
You can have a CSS file for the main layout of your website which you include on every page; you can have a CSS file for the calendar; you can have a CSS file for a “Contact Us” form. This makes it easy to make specific changes; you don’t need hunt for it in one large file.
When a browser interprets a CSS file, it does everything line by line. If, at the top of the CSS file, you say “make this text green” and then later say, “make this text purple,” it will make the text purple. This allows you to override your previous CSS if you want to make a certain part of the website appear in a different way.
When coding, it is a good idea to get the CSS for the base of your website out of the way at the top, then add specific CSS elements for the website at the bottom, while making sure keep similar things together. Here is an example:
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}These set what color a link should be based on what has happened so far. If the link hasn’t been clicked, it’s green; if the link has been clicked, it’s also green; if the user’s mouse hovers over the link, it’s red; and if the user is in the process of clicking the link, it’s yellow.
The last grouping of tips comes from Britton Lorentzen. Here’s what he uses:
At most, Britton uses three CSS files that pertain to these major components of his websites:
- General CS: This is the file that has all the components for a website, including settings for the layout, typography, and primary components, such as buttons. This is implement on every page on the website.
- Information Pages: This CSS is for pages with a lot of informational content, such as blog pages and forums that are text-heavy. This requires an information architecture that clearly displays the content.
- Transaction Pages: This section is for e-commerce pages, which includes components such as item boxes, description modals, and pages pertaining to the checkout process.
Creating styles by type reduces the server load, allowing the website to load faster. This is especially important with a mobile device.
Resources for CSS Standards
Resources for Code Snippets
About the Author
Nathan Segal has been working as a freelance writer for 18 years. In that time he has published more than 1,000 articles and has written 9 books. You can learn more about him at http://NathanSegal.org.
