No Peter Griffin operating blinds gifs allowed ;)
Stephanie Eckles
Posted on
What is a problem you constantly have with CSS, or something you keep wanting to learn how to do?
For further actions, you may consider blocking this person and/or reporting abuse
Latest comments (60)
I'm struggling between PHP (Laravel) and Node. I don't really care about frontend but I want to be a backend pro, and it's hard, since I don't have a job, so I have to consider how many Laravel/Node apps are out there, and also what rate of these companies follow the latest tech, are Laravel guys or Node guys are more likely to upgrade to the next best thing? I know there are two kind of developers: one that feeds the family, and one who's looking for exciting new territories. Would hate to end up at a company where all new ideas are turned down, because "our's the only good way to do stuff and it is nearly perfect, so let's just make it work and lay back until the next bug report arrives".
Responsiveness is a pain for me. It seems I can't replicate at pixel level the mockup for various windows-sizes. You can use grid, flexbox or media query but sometimes divs just follow their own destiny :D
As a veteran marketing developer, I would strongly suggest working with the designer who is providing mockups to help them understand how some of those layout models work - then you can work with the system instead of against it :) If the designer is you, maybe do some purely creative projects to explore more how the layout systems work. Perhaps consider a mobile-first approach as well. Keep in mind that layers of CSS to modify things at every shift will ultimately have a performance impact as your compiled CSS grows, and drops in performance could mean drops in users depending on industry/what the site is trying to provide for them. That doesn't mean creative layouts have to go away! It just means a mental shift in how you may approach solutions for them. Good luck!
I want to get better at creating pure CSS art that I see other devs make that blows my mind. I don't even know where to start with that though. I do check out their code on Codepen, but it gets a bit overwhelming at the sheer length of CSS I see.
Start small - it's ok if it's full of spans that just have background color applied :) You can work up your skills! Check out @ellie_html on twitter, she's doing CSS art for most of her #100DaysOfCode and she started with almost no CSS knowledge. A little every day will take you far!
I have just a couple like this pumpkin using CSS gradients - it took me a long time, then I made a snowglobe to work on it some more. Learning Sass and depending on what you're making an HTML preprocessor like Pug that can make it easier to generate duplicative HTML might be useful. But I have a lot to learn in that area too! Good luck!
Thanks Stephanie!
I should mention I did attempt a CSS version of the Doctor's TARDIS. I'll definitely check out your work and start small next time!
distracted-jang-cfb752.netlify.app/
Nice work!!! It even vanishes, I love it!
Hello!
I have a problem with Installing ReactJS using webpack and babel.
I followed steps in ReactJS turorial but in step9 I can't handle it.
I would appreciate it if you would teach me about it.
Hope your reply.
Thank you.
Naming classes :p
Putting jokes aside that is one of the hardest problems when it comes to programming, so no reason it should not be a problem on CSS.
No matter the tooling or setup you use, you still lose some time thinking about the naming convention to use.
I used to really love front-end dev, but it has totally stopped interesting me. When I have to write JS I try to find excuses to use a language that compiles into JS that I feel more fluent in, and I feel like CSS just never clicked. I can position things and make a basic page structure, but I can't "think in CSS." I have to study a lot of other designs and sometimes pay one of our designers with a bottle of whiskey to take care of some IE bugs with me haha
The good news is, IE bugs will soon be just a distant nightmare since they are now running Chromium :)
I applaud you for asking for help though! And we need all developers to make the thing work, it's ok to not be as skilled with CSS!
Problems I am facing in current projects are
Naming convention for that I am following BEM.
Being specific with units usability i.e for font size,letter spacing,line height,width, height etc..
Any thoughts on this?
Do you mean incorporating sizing into the BEM naming classes? It depends if you're going full-in on a completely utility library similar to Tailwind or if you're supplying a few classes for properties that enhance components in predictable ways, like elevation and spacing from Material.
Most sizing is a number that is either an arbitrary scale that says nothing obvious about the result, or is implied as a multiplier (like x * 8px for an 8px baseline grid) or involves some type of metaphor, the popular one being "t-shirt sizing" (xs, sm, md, lg, xl). And then there may be breakpoint modifiers thrown in depending on what the sizing is in relation to. They all have their place, but ultimately being sure to document and being consistent will help. You may want to do some comparison of existing frameworks and design systems. Viewing sizing in context of a mature component system may help identify what will work for your project. Good luck!
No that's not what I meant.
It's regqrding the units use px,vh,vw,rem,em etc.
For font size I can use px, rem, em but don't know why to choose particular unit.
Gotcha! Then the article I linked will provide some additional info on spacing for typography and other scenarios: Guide to CSS Units for Relative Spacing
Thanks
Text scaling is kinda hard.
Are you referring to responsive (fluid) text scaling? Here's one approach: css-tricks.com/snippets/css/fluid-...
Or are you referring to setting up a typographic scale? This tool does an excellent job showing the "popular" scales and you can even select a Google font to preview with: type-scale.com/ (I would suggest using
remunit for base typography scales, you can learn why in this post)Thanks for those links...definitely will go through them.
It can do amazing complicated things rather simply, but sometimes simple things are complicated and inconsistent to implement
cool stuff! Me too. :D Give me a million rows table to build a database without repetitions, but never ask me to make a frontpage for my app!
Well put! But improving every day thanks to browsers becoming more comparable 🙌🏻
I love & enjoy CSS but still can't wrap my head around grid & animations
Have you tried out Grid Garden for a fun way to practice grid syntax?
I was confused about animations until I realized keyframe animations and animated effects using
transformandtransitionwere not one and the same. Most of the time I can accomplish what I need to much more simply with the latter. I have a recent post on animated captions that also uses grid :)thanks for the tip Stephanie, I'm currently fiddling with grid garden, as for the animations, I found a good free 2-hour course on scrimba.