CSS code can quickly become messy and hard to maintain if you don't follow some basic principles of organization. In this article, you'll learn how to structure your CSS code for readability, scalability, and performance. You'll also discover some useful tools and techniques that can help you manage your CSS files and avoid common pitfalls.
One of the first steps to organize your CSS code is to use a consistent naming convention for your selectors, classes, and ids. A naming convention is a set of rules or guidelines that help you name your elements in a clear and meaningful way. For example, you can use BEM (Block Element Modifier), which is a popular convention that divides your elements into blocks, elements, and modifiers. A block is a standalone component, an element is a part of a block, and a modifier is a variation of a block or an element. For instance, .card is a block, .card__title is an element, and .card--dark is a modifier.
Using a consistent naming convention for CSS code is crucial for maintaining code readability and organization. One commonly used convention is called BEM (Block, Element, Modifier), - Modifiers: Represents different states, variations, or styles of a block or an element. Modifiers are always prefixed with the block or element name and separated by a double hyphen (--). Example: `.card--highlighted`, `.button--disabled`. By following a consistent naming convention like BEM, you can make your CSS code more maintainable, self-explanatory, and easier to collaborate on with other developers. Remember to choose a convention that suits your project and team preferences and stick to it consistently.
While this may be repetitive, I'm adding regardless for the sake of emphasis, but I'm keeping my comments concise for the reader. The two most macroscopic decisions to make should be based on scope and growth, both in terms of code and team size: 1. I would strongly consider the requirement of a preprocessor or modern CSS framework which supports programmatically adding styles to your project if the application will be maintained by a team (more than 1-2 devs) and/or utilizes any type of user modifiable styling, ex. theming or personalization support. There are plenty of other caveats, but these are probably the most obvious candidates for a programmatic approach to your CSS due to sheer size and manageability. Continued ...
- Organize your CSS by using separate files and folders for categories like typography, layout, components, and utilities. - Employ a modular CSS approach like BEM or SMACSS for clear naming. - Maintain a consistent rule order, use comments for complex styles, and consider CSS pre-processors like SASS/SCSS or LESS. - Adopt a mobile-first or desktop-first approach for responsiveness, start with a reset or normalize stylesheet, group related selectors and properties, and use layout techniques like Flexbox and CSS Grid. - Prioritize performance by avoiding overly specific selectors and excessive use of !important declarations. - For team projects, use Git for version control and document your CSS code.
Another way to organize your CSS code is to group related properties and selectors together. For example, you can group all the properties that affect the layout, such as display, position, margin, and padding, in one section. Then, you can group all the properties that affect the appearance, such as color, font, background, and border, in another section. You can also group related selectors that share the same properties or values, such as .btn, .btn-primary, and .btn-secondary. This way, you can easily find and modify your code without scrolling through long lines of CSS.
Another way to keep your CSS more manageable is to break them up into smaller files. There are several ways to do so. If you’re using a framework that allows for component-based CSS or CSS modules, it help separate concerns and keep styles in scope, among other benefits. A CSS preprocessor like Sass or SCSS allows you to split your CSS code into multiple files to be compiled into a single CSS file. External libraries such as Bootstrap can help keep things organised as well.
... continued from earlier comment. 2. If there's a definitive styleguide or marketing team with strong branding for the overall image of the company, it's a good indicator that you're going to need to be very well organized and have readily modifiable styles that can be updated throughout your organization's web applications and sites quickly and with as little regression testing as possible. (Your QA team (or you, as the dev) shouldn't have to go through every page of a large company's web assets when the branding/marketing team decides they want to run some A/B testing or try a new look for parts of the company's image, product or service offering.) Hopefully this makes sense since I had to split up my comments due to restrictions.
Comments and whitespace are essential for making your CSS code more readable and maintainable. Comments are lines of text that are ignored by the browser, but help you explain the purpose or function of your code. Whitespace is the space between characters, words, or lines of code, that helps you separate different sections or elements of your code. For example, you can use comments to label your code sections, such as /* Header */, /* Navigation */, or /* Footer */. You can also use whitespace to create some visual hierarchy and alignment in your code, such as indenting nested selectors or adding blank lines between different blocks of code.
Comments in CSS are used to provide explanatory or descriptive information about specific sections or lines of code. They can help you and other developers understand the purpose or intention behind certain styles. Here's an example of how comments can be used in CSS: ```css /* This is a comment describing the overall purpose of the following block of styles */ .block { property: value; /* This is a comment explaining the purpose of this style */ Adding comments to your CSS code can make it more readable and easier to maintain, especially for complex styles or shared stylesheets. Just remember to use comments sparingly and focus on providing meaningful information that enhances understanding and collaboration.
Comments make the CSS code readable and understandable. Each comment explains in a shortcut how the lines of code impacts the UX. Sections of code can be commented before being started to understand them better. White spaces make the code less clumpsy. It makes the code more readable. Blocks of code can be seperated using white spaces, it looks much neater and becomes easier to understand.
Preprocessors and postprocessors are tools that can help you write more efficient and organized CSS code. Preprocessors are tools that allow you to write CSS code using a different syntax, such as Sass, Less, or Stylus, that offers more features and functionality than plain CSS. For example, you can use variables, mixins, functions, nesting, and inheritance to write more concise and reusable code. Postprocessors are tools that transform your CSS code after you write it, such as Autoprefixer, PostCSS, or PurgeCSS, that can help you optimize your code for performance and compatibility. For example, you can use postprocessors to add vendor prefixes, remove unused code, minify code, or fix errors.
The best way I keep my CSS organized is by using Sass (specifically SCSS). Valid CSS is valid SCSS, so you can integrate external code easily. Additionally, it allows you to nest in a manner so that related code for a section is grouped a nested-level deep within a parent element. You can also nest media queries within a selector, avoiding specificity issues as you might when using separate blocks for desktop and mobile in vanilla CSS.
A modular approach is a way of organizing your CSS code into smaller and independent units, or modules, that can be reused and combined in different ways. A module is a self-contained piece of code that represents a single component or feature of your website, such as a button, a form, a card, or a slider. By using a modular approach, you can avoid repeating code, reduce dependencies, and improve maintainability. For example, you can use a CSS framework, such as Bootstrap, Foundation, or Tailwind, that provides you with a set of ready-made modules that you can customize and adapt to your needs. Or, you can create your own modules using a preprocessor or a postprocessor, and organize them into separate files or folders.
The less CSS, the better. Building reusable classes in a /shared folder (especially with microinteractions) is as paramount as cleaning up your rendered HTML before styling. I like to have a folder for each component with an index.js file right next to an index.css file and then repeat the same folder structure for every child component. If I want to separate the index.css file into separate files specific to the component i.e. button.css, form.css, or table.css then I'm clear on what the scope of the styling is. It's always about the "next guy/girl" working with your code intuitively understanding what the purpose of the CSS is at a glance. Half the time "next guy/girl" is future you. Don't set yourself up for confusion.
If using a component-based framework like React, Angular, or Vue, you may want to consider component-based organization. Structuring your CSS files based on components by either creating separate CSS files for each component or grouping related components together in a single CSS file can lead to less complications with maintenance. This way, styles are localized and easier to find and modify. In addition, coupling this with CSS modules or styled-components can significantly help reduce the risk of global scope conflicts.
When using Vue specifically I like to utilize the "single file component" aspect, with scoped set to true. Then you have everything for your component in one neat place and no risk of class collision. But with that, make sure to break your components into small manageable pieces.
A style guide is a document that defines the standards and best practices for writing and organizing your CSS code. A style guide can help you and your team maintain consistency, quality, and professionalism in your code. A style guide can include rules and recommendations for naming conventions, formatting, syntax, comments, whitespace, modules, frameworks, preprocessors, postprocessors, and any other aspect of your CSS code. For example, you can use an existing style guide or create your own style guide based on your preferences and requirements.
Avoid using color names when naming custom css properties. For example, rather than using --white: #ffffff, use, --surface: #ffffff instead. This is especially useful for projects that incorporate light/dark themes
I create CSS documents for each web page, with media queries in separate files, to easily identify responsive changes and their impact on website visibility.
I’ll be that person to advocate TailwindCSS approach of utility classes. You don’t even have to use that framework should you have a complete aversion to doing so. Rolling your own is just as simple. The @apply method is a coming CSS spec therefore can be utilised under postcss in order to keep your HTML clean you can define well thought out component names and group your utilities under one class.
Great tips. Keep in mind, organizing CSS code is a continuous process, and it's important to find a structure that works best for your project and team. Experiment with different approaches and tools to discover what suits your needs and improves your workflow.