Ken's suggested edits

[ksheedlo]

Large web applications generally have a lot of css files and many developers working on them simultaneously. With the advent of so many frameworks, guidelines, tools and methodologies like OOCSS, SMASS, BEM, etc. there needs to be a CSS architecture which describes a way to author it which is maintainable, manageable, and scalable.

SMASS SMACSS

there needs to be a CSS architecture which describes a way to author it which is maintainable, manageable, and scalable. developers need a CSS architecture that is maintainable, manageable, and scalable.

Sit tight! More edits coming.

[ksheedlo]

Elements of Component CSS section

1. You never explain why you chose to borrow from SMACSS and BEM. Without changing the structure of the article, you could add a short (1-2 sentence) blurb describing what you like about each one. Or you could add a story explaining how one of these methodologies saved you on a project (and perhaps ultimately fell short).
2. I still think you should check out Autoprefixer. Even more important than the specific tools, however, is the recognition that Component CSS is designed to go through a build system just like the rest of your frontend code. Boilerplate such as vendor prefixing and similar utilities should be handled by an automated process.

3. In the SASS section:

   Highly recommend but you can use LESS if you prefer that.

   You're a frontend engineer! It's OK to have a professional recommendation because you know what you're talking about. The way that this is worded comes across as a lack of confidence.

[ksheedlo]

A flexible and reusable css component is one which does not only exist on a specific part of the DOM tree or require the use of certain element types. If necessary, extra HTML elements should be used to make a component reusable and flexible.

"flexible and reusable" <-> "reusable and flexible" Pick one modifier and stick with it. Which one is more important, "reusable" or "flexible"?

It's like if I'm telling a story about my commute to work and I mention stopping to pick up a delicious cup of coffee. I don't talk about my delicious and piping hot and large and mildly spicy with a hint of cayenne pepper cup of espresso, unless that's the point of the story or I'm trying to be artistic! Otherwise it's kind of annoying.

[ksheedlo]

Definition from wikipedia: a highly composable system provides recombinant components that can be selected and assembled in various combinations to satisfy specific user requirements.

I already know from the header "Composable" what you're going to be talking about in this section. If you think it's important that people know this definition is from wikipedia, maybe add it to your credits at the end. Seeing "Definition from wikipedia" is really jarring and makes the article feel less like a narrative. Instead:

A composable system provides recombinant components that can be selected and assembled in various combinations to satisfy specific user requirements.

Notice also I dropped "highly", which felt unnecessary in this context.

[ksheedlo]

Most people assume CSS is self-explanatory which is not the case most times.

This is an excellent opportunity to use some voice.

Most people assume CSS is self-explanatory. In fact, this is usually not the case!

You could also add an example of how you document CSS in this paragraph, either in a following code block or by simply describing what you normally do as far as CSS documentation.

[ksheedlo]

Directory Structure section

I'm a little iffy on this. I feel directory structure largely depends on taste and what works given your current tooling. Even Angular, one of the most opinionated JS frameworks you can use, doesn't make a strong recommendation as far as directory structure.

I feel this would be better presented as an example directory structure, or not at all. It should not use a prescriptive voice.

[ksheedlo]

I like this a lot.

All components follow the modified BEM naming convention in combination with the CamelCase. This got me great wins in making other team members start following BEM style syntax. It also avoided a lot of confusion when moving away from using the typical BEM style with -, --, & symbols which generate class names like module-namechild-name--modifier-name!

The only thing is I would change "making other team members start following" to "encouraging other team members to follow". I know Component CSS is an "eat your vegetables" kind of proposition, but we should think about how it comes across as we're promoting the idea.

[sathify]

@ksheedlo Thanks for suggestions and PR.