Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Gavin Broekema
Full Stack JavaScript Techdegree Student 22,443 PointsStarting with Sass?
So I'm finally at the point where I feel comfortable using the documentation and other resources to create something of my own. With that being said, I've been having an extremely rough time getting everything organized enough to create a tangible product. I understand vanilla CSS fairly well, but the idea of creating modular code with Sass and BEM has left me confused on how I should start my project...
So here are some questions I'd love to get your perspective on, my dear Treehouse Community,
Are my feel like my time and efforts are being wasted if I don't start with a pre-processor right away?
OR should I just write vanilla CSS as succinctly as possible then refactor over to Sass, or start with Sass right off the bat?
As far as BEM and other naming conventions go, how would name the not-reusable parts of my page, such as the main-header (which would only be used once at the top of the page)?
Say for instance I were to make a card/post component that relies on several other content parts. Should I create styles outside of that component, or nest the styles (such as a profile icon) inside of the .post or .card class?
P.S. The site I'm working on is essentially a social media feed that is really just for design and practice purposes. Taking the Sass courses here on Treehouse has been extremely liberating in terms of understanding DRY and Modular CSS concepts, but I'm a mess not that I have to start off on my own. (And sorry for writing a novel XD)
1 Answer
Kevin Korte
28,149 PointsValid CSS is valid Sass, so there is almost no reason to not jump into Sass now. You can use as much or as little of the Sass features as you want. The number one thing I use is the ability to break out files int smaller modules, and than compile them into one bigger CSS file for performance.
I don't nest too much even though sass makes it easy to. Nesting kind of gets messy. I generally let my naming conventions keep me from having unintended conflicts.
With that said, I also don't rigidly follow BEM or any other naming convention. I take concepts from it, but on a solo project I roll my own classes, which sometimes can be quite verbose, and I'm okay with that.
One thing I do love from is though is the is class, like is-active, is-on, etc. One thing I do try to avoid is too specific of a class name, like is-red, or blue-bg, or 16-point-font as example. If you ever wanted to change the red, blue, or font size your classes wouldn't make sense anymore. Instead I would try is-alert, dark-bg, medium-point-font as an example.
Aaron Martone
3,290 PointsAaron Martone
3,290 PointsAt a certain point, a project can be so small as to not warrant the need of Sass. If you know CSS well enough, it's all you need. Sass really shines when you get into larger projects. It starts to give CSS similar functional capability and modularity that most languages afford their developers.
Remember, Sass and BEM are not about following framework/specs rigidly. They are processes to help you write better code. Do not think you'll make the most magical thing right off the bat. As with all things, you have to just try it out, see what works and what does not.
If you have a non-reusable header, I would assume it would be a <header> element of a <section>. The reason why BEM uses class names is because the reusable components can be used more than in one place. If your element is unique, there is validity in using an ID attribute to target it. Some purists will say that you can forego classes and IDs altogether and just write selective rules, but then you're binding the markup structure to the style, which Sass and BEM attempt to avoid.
You might just be over-thinking this. Don't worry, we all do it (myself included!) If you constantly worry about doing it perfect, you'll never make progress. Find a convention that works for you. If you find yourself having a hard time finding your rules that apply to certain elements, it might be a sign you need to re-think how you organize. This thought process pays off more if you do it early, than later, because the amount of code refactoring you do can become exponential.
Aside from that, doing as you learn something has never been the best way to learn technology. But the field changes so fast, you'll find the vast majority of web developers are self taught because we're the tinkering kind. We work with something until it suits our needs.