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

CSS

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

CSS or HTML logic in BG

Steve Hunter - I pressed the 'ASK' by mistake.

HI,

Imagine, straighr away as you read this, imagine a website, a parallax website.

It's using BEM and SMACSS + OOCSS as archtecture.

Now, It has few sections. One section is white, the other one is grey. The brand color is green.

Section 1 - white
Section 2 - grey
Section 3 - white
Section 4 - grey
Section 5 - green

How do you make this in a good format? e.g. background-primary color white background-secondary color grey, brand-color-bg color green?

Or how would you do it? Witout putting in HTML bg-white, because what if that white is going to be red in future.

Yeah - I got the message. Sorry, but I don't know how to help you with that. I'd have to play with it to see what works.

Good luck!

Steve.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I send it by mistake, my bad sorry. I know you don't do web-dev, but somehow you were in the recommendation list.

I'm no good at styling - I prefer back-end development.

1 Answer

Greg Kaleka
Greg Kaleka
39,021 Points

Hi James,

You'll want to use a CSS pre-processor like SASS. You can use variables like brandColor, and be able to change the value of that variable in a single place, changing the styling of your entire site.

Take a look at the courses available here on Treehouse. You'll need to be pretty comfortable with plain CSS before getting started, though.

Cheers :beers:

-Greg

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

James? :D

Hi Greg.

I'm very comfortable with CSS and sort of Sass, but enough to get the work done. I just need a little help on how I can make sections that are good.

Like home-block--primary, home-block--secondary? primary is white, secornday is grey.

SOmething like that?

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Ok, basically, look at this and you see the white, grey and the brand name color in the bottom?

How would you name it, or do it?

Kevin Korte
Kevin Korte
28,149 Points

I'd focus less on class names, and more on the doing. Class names dont really matter much, in fact I'm not much of a fan of structuring class names like that at all.

Why not just call the sections what they are, and apply your styling rules to it? You can use Sass variables to easily modify it like Greg mentioned. No one really cares what your class names are, just what's one their screen.

I think you'll learn more by just diving in and doing - don't be afraid to make mistakes, you'll learn from them.

Greg Kaleka
Greg Kaleka
39,021 Points

Yes, Bond. James Bond. Treehouse is a friendly place, so I assumed first names were ok :wink:.

Agree with Kyle - don't worry too much about your class names, or planning out how you're going to structure your site perfectly before you start. You're learning; jump in! You can always refactor later :blush:.

If I were building a site like that with alternating color sections, I actually wouldn't give the two section types different classes. Instead I would wrap the whole thing in a div, and write a CSS rule for even and odd children of that div. That way if you decide to re-order or add or delete sections, your styling will still work. In the case of the site you linked to, odd children get grey, even children get white. Then for a brand color row, I'd just give it a class of brand-row or something like that, or as Kyle suggested, just give a descriptive class, and then write your rules.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Who's Kyle, Greg? xD Kevin xD

Kevin, I know, but I want to learn SMACSS, BEM, OOCSS, ATOM etc.. I mean, I want to have a good structure, and think about this as, ATOM way or SMACSS or BEM way etc.. so I was just wondering about it.

The way I did it is i did something like bg--prim, bg--sec, br--prim( as thats primary). Like here.

I know it matters what's on the screen, but if the code is too bad.. I don't think this will work in future, it will be hard to maintain and scale, and pain to work with.

I don't know, do you think this is a good piece of code at least from the HTML or CSS way of looking? here What is is that the employee want's from a front-end developer to do? WOuld that be enough, plus my portfolio etc.. I really want to get that job.

I'm trying to make few masterpiece work, to show them off when I go to apply for a coding job. I have finished one site, now I finish this site, and I want to send the CV's everyhwere. So I wanted it to have goo dstructure and be on the standard level in the industry, i know other people, like Tom that we see him often, read books like ATOM.

Kevin Korte
Kevin Korte
28,149 Points

I know Aurelian, and I appreciate how much energy you've spent learning these techniques, but I know you've been working on this for months know - I just want to push you to move on, and learn and adapt your html and css as you figure out what does and doesn't work. What you're talking about is a lot of theory on how to best structure your code, but that sometimes breaks down on a real website, and you're left to only being able to adapt and overcome, something you can't learn from a book.

Employers won't be as impressed with what you learn from a book, they'll be impressed by how you can (or can't) adapt and overcome situations, something a book won't teach you.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

xd you're absolutely right on what I was thinking. Though what I know now, from what I understood, is enough in this area. I have the understanding on how these methologies or theory works, I know that in real life, that's common, so I could addapt a lot quicker if I was to work in a team, unless they have a totally different architecture, but then, I should be able to adapt it quicker as now I understand and I know that there is something like archtecture.

If you remember my code from 6months ago, id's everyhwere, repeated code everyhwere, messy code, it was horrible. I'm happy with what I'm doing now, though I still feel I'm lacking few parts.

I suppose, If i know enough CSS, or at least to do or move around with it, (of course, soemtimes I get off and do stupid simple mistakes or ask questions about that..) though like everyone right.

So, I should really go and focus now on JavaScript, I suppose? Pure JS. I feel confident in my HTML/CSS, Sass(Sass kinda, as there is soo much of stuff going on). I feel the one thing I'm missing, is JS, and maybe github to collaborate(though that is learned at the job, right, I know the basics of it anywas).

Kevin, what would you suggest me to do? I want to apply to jobs in the UK, in few days, I'm gettting the site to show them ready, and my CV as well. I have 500pounds, which is enough for about 3-4weeks living in the UK. As i need to get a plane ticket, and then a bus ticket, ok, 500pounds is probably worth of 3weeks with those tickets, i could cut on the food too...

Though I want to apply for mc-donald job, just in case, as for coding jobs too. Though I want to go, as I'm in Poland now.. and I need to get out from here in January too.. I would stay in Poland but i need to go back to UK, because of the law they have for british pasport stuff..

Do you think If i get ready my CV for mc-donald, print it, and get ready my coding stuff, and start sending it online (i know it can take a month+ for coding), it's ok for me to rent a house, say 70pw and about 30pounds pw for food, thats 100per week. And try to find a low job, because I should get it right, why shoudn't i get a mc-donald job. Then I can work my self up with coding.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

If I want to move to UK, I need a house, right?

So, I should look online for a house, and book it with credit card, i got 500pounds.

Then buy my self a ticket, after i get the house. Start looking at any jobs.

That's a good plan? ish

I finally need to do something, so I decided that I'm going to find a house, books it straight away and fly there, who cares if i get a mc-donal job, important thing is to be independent.

I mean, I need to do this.. I'm now with my grandmother.. and I wont ask her for any money, not to mention the currency here is worth nothing in other countries. ANd If i was to start working here in Poland then.. oportunities for me, bye bye. Well, I need to improve my speaking and so on. Plus Poland is a different culture.. it's like learning JS and then not finishing and learning C++... I'v got too big of a mess.. Italy, English, Poland, ENgland this here.. ANd I don't speak any language well. Maybe ENglish is my main now, which is totally crap.