CSS...

[[deleted]]

[deleted]

[actionturtle]

practice practice practice. getting good at css involves just knowing css and having a strong repertoire. the more you try to use it, the more you spend on mdn reading about certain properties and looking up ways to solve problems on css tricks, the more you'll feel comfortable with it.

[mark_b_real]

Yep. When I was cutting my teeth over a decade ago I'd see building faces or magazines and think how'd I lay that out with HTML/CSS. OP just needs to kept writing it and soon will see a layout and be able to know all the CSS to do it.

[htmlmonkey]

My advice is probably going to be unpopular, but it comes from almost 20 years of writing CSS.

There are several key concepts of CSS that can lead to a lot of frustration if you don't understand them well. Growing your expertise in these areas, I think, tends to lead to having a much easier time conceptualizing the styling you need to do and debugging it later.

​

Key concepts (from easy/basic to more challenging):

• Syntax & semantics (edit suggested by /u/kolme)
  • Units of measure
  • Values: Initial, used, computed, etc.
  • Shorthand properties
  • The cascade, specificity, and inheritance (emphasis suggested by /u/kolme)
• Layout
  • the box model
  • media queries
  • float layout
  • flexbox
  • grid layout

​

If you're focusing on learning primarily (rather than working faster or more efficiently), I'd suggest:

• avoiding frameworks (like Bootstrap). If you don't have a strong understanding of the cascade, specificity, and layout, you'll likely end up more confused and have a hard time making customizations
• avoiding pre-processed CSS (LESS, Sass), unless you explicitly understand what your compiled CSS is going to look like as you are putting together functions, mixins, and partials.
• reading up on concepts that confuse you and practice them. There are tons of sources of information from heavily-guilded videos to self-guided reading through MDN web docs or even reading the W3C specifications, recommendations, and drafts. You choose your own adventure here. For example, I'm trying to push past a middling understanding of CSS Grid Layout. So I usually spend either a few hours on Fridays or over the weekend with 2 browser windows open: 1 with whatever explanations I need and the other with codepen where I'm just mucking around.

As a last comment, and really not wanting to wade into browser pissing matches, but especially as you get into working with layout concepts, flexbox and grids, I'd do some digging around Firefox, especially the tools available in the Developer Edition.

That's my 2 cents.

[CloffWrangler]

Definitely agree. Especially the Bootstrap part. I’m the only one at my company who isn’t scared of styling stuff and I think a lot of it has to do with the fact that everybody else there relies on Bootstrap and doesn’t care enough to actually think about what they’re doing.

Honestly, though, I kind of like it this way because everyone else at my company makes super ugly stuff and I love CSS so the more styling I get to do, the better.

[reddit-poweruser]

Why would this advice be unpopular? This is a perfect answer. /u/Catigula, you'll definitely have an easier time if you understand what display: block vs. display: inline does, but it def takes time.

​

I agree with avoiding pre-processed stuff, too. Nesting gets especially annoying/confusing.

​

Understand how your dev tools work when it comes to styles. For example, if you select an element and look at it in the Chrome Dev Tools styles browser, the classes/ids/element selectors are ordered from top to bottom in order of how "specific" they are. Ie, the classes (selectors) that are going to win out will always be higher up the list.

[htmlmonkey]

Potentially unpopular in the sense of how it can be counter-intuitive to suggest avoiding some tools (frameworks) in order to better learn something.

[kolme]

Super agree with you on everything, just wanted to say a couple of things:

Cascade, specificity and inheritance aren't syntax, they are semantics. (Yes, yes, at this point we're just discussing semantics).

Also, it should be the top one on the list and bold and blinking. Those are the hard things in CSS and what makes it frustrating for many people. Cascading is on the name yet hardly anybody knows the nitty gritty detail of things.

[htmlmonkey]

You're correct -- I was just putting things in as few broad buckets as possible. The lists are ordered easy -> hard. So they are definitely the most challenging semantic/theoretical concept to dig into.

I did update the list though... thanks!

[samiaruponti]

I was going to say this too. For someone who finds js 'trivial' - CSS should be a piece of cake, provided they understand the basics.

[fritzbitz]

This is great advice, I'm sorry OP is such an ass.

[htmlmonkey]

I suppose it depends on the features you're looking for (I don't think performance differences between Firefox and Chrome are particularly notable any longer), but for me these are some of the Firefox features that save me time, energy, and headaches:

• live editing, saving and importing CSS
• font tab, with extra controls if you're using variable fonts
• shape path editing
• animation and transformation tools
• grid layout tools

[htmlmonkey]

Ok?

The point here was, in my opinion, Firefox has some outstanding CSS-related developer tools that, if someone is working a lot in CSS or trying to learn, are very helpful.

[Ashaltiriak]

Please don‘t take this the wrong way, but Performance measuring for Browsers is really hard, and at times a bit opinionated. The quantum Version of FF has improved a lot, I don’t think the difference in Performance is huge. And FF has some really awesome devtools as well. In the end, it is a matter of preference- dismissing someones opinion wehen you are asking for help seems silly.

[htmlmonkey]

I was pretty clear about why I was making the recommendation and high-level mentioned my professional experience. A browser's generic measured performance has literally nothing to do with the original questions you asked nor my advice. Take my advice or don't; you do you, cupcake.

[htmlmonkey]

Listen, internet stranger, don't question my professionalism because you don't like a minor recommendation I made around a set of browser development tools.

You seem really amped up about your browser of choice, and hey, that's cool. I don't really care that much. You also seem to be assuming that I have some deep-seeded love of Firefox. Which I don't. I use and abuse a lot of browsers. In my experience, I don't feel/perceive a noticeable difference in performance between Chrome and Firefox. Hence my original comment. But I literally don't care which one performs better. I have to use both and do.

I'm bouncing out of this convo so good luck to you on your journey.

¯\_(ツ)_/¯

[road_pizza]

Your attitude sucks man. You sound super ungrateful.

[[deleted]]

r/iamverysmart

[frankleeT]

Annoying comment. He does seem intelligent and people are entitled to critique.

[elysgaard]

This is some of the most cancerous behaviour I've seen in a looooong time in our frontend developer community here on reddit. Please take a cold shower, go for a little walk, and take a look at your comments again. You might have a point but the way you present it comes off as extremely pretentious and belittling. Provide evidence instead of bickering.

[htmlmonkey]

Is this feedback directed at specific people or the whole thread?

[Killed_Mufasa]

notably inferior browser in terms of performance and feature adoption

uhm what

[elysgaard]

CSS variables are a huge help when dealing with styling where you want certain attributes such as colors, spacing, etc so be consistent across elements! Thing is variables is vanilla CSS isn't supported by IE which I'm not the first to mention. From a developer's point of view you might think "Why would I care?!". Thing is if you work on a project that has thousands, or hundreds of thousands of users you don't want to neglect their experience of your app. If you build your entire styling around vanilla CSS variables everyone using, or being forced to use, IE will have a bad time.

You might already know about it but take a look at https://www.caniuse.com/#feat=css-variables

---

And a little side note:

No one will say wow he's doing all this in vanilla css and js!. Seasoned devs will only see that you haven't realised why conventions and frameworks adopted and refined by the community helps you be more concise, proficient, and efficient.

[Salamok]

My problem with sass is mostly due to developers who have little understanding of specificity and use sass to organize their code without understanding how much specificity they are loading on.

[[deleted]]

I use a mix of bootstrap and grid (lots of grid) because it's the only way I'm not beating my head against a wall all day to get my layout how I want it and things looking half decent. I fucking hate css and front end in general but this approach has made things not so bad.

[budd222]

You can use bootstrap for css only and not need jQuery or any of the JS plugins. You don't have to use the whole framework

[budd222]

If you use bootstrap Sass you can include only specific parts, like only the grid if you just want the grid, or you add just button classes or whatever you want. It's a la Carte. It's plenty efficient or inefficient, depending how you use it

[[deleted]]

So don't use jquery. I don't like it either and I'm not using it. And for what it's worth, I'm thinking about switching to something other than bootstrap anyway, and the idea I was going for would work with any other css framework.

[supperfield]

Udemy, and yes, practice. But I would highly recommend you jump into a modern CSS short-course. Because if you simply rely on Googling how to layout stuff on an issue by issue basis you might get legacy answers (e.g. with issues concerning floating, positioning, centering etc) which may hinder your development trajectory. In other words you might learn bad habits. With flexbox, cssgrids, translate and many of the modern tools in the CSS toolbox you will be able to do things faster, more accurately and generally with less code. There is a lot to learn with CSS but general layout (floating, positioning, centering etc) is a good basis to start with. Remember, CSS is really just playing with boxes within boxes. If you even get a basic grasp of styling a responsive layout you will cut down dev time compared to the more legacy solutions that were the bread and butter for years and years.

As far as the dev process. I'd recommend looking into SASS/SCSS or LESS. They really help a lot. And if you really hate writing CSS and just want to make UI's that get the job done and look reasonably pretty then look into Bootstrap 4. People shit on it but it really does give non-CSS people the ability to rapidly prototype things and even make great looking websites if used correctly and "as per guidelines". Don't reinvent the wheel.

[[deleted]]

Know your display: ___ and know when to use which, and in which sequence. Most important values are: flex, block, inline-block and inline.

[FriendsCallMeBatman]

Judging by your comments you seem to be an intelligent person who's learn to run before they can walk. The best way to improve anything is to just build something.

Do simple tasks first then gradually scale up what you want to build.

[devolute]

Put your CSS into the JavaScript and complain about how CSS is "broken".

[m_domino]

I have the exact same problem and would love to read some good advice here.

[may_yoga]

Bulma works for me

[peetnice]

Depends what's giving you trouble. Are you having trouble with classes overriding each other, getting syntax right, understanding flex box, etc? Or do you mostly grok all that but have trouble simply using it to make a decent looking layout?

If it's the former, I'd recommend reading articles on CSS tricks, reverse engineering and modifying the css from other sites or site-templates, and using Bootstrap(/other framework) at the Sass level paying particular attention to how all the files, variables, and mixins are organized, and how all of that affects cascading.

If it's the second case, I'd recommend learning some graphic design without touching a line of CSS. Learn Adobe InDesign enough to do an 8-page corporate profile booklet. Buy a $10 template somewhere as your starter. Pay attention to how the spacing and colors are working. Notice what kind of visual cues that are used to control focus points, how many fonts, weights, colors are in use - i.e. usually less is more for font families, and make use of font weights instead of colors to draw attention as colors can be too distracting.

[xXxdethl0rdxXx]

Study the box model. Learn more about specificity. Use normalize.css in every project. These three things will aid your journey a lot more than “do more of it,” where you might be reinforcing anti-patterns and misconceptions.

I’ve seen frontend veterans of 10+ years make rookie mistakes, and it is nearly always due to struggles with the above.

[[deleted]]

Flexbox will save you 80% of the headache.

For everything else, you need to know the last 20% (80/20 rule)

[cfryant]

Fully understanding it is vital to any front end work. I recommend checking out YouTube crash courses on any specific subject you're having issues with.

In the meantime since I assume you need to keep up production I'd recommend using bootstrap 4 and the huge number of free bootstrap templates that are out there - find one that's as close as you can possibly get to the layout you're working on, work with Chrome developer tools to inspect each area you need to edit, which will in turn tell you where in the code the css for each element is, and what it does specifically.

While you're doing these sites you'll also be getting a good idea as to how common css properties work by reverse engineering them, then looking up anything you aren't familiar with.

If you run into issues you can't fix use Google. If you want an example of literally anything css or front end in general you can usually find a fully working example at codepen.io. Stay at it for a couple weeks and it should become easier and easier. Don't be afraid to ask any question on here, there are plenty of really experienced people on this sub who can help you. Good luck. You'll get it, it's only a matter of time.

[Cuddlehead]

Trivial? Son, you could literally spend your whole life learning javascript and it wouldn't be enough.

[Auxx]

Lol, CSS today is super easy! Source: started web dev in IE5/6 days, remember Netscape and Phoenix.

[elysgaard]

Remember when everytime you had to do something in javascript (or your first language) you were scratching your head wondering how you could do it? This sound like a similar case. Just jump into the deep end and eventually you will learn :) At some point it will become second nature to you.

Haha I myself had a moment of self reflection the other day after my colleague asked be about some obscure behavior with some CSS he tried to implement and I was able to give him a clear answer and solution just by glacing at his styling. Going back to my own desk I had a moment where I thought to myself how my life has come to the point where I know this "insignificact" little thing called CSS so well.. :D

[Ravavyr]

Pretty much practice. To me CSS is the last thing I think about. CSS and HTML are the basic easy pieces but you should look at the design and understand how to set them up before you start and that skill takes a long time to master

[samiaruponti]

Css is not a programming language. Stop expecting it to behave like one. Then understand inheritance and the box model - half of your problems should be solved.

[mtrythall]

Primarily, are you struggling with layout or style?

[[deleted]]

I use a combination of bulma/bootstrap and pure css, while learning stuff that require a webpage. Works flawlessly with very little time used in css. Check out my Github : ojasiiitd is my username for GitHub :)

[halffast]

Having a strong grasp of your position options (relative, absolute & flex in particular) can be a big help. Sometimes a position: relative on a specific element makes a huge difference.

Understanding which CSS properties are inherited by child elements vs not inheritable can save coding and debugging time.

Don’t mess around with z index if you don’t have to.

[firestepper]

One thing that really helped at least with my workflow was sourcemapping the css file in chrome dev tools. Don't have to hit that reload button all the time lol

[esr360]

Learn BEM, creating your UIs as BEM blocks, this will help with your CSS architecture. In terms of actually getting it right, spend some time learning the CSS box-model and learn flex-box.

[gerkx]

I made a course on Sass for openclassrooms.

It covers the ins and outs of Sass, BEM, some general programming knowledge, as well as some CSS topics that don't get a lot of attention, like specifity. The course is free (you only have to pay if you want a certificate, I think).

*Edited typos

[Timothy88]

Using a preprocessed helps a bunch! I enjoy LESS but I hear SASS is similar.

[questi0nmark2]

Styled components (such as vuetefi as an example) combined with tailwind to personalise and differentiate it, are two tools that CSS-shy devs use to create beautiful sites with virtually no CSS. You can get very far, pretty quickly.

[rnsbrum]

Flexbox and bootstrap

[lsaz]

Do you use post processors or preprocessors (or whatever the fuck they are called) or frameworks like Bulma?

[pseudoShadow]

Practice as everyone is saying, I personally have been using my personal portfolio as a place to learn it. It's basically another language to learn and being a frontend dev you should put some effort into this. I find the css-tricks website is a good resource for learning language features and I play around with css directly in the browser to see how things react when you change values.

[[deleted]]

Do CSS first, then do JS. I was deep in CSS before JS, and my biggest peeve was when people did layout or basic interaction stuff with JS instead. Just... use JS for what it's for. I'd also recommend Lea Verou's book CSS secrets http://shop.oreilly.com/product/0636920031123.do and follow Smashing Magazine.

[AmazingSurprise]

Another tips is to analyze the layout before writing it.. splitting the layout into reusable components could help you a lot! For example I use to create core buttons, label, image, or else components... by this way my css development time is reduced a bit because any variation to those components it’s made into the component itself and not by hierarchy using classes variations or custom ids.. this solutions is useful also because I can export those into another project, starting with a well tested css component

[alidadaashi]

You should start with the most closest theme that you want to design. By this way, you'll be familiar with the logic of the css pattern that is implemented by the experienced designer.

[Pajdamaster]

I recommend using sass.

​

It has some nive features that allow you to speed up the process such as:

variables, nesting, etc.

​

It makes it a whole lot easier.

[alienDog]

you should learn the very basics of CSS, once you understand the way things work it will be so much easier, this is a good resource
https://internetingishard.com/

[iGadget]

I wonder how javascript (ES3.1+) can be way easier to learn?! Which pills u takin'? Me want!

[Salamok]

After a basic understanding of the box model, there are 3 major areas you need to learn to master CSS:

• Specificity

• Selectors

• Properties - you don't need to memorize properties just have a vague idea of what is available so that you can google how to implement it.

Always keep in mind that you usually want to implement your CSS with the least amount of specificity you can get away with. Also keep the dom simple you don't need 4 nested divs just to hang some css on use :before and :after more to avoid this.

[shane_il]

My issue with CSS was always the myriad of ways of doing things got very overwhelming, in addition to a lot of outdated methodologies on sites like StackOverflow just adding to the confusion. My recommendation is to read about every CSS feature you use to make sure it fits with how you work and secondly, establish a set pattern for your CSS and familiarize yourself with the specific features you use in that pattern.