Welcome to your friendly guide on the Sky CSS Style Guide, an evolving resource for writing cleaner, more maintainable CSS and Sass code. Whether you’re a novice seeking the right style or an experienced developer aiming for consistency, this article will be your trusted companion in styling your projects.

1. Writing CSS & Sass

Template

Before you jump into coding, grab yourself a Sky-conformant .scss template. You can easily retrieve it with the following command:

curl -L git.iotemplate -o _your-file-name.scss

2. Architecture

Think of your project stylesheets like a multi-story building, where every floor has a specific purpose. To ensure that each component has its place, follow the structure closely based on ITCSS principles. Your ultimate aim should be increased reusability and specificity, organized in the following order:

• Settings: Global configuration and variables.
• Tools: Mixins and functions.
• Generic: High-level styles including resets.
• Elements: Base HTML styling.
• Objects: Non-cosmetic structural design patterns.
• Components: Specific UI elements.
• Utilities: Helpers and overrides.

3. Formatting

To keep your stylesheets readable, adhere to these formatting rules:

• Use soft tabs (2 spaces) for indentation.
• Employ lower-case hyphenated naming instead of camelCase.
• Keep spaces consistent around brackets and colons.
• Leave an empty line at the end of a file.

4. Selectors and Naming

Transparency is key. Avoid using HTML tags or IDs in selectors. Keeping the selectors flat, at the same level of specificity, helps readability. Also, here’s a naming convention you should embrace: BEM (Block, Element, Modifier).

.block {
  // styles
}
.block__element {
  // styles
}
.block--modifier {
  // styles
}

5. Properties Order

Order your CSS properties like a well-organized library to enhance readability:

1. @include
2. Structure:
3. Typography:
4. Cosmetic:
5. Native Interaction:
6. Pseudo-elements and Pseudo-classes
7. @media queries

6. Extending and Modifying

For a smooth sailing CSS experience, avoid using @extend. Instead, opt for creating new modifier classes to keep your stylesheet clean and efficient.

7. Specificity Management

To avoid specificity wars, stick to using classes and limited nesting. If you find yourself battling overridden styles, a handy trick is to double your selectors to increase specificity safely.

8. Linter

To ensure your CSS follows the guidelines set forth, you’ll want to use a linter. Here’s how:

Installation

Install the required CSS linter using:

npm install stylelint-config-sky-uk --save

Usage

Run your linter over your .scss files with the command:

stylelint **/*.scss --syntax scss

Troubleshooting

Encountering issues? Here are some ideas to get you back on track:

• Check your indentation and ensure you’re using soft tabs.
• Verify your naming conventions; they should be clear and consistent.
• If modifications aren’t applying as expected, review your specificity.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Resources

For additional reference, explore these links:

• CSS Almanac (CSS-Tricks)
• MDN Web Docs
• Semantic Versioning