@billyhalim
Focus and never give up
Nothing here yet.
Nothing here yet.
No blogs yet.
Great article. However, it is based on opinions. CSS Framework won't care enough with the meaningful CSS. Why ? Because it is a framework :). To make your CSS meaningful, that's your task. Naming like .form, .form-group, .form-input is better than what other people said. If you try to avoid those classes, then you will face the specificity of CSS classes. Using [type=text] and [type=submit], for me, is not that good. You may also use some classes to describe [type=text]. For example, the text input for form registration, form login, currency, etc with each of them applies different styles.
For me, Minified or Gzip your CSS and Javascript files. Don't use too much animation. For example, CSS3 Animation or Scroll Reveal If you are encouraged to apply the 2nd point, especially for the scroll reveal, use a preloader. Scroll reveal won't work beautifully when your website is loading the assets as users will scroll down along your website before all the assets are loaded. Don't use too much images. I recommend you to use images that are only important and relevant to your website. If you can't fulfill the 3rd point, then reduce your images size as much as possible without losing the quality of the images . Most of high quality images on the internet has huge size (i.e. 5MB). However, if the size reducing affects the image quality but you feel that the image is good enough to look, then go with it . This tricks works well for me. Ensure that you use all classes in your CSS files. If there are classes you didn't use, eliminate them. This point comes out a lot when you use a CSS framework. CSS framework contains many sets of classes that you probably won't use all of them. CSS framework like Bootstrap offers you to customize what components do you want to use on your website. Good Luck :)
@maruru Owh...but I think if they are documented well, there will be no problem. However, I don't like that name convention instead I will use hyphen to separate every words and numbers. For example, w-100, h-50-p
@maruru Hmm...I forgot something. In my opinion, your last comment is not really important for CSS libraries or frameworks because the CSS classes abbreviation and function are well documented. Frameworks/Libraries won't make your code more readable. However, your task is to make your code readable. Let's say Bootstrap. Bootstrap has a grid system with classes like .col-lg- , .col-md- , .col-sm-*. Those classes are not understandable unless you have read the documentation. Before we read the docs, we don't know that lg, md, sm are breakpoints.
@maruru Hmm..if you own the code only, no one will read your code, it is okay. However, if your code builds a library/framework or even your code is open to public, then you must follow the correct naming convention.