Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have completed html and css and now i want to pass another step.So should I learn responsive design with media queries first or learning Less for CSS then I pass for media queries?
Less is just a smarter way of generating CSS. I think you should learn everything CSS has to offer before jumping to a language that just generates CSS. I will give you two good reasons for that:
You can do anything with CSS that you could do with LESS. You can't do responsive design with Less if you don't know media queries.
Knowing what is happening under the hood will ease the learning of a preprocessor language (Less, Sass, etc) later, as you will have a better understanding of the bigger picture.
I'd say that media queries are easy enough to pick up alongside of a library like SASS/LESS. Responsive design is more about the concept of giving your elements dynamic values than static ones. But, don't let learning one inhibit you from learning the other. If you already have a solid understanding of css, jump in and do both at the same time. It's not like you can't go back and check out what you've written in plain css after it has been compiled.
cheers mate!
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 months ago.
Improve this question
I am new to web development. I was wondering if I should really write different CSS code for different browsers. If I should, any tips for writing and testing my website in different browsers? Also, which browsers should I write different CSS code for? Thanks!
If you use autoprefixer then it will do all the different browser stuff for you: https://css-tricks.com/autoprefixer/
For testing in different browsers you could use something like BrowserStack
I suggest you write CSS code that targets the largest audience or market. Currently, the most used browser is Google Chrome. If you're more comfortable with another browser such as IE or Safari you can choose to write browser-specific CSS code.
Be sure to check the browser compatibility of the CSS properties you're using on the MDN Web Docs. Cheers!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Instead of giving a background-color, border, etc. to each element, I decided to make a list of classes like red-background, blue-text, border-1px and others ...
Is it fine to do this or not. If not how I should then?
Example
Thanks for answers, I was just unsure about if I'm doing well or not. I will try to give a better naming.
That type of approach is called utility-classes and has been greatly spread by Tailwind CSS framework. Which makes use of small descriptive classes instead of already made and opinionated component classes like the ones from Bootstrap.
This approach has the multiple pros, like simplicity, composability, and reusability.
But they will also probably make your classes be really long for each of your html tags.
There is nothing wrong with this, it's a matter of what works best for you.
Some css libraries or frameworks use approaches like that.
For instance in bootstrap you can use hidden to hide an element via the display: none; prop.
This is refered in some places as utility/helper classes.
That's a good idea and a good approach to have several classes. But from the naming perspective, that's better to use names that will describe the behavior, instead of color or border with. Declarative vs imperative. For example instead of blue-text is better to use common-text, because your blue can easily become green/black gray later.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
There are so many ways to use style inside react js that it confuses me.
for example :
Normal CSS
CSS in JS
Styled Components
Sass & SCSS
Are the above methods influencing website load speed?
What is the difference between these methods?
Try using SCSS when ever you can. It helps to organize your stylings and will be processed to css any way. So there is literally no mentionable downside.
For simple styling i would recommend normal css classes (in .scss files).
For complex animation or styling logic use javascript in conjuction with existing animation libraries like framer-motion. That way you have more control over what is happening and also more possibilities to make your site outstanding and unique.
Performance is all the same, all of them are translated into plain CSS when you run : npm run build.
CSS has its benefits, because of designer-friendly but you may get some problems by accidentally making 2 classes with the same name(this is when you have CSS split into many files) if this happens it will make debugging a nightmare (been there myself).
Sass has the same problem as css, but it's a way more cooler css :)
Styled-component, CSS in js, may fit a little better on react component-based world, because for every "class" that you style a UNIQE className is generated + it gives you more power by having props/state modifying the styles of classes, not like others where for a backgroundColor change you will need 2 classes.
There are a lot of ways to do this, best-comparing article that it served me well in my beginning is in here: https://www.sitepoint.com/react-components-styling-options/
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I have a difficulty in remembering the names of properties in CSS. I don't know if I'm the only one or is it normal? My question is: is it OK if I use a cheat sheet? and do most desiners use something like that?
If so, please give me a link to a good reference (cheat sheet) for CSS properties.
Downloadable PDF cheatsheet: http://coding.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
Preview here (archived)
as #Petar Suggested, you should use a normal IDE which will guide you.
On the other hand, in time you will be able to remember what you need, practice, practice, practice.
if you need a "Cheat sheet" this should be a good one:
http://www.w3schools.com/css/
It's always okay to use a reference. The more you write CSS the less you will need one. For example if you can't remember attributes like width, height, margin, padding. You definitely need to practice more.
For more complicated stuff like css3 gradients and transitions, I use this resource here.
http://css3generator.com/
Let me know if you need something else.
I personally Use Aptana studio. It detects errors and auto completes property names etc. However http://www.w3schools.com/css/ is a good refference and over time you will just remember them for the most part.
You can try this,
elizabethcastro
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I've read that type of selectors used in JavaScript (jQuery as well) matters if one wants to achieve better performance in speed, loading times, etc.
Does the same apply to CSS as well? If so which selector is better to use in DOM: id, class, or maybe nested? I'm talking certain elements here (like a specific <ul> and not all <ul>s in general).
I doubt it CSS could cause great rendering troubles in loading time and speed.
In my experience I've come to the conclusion you should keep your CSS nice and simple. I've seen things like:
.element1 {...}
.element1 #element2 {...}
.element1 #element2 .element3 {...}
But I'd rather go with unique selectors wherever possible and simply describe them as:
.element1 {...}
#element2 {....}
In my opinion optimizing CSS is quite tricky and you should do it carefully.
as I have read many times IDs are faster for finding elements than classes as elements with ID are stored as a hash table and the search is faster.
Unfortunately I don't know any resource to prove or reject this, but as I have already said I have seen this kind of statements a lot.
Two HTML elements on a page can not have same id so for single element handling it is good to use ID..
Same class can be used by many elements so for group operations it is good to use class..
In performance wise both works good for me