I mostly have a hard time evolving with new paradigms. I just have a hard time wrapping my head around whether I should use the new stuff, the old stuff, etc.
For about 7 years I was working on projects with government contracts soooo thanks to having to support older IE I pushed off learning grid (for example) until the last few months :) I also spent that time essentially evolving with Bootstrap aka offloading the decision ;) What I love about modern CSS and advanced tooling is that you can accomplish a lot with a little. That said, even when you are familiar with both "old" and "new" there are always about 7 ways to accomplish the same thing, which is probably why CSS has some negative vibes. I love that part, it fuels my creativity :)
Also be sure you understand the box model and the cascade. After that - practice! Get a Codepen account and even if it's just small works for your own benefit, your learnings can go with you anywhere! I also have a series (latest posts on my profile) called: "Modern CSS Solutions for Old CSS Problems" and I have a looot of posts planned for that :) Thanks for the encouragement, and best of luck to you!
Making icons center next to text. I use emojis because it's easy. For example, if I wanted to make a button that said upload image 🖼 and use a custom icon, the icon is never vertically centered. Oh look, even the emoji isn't centered.
Both grid and flexbox can be defined as an "inline" variant which is great for both buttons or text within a paragraph. I would recommend flexbox as the slight advantage since its default alignment is along the x-axis (horizontal).
Here's a possible solution for both button-looking links and inline links - you could swap the link to a span and update the class names:
In my role (frontend overseeing a design system impacting a large enterprise), I hear similar thinking a lot, but I'm passionate about frontend and helping others be successful! There are so many amazing resources to continue learning CSS, and it may mean taking a step back and approaching it with a beginner's mind. I have a series for beginners but two episodes evolve a blog layout and also a "card" layout. I specifically chose those because the blog shows how to begin managing general typography and content, and the card layout showcases properties for successful containers. A third episode covers expanding those to be responsive. I don't want this thread to become self promo, but DM me if you would like those links. The goal isn't necessarily to make it the prettiest but to make it functional, semantic, scalable, and accessible - principles you can appreciate from backend development, too :)
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.
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!
Typography and enhancing spacing between elements can take you a long way. You may also wish to include a reset such as Normalize. Then, choose a limited palette (to start) and experiment with adding color to improve hierarchy or help designate relationships between elements. Read up on accessible contrast as well. Here's an excellent Twitter thread from the creator of Tailwind CSS on little design tips to begin to improve your interface: twitter.com/i/events/8806882336418...
A full stack web developer with a knack for creating, learning, literature, & art. Also a cybersecurity and computer enthusiast. Interests include music, art, & writing.
I've really enjoyed using Tailwind in a few projects and once you get your tailwind.config all set up, I've found that it dramatically increases the speed and efficiency of my styling and formatting.
Even using a utility library you will find yourself with a need to compose reusable components. Learning how to name "components" of code is never a bad skill to pick up :) It helps in translating to a JS framework, or PHP files like for a WordPress theme, or communicating with coworkers and designers.
haha! if you're a Chrome user, in the Inspector tools they provide a handy additional panel you can trigger to fine tune your results :) developers.google.com/web/tools/ch...
Versatile software engineer with a background in .NET consulting and CMS development. Working on regaining my embedded development skills to get more involved with IoT opportunities.
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
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 transform and transition were 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 :)
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.
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 rem unit for base typography scales, you can learn why in this post)
A full stack web developer with a knack for creating, learning, literature, & art. Also a cybersecurity and computer enthusiast. Interests include music, art, & writing.
I think the problem I have with CSS is just trying to remember all of the little details, properties, and implementation part of the elements and the components. I do love the design side of it and figuring out what colors to use. I feel like i spend alot of time on it if I were to make a project without a CSS cheat sheet or reference and I would eventually find myself in a rabbit hole of wondering what to use. I recently been trying to look into like the CSS framework Materialize and find ways to work smarter. I am always trying to find easy to digest resources for it and find what works for me. This mostly comes from my self taught experience so far. I am always afraid of spending more time on it then I need to.
I am trying to find better resources for it and always understand it when I have downtime.
this reminds me of a video of a conference about my frustration of CSS at times. Write Less CSS
The 'contain' property is never properly and fully explained with good examples. I can't find anything really useful in it... Probably part of the reason I never see it used
It seems to be primarily an issue for floats, so I haven't encountered that issue in quite a while since moving to flexbox and grid based layouts. There are use cases for float still, but perhaps it's not well explained since it's less frequently an issue? Very interesting, thanks for bringing it up!
And that answer seems to show what I'm saying. The resources for learning about it are very limited, so you really don't know what to do with it. Yes, it can kinda fix issues with float, but a big portion of it is that it's a means of telling the browser what things will not change so that it can make optimizations with that knowledge. So, the kinda dual purposeness of it doesn't help matters either.
Excellent point about companies! The downside of it being assumed an "easy" language or "just design". I agree that grid has really changed my approach as well.
As simple as the concepts of CSS are to understand; what's not simple about them, is how browsers implement the behaviors. Until we learn those things we are mostly very poor at doing simple CSS things. The grid has cleared out a lot of that "noise" for me.
And thank you again Stephanie for your insights into CSS!!!
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'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".
Are you trying to pull in like a framework and make it work with your own styles? I'm not sure if that's what you're asking, but perhaps familiarity with the Cascade would help you? I have a post I'm happy to send you if you want to send me a DM
Oh tables, you pesky beasts! I think we will be battling those until the end of the web :)
Perhaps the calc function would help in conjunction with grid or flexbox. For a pure CSS solution, you will need to cap height to trigger overflow-y: scroll so you could subtract the height of the header and footer with calc (or other elements if it's smaller sidebar widget or something). Good luck!
How to plans Sass/Less structure for project? Some times i keep mixins and variables in same files as main Sass/Less. need extra time to optimize the Structure.
I'm a very avid Sass user, and I love the ability to prefix file names with an underscore like _mixins.scss so that the file doesn't compile to its own CSS file but you can include it wherever you need it with an import.
If it's a small project, you may be ok with one _mixins.scss file and perhaps one _variables.scss file, but if it's larger and you're creating lots of distinct components, you may nest them into the component structure like:
So that mixins and variables are local to the component but a bit more organized, and then you would import just the card file into a main Sass file to be compiled to your final. Just one option!
I mostly have a hard time evolving with new paradigms. I just have a hard time wrapping my head around whether I should use the new stuff, the old stuff, etc.
For about 7 years I was working on projects with government contracts soooo thanks to having to support older IE I pushed off learning grid (for example) until the last few months :) I also spent that time essentially evolving with Bootstrap aka offloading the decision ;) What I love about modern CSS and advanced tooling is that you can accomplish a lot with a little. That said, even when you are familiar with both "old" and "new" there are always about 7 ways to accomplish the same thing, which is probably why CSS has some negative vibes. I love that part, it fuels my creativity :)
Haha, alrighty:
Also be sure you understand the box model and the cascade. After that - practice! Get a Codepen account and even if it's just small works for your own benefit, your learnings can go with you anywhere! I also have a series (latest posts on my profile) called: "Modern CSS Solutions for Old CSS Problems" and I have a looot of posts planned for that :) Thanks for the encouragement, and best of luck to you!
Making icons center next to text. I use emojis because it's easy. For example, if I wanted to make a button that said
upload image 🖼and use a custom icon, the icon is never vertically centered. Oh look, even the emoji isn't centered.Both grid and flexbox can be defined as an "inline" variant which is great for both buttons or text within a paragraph. I would recommend flexbox as the slight advantage since its default alignment is along the x-axis (horizontal).
Here's a possible solution for both button-looking links and inline links - you could swap the link to a span and update the class names:
In my role (frontend overseeing a design system impacting a large enterprise), I hear similar thinking a lot, but I'm passionate about frontend and helping others be successful! There are so many amazing resources to continue learning CSS, and it may mean taking a step back and approaching it with a beginner's mind. I have a series for beginners but two episodes evolve a blog layout and also a "card" layout. I specifically chose those because the blog shows how to begin managing general typography and content, and the card layout showcases properties for successful containers. A third episode covers expanding those to be responsive. I don't want this thread to become self promo, but DM me if you would like those links. The goal isn't necessarily to make it the prettiest but to make it functional, semantic, scalable, and accessible - principles you can appreciate from backend development, too :)
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
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!
I never really know how to start if I have zero CSS in a project. How do I start structuring my CSS so my apps start looking a little more usable?
Typography and enhancing spacing between elements can take you a long way. You may also wish to include a reset such as Normalize. Then, choose a limited palette (to start) and experiment with adding color to improve hierarchy or help designate relationships between elements. Read up on accessible contrast as well. Here's an excellent Twitter thread from the creator of Tailwind CSS on little design tips to begin to improve your interface: twitter.com/i/events/8806882336418...
I relate to this so much. I have to plan it out and just do it and just make the functionality and look good to.
I dont know if I should learn BEM or take the leap with something like tailwind
I've really enjoyed using Tailwind in a few projects and once you get your
tailwind.configall set up, I've found that it dramatically increases the speed and efficiency of my styling and formatting.Even using a utility library you will find yourself with a need to compose reusable components. Learning how to name "components" of code is never a bad skill to pick up :) It helps in translating to a JS framework, or PHP files like for a WordPress theme, or communicating with coworkers and designers.
interesting, makes sense!
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.
box-shadow
Not even once.
haha! if you're a Chrome user, in the Inspector tools they provide a handy additional panel you can trigger to fine tune your results :) developers.google.com/web/tools/ch...
Very helpful! Thanks 🙂
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!
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.
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.
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.
I think the problem I have with CSS is just trying to remember all of the little details, properties, and implementation part of the elements and the components. I do love the design side of it and figuring out what colors to use. I feel like i spend alot of time on it if I were to make a project without a CSS cheat sheet or reference and I would eventually find myself in a rabbit hole of wondering what to use. I recently been trying to look into like the CSS framework Materialize and find ways to work smarter. I am always trying to find easy to digest resources for it and find what works for me. This mostly comes from my self taught experience so far. I am always afraid of spending more time on it then I need to.
I am trying to find better resources for it and always understand it when I have downtime.
this reminds me of a video of a conference about my frustration of CSS at times. Write Less CSS
The 'contain' property is never properly and fully explained with good examples. I can't find anything really useful in it... Probably part of the reason I never see it used
Well hey, you just taught me a new property! developer.mozilla.org/en-US/docs/W...
It seems to be primarily an issue for floats, so I haven't encountered that issue in quite a while since moving to flexbox and grid based layouts. There are use cases for float still, but perhaps it's not well explained since it's less frequently an issue? Very interesting, thanks for bringing it up!
And that answer seems to show what I'm saying. The resources for learning about it are very limited, so you really don't know what to do with it. Yes, it can kinda fix issues with float, but a big portion of it is that it's a means of telling the browser what things will not change so that it can make optimizations with that knowledge. So, the kinda dual purposeness of it doesn't help matters either.
Grid has upped my CSS finesse. Without it, my CSS chops are bad. Companies want CSS fixes in hours, not days or weeks.
Excellent point about companies! The downside of it being assumed an "easy" language or "just design". I agree that grid has really changed my approach as well.
As simple as the concepts of CSS are to understand; what's not simple about them, is how browsers implement the behaviors. Until we learn those things we are mostly very poor at doing simple CSS things. The grid has cleared out a lot of that "noise" for me.
And thank you again Stephanie for your insights into CSS!!!
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'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".
For me, learn how to use external css and html file in one html which based on flexbox.
It can be challenge to fit all files in one.
Are you trying to pull in like a framework and make it work with your own styles? I'm not sure if that's what you're asking, but perhaps familiarity with the Cascade would help you? I have a post I'm happy to send you if you want to send me a DM
Creating a parallax effect for images with CSS. I always have to visit Google for that.
Div fill the remaining vertical space, then overflow: scroll;.
Another one is responsive table: css-tricks.com/responsive-data-tab... Fixed header is another problem.
Oh tables, you pesky beasts! I think we will be battling those until the end of the web :)
Perhaps the
calcfunction would help in conjunction with grid or flexbox. For a pure CSS solution, you will need to cap height to triggeroverflow-y: scrollso you could subtract the height of the header and footer with calc (or other elements if it's smaller sidebar widget or something). Good luck!I declare myself blame of this problem
I can never seem to remember basic flexbox things. Always have to start with googling! Though that's probably just because I don't do it enough. 😅
I think it took me two years of working with it to confidently choose "align" or "justify" correctly 😂 Keep at it!
How to plans Sass/Less structure for project? Some times i keep mixins and variables in same files as main Sass/Less. need extra time to optimize the Structure.
I'm a very avid Sass user, and I love the ability to prefix file names with an underscore like
_mixins.scssso that the file doesn't compile to its own CSS file but you can include it wherever you need it with an import.If it's a small project, you may be ok with one
_mixins.scssfile and perhaps one_variables.scssfile, but if it's larger and you're creating lots of distinct components, you may nest them into the component structure like:So that mixins and variables are local to the component but a bit more organized, and then you would import just the card file into a main Sass file to be compiled to your final. Just one option!
Thanks for your help :)