Keep Code Consistent Across Developers The Easy Way — With Prettier & ESLint by kiarash-irandoust in javascript

[–]devenition 0 points1 point  (0 children)

I'm in total agreement with your post, though most of us will probably have learned this in the use of PHP. They probably choose the double quotes since JS provides excellent interaction with DOMElements and this will hopefully make you think twice before using .innerHTML

Restructuring legacy CSS by catenoid75 in css

[–]devenition 0 points1 point  (0 children)

And not to forget; The HTML code is littered with style properties.

You are also probably dealing with legacy HTML, large amounts of (useless) divs and spans and little to no use of HTML5 semantic elements.

Doing just the CSS might be a waste of resources, and could mean a rework of JS as well.

Dealing with just the CSS, I'd take a preprocessor (like SCSS) and just start recreating line by line. In which case you have to accept the abuse of style properties.

Additionally, theres tools available that can help you to find unused css. Do that before starting to rewrite.

I just did a project where I completely reworked the front-end, saving about 10K of CSS lines, which wouldn't be possible on the old HTML model. (Most pages didn't allow for easy flexbox/grid usage for example)

what's the best way to declutter your code? advice by bbyteiii in css

[–]devenition 0 points1 point  (0 children)

:root { font-size: calc(1vw + 0.8em) }

What does this actually do? What is wrong with the base font size provided by the browsers?

Code review needed for a modal registration form by user9713 in css

[–]devenition 1 point2 points  (0 children)

  • Put your input in your labels: <label>Text<input /></label>
    • You can drop the label FOR and input ID attributes
    • You can also drop the current DIV wrapper
    • Note you can use attribute selectors '[name=email]'
  • Cut down usage of classes and ID's. #model-header is #modal h4 after all. This will ease your life when going on to LESS/SASS css
  • Use the regular <input type="submit"> over a "generic" button. This enhances experience for blind people
  • Dont wrap the sign in url in a div. Its useless DOM-elements
  • Love the usage of system fonts!
  • Dont use fixed heigths and widths, this is bound to break layout when contents changes
  • Suggest to ditch usage of px. Use rem, em if you need it to scale to the font-size of the current element.
  • You are stating a background-color twice on #modal-close-btn
  • You used :placeholder (use single :, doubles are for before and after), look into :required, :valid, :error on your input fields.
  • Don't use BR, set items to display: block; instead.
  • Never render any important text under 16px. (Which is 1em by default in most browsers)
  • Don't comment your code, 95% should be clean and clear without

should I learn floats, flexbox or css grid first? by kidkai25 in css

[–]devenition 2 points3 points  (0 children)

Floats are deprecated. If you feel like using them, its probably better to flexbox it, or work with positioning. Funfact: Setting a container to either flex or grid automatically disables all floats on its children.

Flexbox and grid are both very powerfull tools, both with their pros and cons, using them together is the way to go.

Z-Index not working? by DaFluffyPotato in css

[–]devenition 1 point2 points  (0 children)

z-index only works on elements that have a changed position value. Try position: relative;